Tin tức chung

Công nghệ "hiện đại" đằng sau tốc độ tải trang chóng mặt của Thế giới di động

27 February 2020

Trang Thế Giới Di Động (thegioididong.com) sử dụng công nghệ gì mà có thể tải nhanh chóng mặt như vậy. Chỉ mất vài phút để mở web thế giới di động lên tìm hiểu, nhưng mình lại nhận được một câu trả lời vừa hay ho, vừa ngạc nhiên và vô cùng thú vị.

CÔNG NGHỆ “HIỆN ĐẠI” PHÍA SAU TỐC ĐỘ TẢI TRANG “CHÓNG MẶT” CỦA THẾ GIỚI DI ĐỘNG

Lưu ý: Vì không biết back-end của thế giới di động ra sao, mình chỉ có thể dự đoán được 2 điều sau về back-end:

  • HTML được cache trong RAM của webserver hoặc web application nhằm giảm thiểu thời gian tải back-end (Nếu user chưa đăng nhập).
  • Hệ thống CDN của thegioididong đặt tại nhiều nơi giúp tăng tốc độ tải resource (ảnh, css, js)

Do vậy, bài viết này chỉ nhằm phân tích về front-end của thế giới di động thôi nhé.

Công nghệ hiện đại … 12 năm tuổi?


Các bạn có thể xem ở giây thứ 5 trong hình dưới, thegioididong chỉ mất khoảng 1s để tải (Đã dùng Ctrl+F5 để xóa cache và load lại toàn bộ trang).

Load trang với tốc độ bàn thờ (trong chớp mắt)

Bạn sẽ rất ngạc nhiên khi biết rằng, thegioididong không hề sử dụng bất kì framework hiện đại nổi tiếng nào (VueJS, ReactJS, AngularJS) và chỉ sử dụng những thứ cực kì căn bản:

  • HTML được render hoàn toàn từ phía server (server side render)
  • JS thuần + chút ít jQuery

Thế nhưng, chính những công nghệ “bình thường và cũ rích”, này (chứ không phải những thứ hay ho như React, Webpack) đã góp phần giúp thế giới di động đạt được tốc độ tải trang “thần thánh”.

Front-end được optimize cực tốt!


Lý do tgdd có tốc độ tải trang chóng mặt như vậy là vì phía front-end đã được optimize rất kĩ! Chúng ta hãy cùng thử phân tích xem:

1. Kích thước của trang vô cùng nhỏ

Khi mở Chrome Dev Tools của tgdd, ta sẽ thấy những request từ browser đến server

Với một trang web bán hàng, quá trời hình ảnh, tổng lưu lượng tải từ HTML, CSS, JS cho tới ảnh chỉ là 581KB, tức là chỉ bằng một tấm hình, kinh khủng chưa?

Một tấm hình cam cam “Bão Sale” gì đó bên Tiki cũng có dung lượng hơn 500kb, tức là gần bằng toàn bộ trang thế giới di động

Quan sát kĩ một tí size ảnh, các bạn sẽ thấy ảnh của thegioididong rất nhỏ, chỉ tầm 20-40kb. Điều này cho thấy các ảnh đã được optimize rất kĩ. Họ cũng không dùng các thư viện như bootstrap để … giảm dung lượng trang.

Ngoài ra, trang còn áp dụng lazy load nên khi các bạn scroll xuống mới load các ảnh bên dưới. Do vậy, browser chỉ cần tải banner và 4, 5 tấm ảnh phía trên, giúp giảm được lưu lượng tải rất nhiều!

2. Xử lý CSS và JS đúng cách

Quan sát kĩ hơn, ta thấy thegioididong không hề tải file CSS nào, mà bỏ toàn bộ file CSS vào head. Làm như vậy, khi load xong HTML, browser không cần phải tải CSS mà có thể render ngay luôn.

Đây là một trick tăng tốc khá hay mà ít người biết. Bạn nào muốn tìm hiểu thêm có thể đọc bài này: Bỏ CSS vào head – Thời gian render giảm từ 378ms đến 225ms).

Do web chỉ có HTML tĩnh, không cần dùng JS để render nên file JavaScript được để phía dưới cùng, thêm tag defer. Tag này giúp browser thoải mái render HTML trước rồi mới chạy JavaScript.

CSS trong thẻ head thật chứ mình không có chém gió nhé hihi

3. Cache everything

Kiểm tra kĩ hơn, các bạn sẽ thấy những tài nguyên như ảnh, CSS, JS đều có head cache-control=31536000, tức browser sẽ cache các tài nguyên này trong 1 năm.

Do vậy, khi load lại trang, browser không cần phải tải lại ảnh, CSS, JS này nữa. Vừa đỡ nặng server, vừa tăng tốc độ tải. Đúng là một công đôi việc nhỉ?

