Đây là bài viết tổng hợp lại kiến thức thực tế tối ưu tốc độ mình đã áp dụng và có những thành quả nhất định trên website https://imitsu.jp (Một website B2B giới thiệu/đấu giá dự án hàng đầu Nhật Bản). Bên cạnh các phương pháp được áp dụng, bài viết cũng chứa đựng những thách thức và khó khăn phải đối mặt. Hãy cùng Fullstack Station cải thiện tốc độ tải trang (pagespeed) nhé.

Theo góc nhìn của mình thì pagespeed là “tốc độ tải trang” đã bao gồm tốc độ phản hồi từ máy chủ luôn nhé. Tốc độ phản hồi từ máy chủ liên quan đến nhiều yếu tố khác không nằm trong phạm vi bài viết này. Còn Pagespeed nói riêng là những gì xảy ra ở trình duyệt web (browser).

Tại sao tối ưu tốc độ tải trang lại quan trọng?

“Người sử dụng website cảm thấy hạnh phúc” là tiêu chí cực kỳ quan trọng! Không những có giá trị trực tiếp lên người dùng mà còn ảnh hưởng đến xếp hạng tìm kiếm của Google. Bởi vì Google cũng muốn người dùng hạnh phúc với kết quả tìm kiếm. Nên những trang web có tốc độ nhanh sẽ được Google ưu ái xếp hạng. Việc cải thiện thứ hạng tìm kiếm trên Google là cái kết cực kỳ đáng giá. Điều đó đồng nghĩa với việc website sẽ được nhiều lượt truy cập hơn, việc kinh doanh sẽ trở nên tốt hơn.

“Milliseconds Make Millions“, mili giây tạo triệu đô: cứ 0.1 giây cải thiện được thì tỉ lệ chuyển đổi (conversion rate) tăng 8%. Đây là con số không hề nhỏ, và nếu bạn thực hiện tối ưu tốc độ theo bài viết này, bạn sẽ cải thiện ít nhất 0.5 đến 1.5s, tương đương “tỉ lệ chuyển đổi” tăng từ 40%~80%. Woa!!!

Chú ý: chạy theo thành tích về điểm số của Google sẽ đánh đổi khá nhiều thời gian và công sức. Và đó là một công việc khá dài hơi và có tính chu kỳ. Tuy nhiên, kết quả thì sẽ rất ngọt ngào!

Fullstack Station Tips

Cho dù bạn có làm nội dung và SEO tốt nhưng pagespeed lại chậm thì sẽ ảnh hưởng rất nhiều đến thứ hạng tìm kiếm, cũng như trải nghiệm người dùng. Là nguyên nhân dẫn đến lượng truy cập thấp. SEO thì tất nhiên quan trọng, nhưng đầu tư vào tối ưu tốc độ tải trang pagespeed thì hiệu quả lâu dài và chắc chắn có kết quả tốt.

Khó khăn và thách thức

Khó khăn

Một điều khá lạ nhưng cũng thường xảy ra là chẳng ai quan tâm đến pagespeed khi mới phát triển trang web cả. Chỉ là sau 1 thời gian thấy thứ hạng tìm kiếm không tăng nổi, hoặc là truy cập không đạt chỉ tiêu thì chủ doanh nghiệp mới bắt đầu lôi cổ phòng marketing ra, lúc đó để ý đến pagespeed.

Rất ít chủ quản website quan tâm đến pagespeed, đó chính là khó khăn cho các bạn làm marketing nói chung và lập trình viên nói riêng. Bởi vì các con số của pagespeed gần như không liên quan đến lượt truy cập và thứ hạng tìm kiếm? Hoặc là để đánh giá KPI thì rất khó khăn. Khi bạn cải thiện tốc độ lên, đồng thời thứ hạng tìm kiếm cũng lên, vậy kết quả là do chiến lược SEO, do Google thay đổi thuật toán tìm kiếm, hay do kết quả của pagespeed?

Xác định được quả thật là rất khó, tuy nhiên bạn hãy tin tưởng vào câu “Miliseconds Make Millions” do chính Google đưa ra. Và cũng có tiêu chí xác định ROI (Return On Investment): với các thông số Lượng truy cập, Tỉ lệ chuyển đổi, Giá trị trung bình đơn hàng thì TestMySite sẽ đưa ra con số doanh thu hàng năm (annual revenue) sẽ tăng lên bao nhiêu nếu bạn cải thiện được pagespeed bao nhiêu giây. Đây là phương pháp xác định con số cụ thể biết có xứng đáng đầu tư vào việc cải thiện pagespeed hay không.

