Tối ưu tốc độ duyệt cho website thương mại điện tử, khám phá, chia sẻ, giải thích từ đàn anh thegioididong, shopee, lazada

Câu chuyện thời 4.0 thời công nghệ. Thời gian và chất lượng là tối quan trọng. đặc biệt hơn nữa là các bạn làm thương mại điện tử. giả sử bạn có website bán hàng. Bạn chạy chi tiền cho quảng cáo sản phẩm trên website. Khách vào website bạn, nhưng vào mãi thấy quay mãi, thoát luôn. như vậy bạn vừa mất chi phí quảng cáo, vừa mất đi khách hàng. Để tránh tình trạng như vậy bạn cần tối ưu hệ thống website của mình. Về tốc độ tải, về giao diện, v.v.. trên cơ sở đó bài viết này từ Nghiart.com để khám phá để mổ sẻ. cách mà các trang thương mại điện tử lớn đang làm và bản thân website nghiart.com này nữa. 3 đại diện mình đề cập là:

  • thegioididong.com đại diện bán điện máy, điện thoại, máy tính và các đồ công nghệ khác.
  • shopee  đại điện châu á bán đủ các thứ trên đời. Thượng và hạ cám đủ cả.
  • lazada. Một cái tên nay đã về tay TQ, mình xin ko đề cập nhiều. Vì hiện tại lazada đang chuyển giao về tay alibaba nên hệ thống chưa thật ổn định. Sau thời gian nữa mình sẽ viết bài đánh giá chi tiết sau.

với khả năng của mính sẽ đánh giá qua và giải thích về các khả năng mà các website thương mại điện tử lại có tốc độ tải trang tốt hoặc như thế nào đó. Tuy nhiên, mình cũng nói thêm là mình không phải nhân viên, hoặc là đã dc hé vào hệ thống của các website thương mại điện tử mà biết back-end của hệ thống bên họ ra sao. Nên bài viết này chỉ mang tính chất tham khảo.

đầu tiên là thegioididong.com với tốc độ duyệt trang rất tốt

qua vài mối quan hệ mình dc biết ae IT trong thegioididong bị áp KPI tốc độ nhé, 3s là khoảng thời gian tối đa để tải về thegioididong.com.

Tốc độ tải trang thegioididong nhanh đến sững người

đầu tiên mình sử dụng Chrome Dev Tools, để kiểm tra tốc độ tải của trang của thế giới di động. Qua hình ta thấy các con số nói lên tầm vóc của thegioididong.

Kích thước trang nhỏ gọn.

bạn thấy đó toàn bộ phần tải về ban đầu của thế giới di động rất nhỏ, chỉ khoảng 600-700KB. Ở ảnh trên là mình có kéo xuống nên dung lượng tải có thêm một chú (sẽ giải thích ở phần sau) và tốc độ tải trang chỉ có 1s. Quá tốt, một website bán hàng, cả 1 đống ảnh, js rồi css vậy mà chỉ vỏn vẹn có mấy trăm KB mà tải hết trong có 1s. Cần chú ý rằng toàn bộ các ảnh sản phẩm có kích thước rất tốt. Những ảnh có kích thước tương khá lớn như các banner 600×600 thì không cái nào trên 100k. Vậy là toàn bộ ảnh của hệ thống thegioididong được tối ưu/optimize một cách rất kỹ. Và còn không sử dụng bất cứ các thư viện như boostrap … để giảm dung lượng website.

Tối ưu khi xử lý CSS và JS một cách không thể tốt hơn

Quan sát kỹ hơn vào font-end của thế giới di động không hề có file .css nào. có nghĩa là website của họ không hề tải File CSS nào. Cho toàn bộ fle css ném vào thẻ Head của website luôn. Thật tuyệt, bạn biết vì sao không? đơn giản là khi load HTML xong trình duyệt người dùng sẽ build/render luôn website (bình thường sau khi tải HTML thì trình duyệt sẽ tải các tài nguyên khác, CSS, JS v.v.. và thực hiện việc render/build ). Như vậy sẽ rút ngắn đáng kể được thời gian tải website. Và the gioi di dong đơn thuần là html tĩnh, không cần dùng js render nên file javascript được để xuống dưới, cùng tag Defer. GIúp trình duyệt render/build trc rồi mới chạy các javascript. thật sự là vô cùng hợp lý và đúng cách.

Cache mọi thứ website thegioididong có