Làm được như thegioididong có khó không?

Về backend thì mình không dám bàn về độ khó!

Để làm back-end 1 hệ thống có hàng triệu người dùng như thế giới di động, ta cần thiết kế architecture có tính scale cao, chưa kể từ webserver cho tới viết code và SQL query đều phải được optimize từng ly từng tí một.

Tuy nhiên, phần front-end thì lại khá dễ thực hiện, chỉ cần làm theo những guideline trong bài viết là xong:

  • Optimize dung lượng tải trang (từ hình ảnh cho tới CSS, JS)
  • Hạn chế dùng thư viện để giảm lưu lượng cần tải
  • Thêm CSS vào head, JS không cần thiết thì để cuối trang.
  • Cache tất tần tật đủ mọi thứ

Mấy cái này không phải mình tự nghiệm hay tự chém ra, mà do chính Google chia sẻ trong mục Web Performance nhé!

Ngoài ra các trang khác như Điện Máy Xanh, Bách Hóa Xanh va Trần Anh chắc cũng được sử dụng chung source code với Thế Giới Di Động nên cũng có load trang với tốc độ bàn thờ nốt!

Chốt


Hóa ra để làm một trang web với tốc độ “bàn thờ” cũng không khó lắm nhỉ!

Nguồn: Tôi đi code dạo Link gốc: https://toidicodedao.com/2018/03/27/cong-nghe-tai-trang-the-gioi-di-dong/