Nhưng bạn phải quán triệt một điều là tốc độ tải trang không phải là chiếc đũa thần. Nếu chất lượng nội dung không tốt thì tốc độ tải trang sẽ không có ý nghĩa gì cả. Khi các trang có chất lượng bằng nhau, thì tốc độ tải trang, trải nghiệm người dùng sẽ được ưu tiên trên hệ thống tìm kiếm. Tóm lại, làm người sử dụng hạnh phúc là tôn chỉ cao nhất!

Thách thức

Như đã nói ở trên thì bạn thường bắt tay vào việc cải thiện pagespeed khi website đã đi vào hoạt động đã lâu. Và vì cũng phải có lượng truy cập tương đối khá (nhưng bắt đầu hụt hơi?) thì mới xác định được ROI mà nên thực hiện cải thiện pagespeed hay không. Với lý do đó mà tại thời điểm bạn bắt đầu cải thiện thì hệ thống website đã như 1 bãi chiến trường :)). Đó chính là thách thức.

Vì lý do tăng trưởng, nên thường thì website sẽ đặt mục tiêu về chức năng trước. Còn các mặt khác đều là thứ yếu. Tất nhiên đó là điều dễ hiểu vì nếu không có giai đoạn đó thì bạn sẽ không có cơ hội cải thiện pagespeed đâu. Tại thời điểm này, những quy tắc pagespeed đều chỉ là 1 thứ lý thuyết suông mà thôi. Bạn phải vắt óc suy nghĩ làm sao kết hợp các quy tắc đó vào hệ thống hiện tại.

Cải thiện pagespeed với công số thấp nhất mà hiệu quả cao nhất. Đó chính là “State of the art” mà bạn phải đối mặt giải quyết. Và đó cũng chính là điều mình hi vọng giúp được các bạn trong bài viết này.

Cách đơn giản để tối ưu tốc độ tải trang

Sử dụng mod_pagespeed chính chủ Google

Mình đã từng giới thiệu về mod_pagspeed để tăng tốc pagespeed cho website. Cách này sử dụng cho kết quả tốt mà lại dễ dàng. Tuy nhiên chỉ áp dụng với site tĩnh hoàn toàn. Các trang web có sử dụng form với crsf-token được tạo ra theo trang thì khó đạt kết quả như mong đợi.

Hơn nữa, khi áp dụng thì bạn gần như lệ thuộc hoàn toàn vào các thiết lập và cài đặt. Khó có thể tự quản lý các nhu cầu tuỳ biến cao. Mình nghĩ chỉ nên sử dụng đối với site nhỏ, hoặc site mới đang trong thời kỳ triển khai. Vì các tham số khá nhiều nên việc cấu hình khá khó khăn. Qua thời gian nâng cấp, các tập tin css và js được thêm vào nhiều thì rủi ro sẽ tăng lên. Bởi vì tự động nên cũng có khi có lỗi ngoài tầm kiểm soát.

Trang fullstackstation.com có kết quả 1.8s/Good trên testmysite cũng đang sử dụng mod_pagespeed. Mình khá hài lòng kết quả này. Tuy nhiên điểm trên Pagespeed Insights thì vẫn không được cao. Do Google mới thay đổi thuật toán tính điểm.

Sử dụng các framework/plugins hỗ trợ tốt về pagespeed

Plugins cho WordPress

Hiện tại Fullstack Station sử dụng wordpress nên mình dùng Autoptimize (nén js và css thành 1 file) và Hyper Cache (tạo cache trang thành html), kết hợp với mod_pagespeed. Về cơ bản thì những plugin cho wordpress chỉ giúp cải thiện ở một vài quy tắc. Để tối cải thiện tốc độ tải trang thì plugins là chưa đủ.

Có rất nhiều plugins cho wordpress cải thiện tốc độ nói chung, nhưng không nằm trong phạm vi bài viết này. Đơn giản nhất là chỉ cần sử dụng 2 plugins nói trên. Với các website doanh nghiệp, mình khuyến nghị nên dùng bộ lập trình của https://roots.io/. Sử dụng bộ của Roots để tạo theme cũng như quản lý các plugins 1 cách bảo mật. Khi bạn tự phát triển theme, thì sẽ dễ dàng quản lý các javascript và css hơn.