tìm hiểu sâu hơn nữa thì toàn bộ các tài nguyên ải về của thegioididong hoàn toàn được cache lại/ lưu trong bộ nhớ tạm của máy tính. Thời gian lưu là tới 1 năm :(.

thế giới di động sẽ lưu ảnh vào máy của bạn ít nhất 1 năm

có nghĩa là khi bạn đã vào thegioididong.com thì những lần sau bạn sẽ chỉ phải tải thêm những cái gì mới thôi. Như vậy tốc độ sẽ nhanh hơn (tại sao lại nhanh hơn sẽ giải thích sau)

ước đoán công nghệ hện đại mà thegioididong sử dụng để nâng cao tốc độ tải trang.

1. Đầu tiên là hệ thống dedicated máy chủ mạnh mẽ và trải rộng.

tất nhiên rồi với chuỗi bán lẽ phủ khắp cả nước. rất có khả năng thegioididong đặt nhiều server và hệ thống CND chứa tài nguyên website.

giúp giảm thiểu tối đa thời gian tải dữ liệu.

2. HTML được cache sẵn trong RAM server hoặc web application.

Đối với no-loggin, như vậy thời gian sử lý back-end sẽ rất ngắn

3. Công nghệ cũ như chưa bao giờ là lỗi thời

Có thể bạn chưa biết nhưng, thegioididong không sử dụng framwork hiện đại nào cả ( VueJS, ReactJS, AngularJS). Mà sử dụng công nghệ từ 12 năm trước cùng với sự tối ưu của it.

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

song, với những thứ công nghệ bình dị và cũ mèm này giúp thế giới di động tải tốc đọ tải trang tuyệt với.

Liệu có làm được giống như thế giới di động đã làm với hệ thống thương mại điện tử của họ đã làm

Riêng phần back-end thì mình không dám bàn về mức độ phức tạp của hệ thống. Hiểu đơn giản là Để 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ế hệ thống tốt. chưa kể từ webserver cho tới  người code và SQL query đều phải được tối ưu từng tý xíu. Thêm 1 chút là sẽ thêm tài nguyên. Thậm chí là ảnh, mỗi 1kb ảnh tải về cũng mất thời gian. Nên bên họ tận dụng tối đa mà vẫn cân bằng với chất lượng hiển thị

Tuy nhiên, phần front-end thì để tối ưu như thegioididong lại khá dễ thực hiện, chỉ cầnchú ý các điểm sau:

  • 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ứ

tạm kết với thegioididong.com

với các trang thương mại điện tử thì ngoài các tính năng vượt trội. Giao diện thân thiện với người dùng thì tốc độ tải trang cũng đóng góp rất lớn. Tất nhiên với những thứ đơn giản nhưng những gì thegioididong làm được là rất tốt. tối ưu tới từng bức ảnh và từng file trên hệ thống. Cùng với hệ thống CDN và server tốt giúp tối ưu rất tốt tóc độ tải trang của thế gới di động

Quay trở lại với bài toán tối ưu tốc độ duyệt web thương mại điện tử quy mô nhỏ

ở phần này mình sẽ nói về blog của mình: Nghiart’s Blog. website chia sẻ nhỏ thôi, dùng hosting hawkhost gói cùi mía 2.9$ / tháng + sale 65% dịp blackfriday. Tính ra 1 năm hosting mình sử dụng mất 12.8$, mỗi tháng mất hơn 1$. Server đặt tại sing. Mình có kết quả tải như sau:

tối ưu tốc độ tải website

những điều mình đã làm được với một hệ thống hosting cùi bắp và giá rẻ.

  • Back-end mình sử dụng platform WordPress với giao diện tự làm dựa trên nền tảng genesis
  • Tối ưu lại dung lượng tải trang (mình làm khá kỹ với ảnh và các file js và css)
  • cache gần như toàn bộ dữ liệu của website

kết quả sau tối ưu thật như các bạn xem phía trên, khá tốt. Thực ra là có thể tốt hơn 20-30% nữa nhưng vì có ít thời gian nên tạm thời dùng ở mức 1.4s load trang và khoảng 250kb dữ liệu tải trang.

Những việc làm để có thể tối ưu hơn nữa tốc độ tải trang.

  • có thể đầu tư dedicate riêng với sức mạnh vật lý tốt (thuê VPS việt riêng, đường truyền riêng)
  • tối ưu hệ thống server
  • Sử dụng dịch vụ CDN của việt nam

Tuy nhiên những điều trên là chưa thực sự cần trong thời gian này. Đơn giản với tốc độ load trang nghiart.com chưa tới 2s thực sự cũng tạm ổn, kể cả nếu trang này mình sử dụng cho mục đích bán hàng. Vì thế nếu bạn có nhu cầu tối ưu hệ thống website bán hàng có thể liên hệ với tôi. Tôi sẽ giúp bạn trong khả năng của mình