Đánh giá của học viên đã tốt nghiệp

  • Các anh chị nhiệt tình, thân thiện. Em được mở mang nhiều kiến thức

    Nguyễn Hằng ly
  • Các chị dạy rất dễ hiểu và nhiệt tình. Các kiến thức như trong thực tế khi em đi thực tập tại RikkeiSoft. Cám ơn các anh chị nhiều ạ. Chúc Dev có nhiều học viên hơn nữa.

    Vũ Thị Hà Phương
  • Học ở DevPro đã giúp mình có nhiều kinh nghiệm lập trình android thực tế. Tại đây mình được các thầy dạy rất chi tiết theo một lộ trình rõ ràng của dự án cụ thể nên sau này đi làm mình rất dễ bắt nhịp với công việc.

    Nguyễn Trọng Duy
  • Qua khoá học ở DevPro thì em đã có một “ít” vốn trong tay để có thể "bò" trong lĩnh vực vạn người mê này Trong qúa trình học thì em cảm thấy trung tâm suppost rất nhiệt tình từ đồ ăn tối, event và đầu ra :p. Có chị Quyên "sinh gái" siêu nhây và siêu lầy dụ dỗ bán rẻ học viên cho các nhà tuyển dụng :3 **** Đặc biệt các thầy có rất nhiều kinh nghiệm chỉ dạy và giúp đỡ rất nhiệt tính < mấy tháng liền bám càng đi nhờ thấy :p>

    PhạmTiến Đạt
  • Tôi sẽ không khuyên các bạn phải đến DevPro để học tập thay vì những chỗ khác nhưng tôi đã từng là một người giống các bạn. Tôi băn khoăn không biết chọn nơi đâu làm ngọn đèn chỉ lối và tôi đến với Devpro . Mọi người khá hoà đồng , các thầy cũng cực nhiệt tình nhưng cũng có vốn kiến thức rất rộng còn lại là phụ thuộc vào sự nỗ lực của các bạn nữa thôi. Cố lên nhé. #ATran

    Trần Xuân Ái
  • em thấy mọi thứ đều ổn, thầy giáo nhiệt tình trong cách giảng dậy, dev cũng rất quan tâm học viên . Nhưng theo quan điểm của em và nhìn từ sự phát triển của các trung tâm khác , em nghĩ mỗi khóa học ở dev nên có bài tập cũng như dự án giao cho học sinh làm để tạo áp lực cho học viên code, giữa học viên và công ty cần có những buổi giao lưu nhiều hơn, và cũng nên có 1 số bạn trợ giảng giúp thầy đi fix những lỗi cơ bản cho những bạn hay sai , chứ nhiều khi 1 mình thầy mà phải chạy đến từng bàn fix lỗi cũng k xuể , Xin chúc devpro ngày càng phát triển hơn

    Nguyễn Đình Thành
  • Thầy giáo dạy rất nhiệt tình rất dễ hiểu, các chị quản lý vui vẻ, tạo động lực học viên. Bài giảng phong phú bao gồm nhiều kiến thức nền tảng. .., giúp học viên nắm chắc kiến thức. Có điều lớp toàn nam, ko có nữ ạ

    Vũ Văn Thủy
  • -Thầy giáo rất nhiệt tình trong công tác giảng dạy , cũng như vui tính , thầy luôn giúp đỡ bọn e rất nhiệt tình ! Tuy chỉ học với lớp 1 thời gian không quá dài nhưng e cũng cảm thấy tuyệt vời vì đã từng là học trò của thầy ! - Chị Hằng và Chị Quyên rất vui tính và nhiệt tình giúp đỡ bọn e nữa ạ - e chúc trung tâm ngày càng đông học viên hơn nữa

    Phan Trung Phú
  • DevPro là một môi trường tốt để cho những ai chưa biết gì về lập trình theo học. Bên cạnh đó, đội ngũ giảng viên rất chất lượng, nhiệt tình chỉ bảo cả trên lớp lẫn ở nhà. Ngoài ra tôi rất thích chính sách giới thiệu việc làm cho học viên sau khi tốt nghiệp để có thể tiếp với các doanh nghiệp uy tín. Sau hơn 4 tháng học tập tại công ty, tôi đã hoàn toàn tự tin rằng mình có thể tự học hỏi và bắt đầu làm việc ở một công ty mới với vai trò Web Developer. Cảm ơn DevPro vì tất cả!!

    Nguyễn Đức Huy
  • Học một lúc 2 trường, nhưng mình vấn chưa biết tìm đam mê từ đâu. Từ lúc gặp chị Hằng mình đã quyết chọn theo android, và bây giờ mình chưa bao giờ thấy hạnh phúc đến thế. Mình có công việc ổn định, chuẩn bị onsite ở nhật 1 năm hi hi.

    Trần An Hưng
  • 1.Thầy đẹp trai thì không phải bàn rồi!! Lại được cái nhiệt tình!! ok. 2. Công ty có nhiệt tình hỗ trợ không? Công ty có nhiệt tình hỗ trợ sinh viên, vd:tiền học phí được chia làm 3 đợt giúp đỡ những sv khó khăn,.....

    Trương Quang Trường
  • Em thấy trung tâm dạy tốt và chất lượng ạ. Thầy và các chị đều tận tâm, nhiệt tình và hòa đồng. Đặc biệt là giải lao giữa giờ chúng em còn được ăn nhẹ, e rất thích khoản này.

    Trần Thị Hồng Nhung
  • Tại DevPro mình còn được học code trên tool mới nhất của Android, điều đó càng khiến mình thích thú hơn và trở nên say mê từ lúc nào không biết nữa. Không khí học ở đây rất vui vẻ, ngoài giờ học mình cùng các bạn còn được giải lao ăn nhẹ và trò chuyện cùng nhau nên rất thoải mãi.

    Trương Ngọc Đức
  • Dev chính là nơi giúp mình tìm thấy niềm yêu thích code, cũng chính là nơi đã cho mình những bước đi đầu tiên, cho mình những kiến thức nền tảng tốt nhất trên con đường theo đuổi nghề Dev.

    Nguyễn Thanh Hằng
  • Thầy giáo vui tính, nhiệt tình trả lời và giúp đỡ các bạn khi các bạn có thắc mắc hay khi gặp khó khăn. Các anh chị vui tính, thân thiện tạo cảm giác thoải mái và vui vẻ cho các bạn khi học ở đây.

    Cao Minh Lâm
  • Nghĩ lại hồi đấy, không có Devpro thì chắc giờ em phát rồ mất thôi! Em vốn nghĩ mình có thể tự học được, nhưng kiến thức vốn là vô tận, không có người hướng dẫn thì mình sẽ chẳng biết bắt đầu dư lào, bước tiếp là gì? Nhờ DevPro, sự tận tâm của các thầy mà em mới biết à hóa ra mọi thứ thật đơn giản.

    Kim Erico
  • Hồi học ở DevPro, mình rất quý thầy Việt và những người bạn. Từ kiến thức học được từ trung tâm mình đã mạnh dạn đi thực tập ở một công ty lớn của Nhật Bản và đến giờ đã là nhân viên chính thức ở đây rồi. Vui hơn nữa là có bạn học cùng lớp đó giờ đang là đồng nghiệp cùng mình luôn rồi. Hihi

    Nguyễn Thanh Việt
Nguyễn Hằng ly Vũ  Thị Hà Phương Nguyễn Trọng Duy PhạmTiến Đạt Trần Xuân Ái Nguyễn Đình Thành Vũ Văn Thủy Phan Trung Phú Nguyễn Đức Huy Trần An Hưng Trương Quang Trường Trần Thị Hồng Nhung Trương Ngọc Đức Nguyễn Thanh Hằng Cao Minh Lâm Kim Erico Nguyễn Thanh Việt