Các js framework

Với kỹ thuật code splitting, thì các framework hay thư viện hỗ trợ dựa trên webpack sẽ giúp tốc độ trang khá tốt. Cơ bản thì sẽ giúp trang tải css và js cần thiết cho việc render. Ngoài ra còn cải thiện tốc độ rất tốt với kỹ thuật tạo trang html tĩnh và động tương ứng.

Điển hình là các js framework như Gatsby.js, Ghost CMS, Next.js, Nuxt.js. Cơ chế trang tĩnh rất quan trọng, để đảm bảo tốc độ tốt nhất. Và cũng cần cơ chế tải từng phần như Gatsby để nâng cao trải nghiệm người dùng.

Các quy tắc đảm bảo tối ưu tốc độ tải trang tốt

Đơn giản (nhưng cũng đầy cam go) là bạn sử dụng Lighthouse ngay trên trình duyệt Chrome hoặc dùng Pagespeed Insights để kiểm tra và chẩn đoán từng trang. Các công cụ này sẽ đưa ra các khuyến nghị và chỉ cần làm theo là sẽ cải thiện được.

Mình cũng đã phải trải qua hàng trăm lần kiểm tra để đưa ra giải pháp tối ưu nhất cho website imitsu.jp. Và kinh nghiệm được rút ra như sau:

• Tốc độ phản hồi máy chủ nhanh: mỗi request dưới 300ms cho 4G/mobile, 100ms cho desktop, đặc biệt là trang html (Doc).
• Mỗi request (html, css, js, image): dưới 50kB cho mobile và hạn chế nhất có thể trên bản desktop.
• Hạn chế số lượng request: dưới 35 requests, càng ít càng tốt
• Cache Policy: nên để thời gian cache lâu (6 tháng~), khi bạn cần thay đổi thì thêm parameter ở URL hoặc, thay đổi tên file.
• CDN: những file tĩnh nên sử dụng CDN để tăng hiệu quả tốc độ
• Sử dụng lazyload: kỹ thuật này giúp browser không tải ảnh khi chưa sử dụng (chưa hiển thị trong viewport)
• Tối ưu tải css và javascript: css ở head và javascript file thì ở dưới phần footer, inline phù hợp.
• Sử dụng worker để xử lý các script, tính toán không cần thiết ở main thread.
• Sử dụng loại định dạng ảnh mới như WebP, JPEG 2000, …

Trên đây là một số quy tắc chủ đạo xoay quanh các tiêu chí:

• Nhanh nhất có thể
• Nhỏ, nhẹ nhất có thể
• Sử dụng đúng nơi, đúng chỗ (không thừa)

Tuy các quy tắc thì nhiều, nhưng tựu chung cũng tập trung cho các tiêu chí trên. Đảm bảo các tiêu chí trên thì dù Goole có thay đổi các tiêu chí đánh giá, thì điểm số vẫn sẽ cao.

Core web vitals

Core web vitals sẽ là tiêu chí quan trọng ảnh hưởng đến xếp hạng tìm kiếm. Do dịch corona nên tiêu chí này được dời lại 1 năm. Năm 2021 sẽ áp dụng Core Web Vitals để đánh giá xếp hạng tìm kiếm. Tiêu chí này ảnh hưởng trực tiếp đến trải nghiệm người dùng. Vì vậy bạn nên chuẩn bị cải thiện sớm nhất có thể. Vào các bài viết sau mình sẽ trình bày chi tiết hơn về Core Web Vitals.

Testmysite và Pagespeed Insight: ưu tiên tối ưu tốc độ bằng cái gì?

Sơ lược về TestMySite và Pagespeed Insights

Pagespeed Insights là gì?

Pagespeed Insights là công cụ đo lường tốc độ tải trang pagespeed của một site sử dụng dữ liệu thực tế của người dùng trên Chrome kết hợp dữ liệu từ Lab (công cụ kiểm tra như Lighthouse). Từ kết quả đo lường, Pagespeed Insights sẽ đưa ra các chẩn đoán và khuyến nghị giúp tối ưu tốc độ tải trang/pagespeed.

Nhìn vào bảng biểu trên thì dễ dàng nhận ra Largest Contentful Paint (LCP) và Total Blocking Time là 2 tiêu chí có trọng số cao nhất. Đó cũng chính là tiêu chí nên tập trung giải quyết, sẽ được đề cập chi tiết trong các bài viết sau. Pagespeed Insights sử dụng Lighthouse để kiểm tra, nên bạn chỉ cần sử dụng Lighthouse và làm theo các khuyến nghị tối ưu tốc độ là được. Kết quả điểm số ở Lighthouse sẽ có chênh lệch so với Pagespeed Insights, cũng như chính bản thân Pagespeed Insights qua các lần kiểm tra khác nhau. Lý do là tốc độ kết nối vào máy chủ trang web tuỳ thuộc vị trí địa lý mà bị ảnh hưởng, A/B Test hoặc quảng cáo trên trang.

Testmysite là gì?

TestMySite là công cụ đo lường tốc độ tải trang thực tế trên điện thoại di động, đo lường chính ở tốc độ 4G hoặc 3G cho các nước chưa phổ biến 4G, hoặc đối tượng sử dụng trang web đó chỉ sử dụng mạng 3G. TestMySite cung cấp báo cáo dành riêng cho người làm tiếp thị (marketing) hoặc lập trình viên là khác nhau. Với mục đích cho người đọc báo cáo dễ hiểu, chứ các nguyên tắc cơ bản chủ yếu thì vẫn như phần trên mình đã trình bày.

Ngoài thông số tốc độ tải trang cho toàn site (thống kê theo tháng), TestMySite có 3 chức năng chủ yếu như sau:

• Cho phép kiểm tra tốc độ tải trang ở kết nối 4G từng đường dẫn URL riêng biệt, tối đa 10 đường dẫn
• So sánh số liệu với trang web đối thủ
• Cung cấp số liệu tính toán ROI

Nên ưu tiên Testmysitehay Pagespeed Insights?

Về cơ bản thì 2 công cụ này cùng phản ánh kết quả của pagespeed. Mặc dù thông số có khác nhau, nhưng mình đánh giá TestMySite tốt hơn ở góc độ thống kê hàng tháng theo thời gian (giây). Bạn sẽ biết được site của mình trong tháng trước đó nhanh hơn hay chậm hơn. Còn Pagespeed Insights cũng có thống kê nhưng là có đạt chuẩn của “Core web vital” hay không.

Theo chiến lược “Mobile First” mà hầu hết mọi người đang hướng tới, thì TestMySite đánh đúng trọng tâm hơn. Còn Pagespeed Insights không có kết quả toàn site, nên cũng ít ý nghĩa hơn. Hơn nữa thì kết quả của Pagespeed Insights cũng trùng lắp với Lighthouse, nên nếu bạn đã cải thiện theo Lighthouse thì kết quả tối ưu tốc độ cũng sẽ được phản ánh tốt trên Pagespeed Insights. Và cũng phản ánh lên TestMySite.

Fullstack Station Tips

• Bóp băng thông: thông số 4G dùng để test của Google là 1,638.4 Kbps, với độ trễ là 150 ms. Vì vậy khi bạn test phiên bản mobile, phải dùng thông số này thì mới chính xác. Mặc dù tốc độ xử lý của CPU vẫn mạnh hơn nhiều so với Moto G4.
• Tốc độ của máy chủ, dung lượng từng tập tin và số lượng request là rất quan trọng. Thông số tối ưu là dưới 100ms cho trang (HTML) với dung lượng ~50kB, và ~35 requests cho toàn bộ hình ảnh, css, js. Mỗi tập tin đều dưới 50kB là lý tưởng, dưới 100kB là chấp nhận được.

• Đừng quá phụ thuộc vào bất kỳ 1 công cụ nào để đánh giá hiệu suất website. Luôn sử dụng các công cụ kiểm tra tốc độ khác nhau như Pingdom hay GTMetrix để kiếm tra chúng ta áp dụng có hiệu quả hay không.
• Điểm số tầm 75~ cho mobile và 85~ cho desktop là một kết quả khá tốt. Nếu bạn tập trung vào điểm số quá nhiều, chỉ để lên 90~ mà bỏ qua các cơ hội phát triển các chức năng khác cho dịch vụ thì không nên cho lắm. Nếu có nhiều nhân lực thì triển khai, không phải suy nghĩ.

Bài viết này đã sơ lược hầu hết các quy tắc cần thiết để tối ưu tốc độ tải trang pagespeed. Các bài viết sau mình sẽ trình bày chi tiết và các thủ thuật để cải thiện. Các bạn nhớ đăng ký theo dõi để xem bài mới sớm nhất nhé.

Comments