Google PageSpeed Insights cập nhật giao diện mới 2018

Google PageSpeed Insights cập nhật giao diện mới 2018

Google PageSpeed Insights cập nhật giao diện và các thuật toán mới (bao gồm 22 tiêu chí đánh giá).

Nếu các bạn chưa biết thì vào cuối giờ chiều ngày hôm qua (12/11/2018), Google đã tiến hành một đợt cập nhật lớn dành cho Google PageSpeed Insights (GPI). Theo đó, cả giao diện lẫn các tiêu chí đánh giá tốc độ website của công cụ này đã hoàn toàn thay đổi. Nói chính xác hơn, nó là một phần của công cụ Google Lighthouse mà tôi đã từng có bài viết giới thiệu trước đó. Với lần cập nhật này, Google PageSpeed Insights đã trở thành công cụ đánh giá tốc độ website hoàn thiện nhất hiện nay, khiến cho những người trước đây cho rằng GPI không đán tin, không chính xác… phải suy nghĩ lại.

Google PageSpeed Insights là một phần của Google Lighthouse? Điều này đúng nhưng chưa đủ.

Về cơ bản, Google PageSpeed Insights mới có các tiêu chí đánh giá giống với Google Lighthouse. Chính Google cũng đã ghi chú rõ là “The pagespeed score is based on the lab analyzed by Lighthouse” (phần Lab Data, Opportunities, Diagnostics và Passed audits trong GPI tương ứng với phần Performance trong Lighthouse).

Tuy nhiên, điểm khác biệt ở đây là: GPI cung cấp thêm cả tốc độ load trung bình của website dựa theo thống kê thực tế từ trình duyệt Google Chrome (phần Field Data). GPI đánh giá trên cả mobile và desktop chứ không chỉ riêng mobile như Google Lighthouse. Bạn có thể nhìn thấy rõ điều đó trong ví dụ bên dưới: Kết quả test tốc độ trên mobile:

• Kết quả test tốc độ trên desktop:

Ý nghĩa của các thông số trong Field Data và Lab Data

• First Contentful Paint: đánh dấu thời gian mà văn bản hoặc hình ảnh đầu tiên được hiển thị.
• First Meaningful Paint: đo lường khoảng thời gian nội dung chính của trang được hiển thị.
• Speed Index: cho biết tốc độ hiển thị nội dung của trang một cách rõ ràng.
• First CPU Idle: đánh dấu thời điểm đầu tiên mà nội dung của trang đủ yên tĩnh để xử lý đầu vào (nhập dữ liệu).
• Time to Interactive: đánh dấu thời gian mà tại đó trang có sự tương tác đầy đủ.
• Estimated Input Latency: ước tính thời gian mà ứng dụng (website) của bạn sẽ phản hồi lại thao tác của người dùng, tính bằng mili giây, trong thời gian 5 giây tải xuống nhiều dữ liệu nhất. Nếu độ trễ của bạn cao hơn 50 mili giây, người dùng có thể nhận thấy ứng dụng của bạn bị giật lag (trễ).
• First Input Delay: đo thời gian từ khi người dùng tương tác lần đầu với website của bạn (click vào liên kết, click vào nút hoặc sử dụng tiện ích điều khiển được hỗ trợ bởi JavaScript) đến khi trình duyệt thực sự có thể để phản hồi tương tác đó.

Các tiêu chí chấm điểm tối ưu của Google PageSpeed Insights

1. Reduce server response times (TTFB): xác định thời gian máy chủ của bạn gửi phản hồi.
2. User Timing marks and measures: cân nhắc việc thiết kế ứng dụng của bạn với User Timing API để đo lường hiệu suất trong thực tế của người dùng.
3. Minimize Critical Requests Depth: cho bạn thấy những tài nguyên nào được tải với mức độ ưu tiên cao. Cân nhắc giảm độ dài của chuỗi, giảm kích thước tải xuống của tài nguyên hoặc trì hoãn việc tải xuống các tài nguyên không cần thiết để cải thiện thời gian tải trang.
4. Eliminate render-blocking resources: loại bỏ các tài nguyên như CSS, JS, Web Fonts… chặn hiển thị nội dung.
5. Properly size images: sử dụng hình ảnh có kích thước phù hợp để tiết kiệm dữ liệu di động và cải thiện thời gian tải.
6. Defer offscreen images: cân nhắc việc tắt màn hình chờ và hình ảnh ẩn sau khi tất cả các tài nguyên quan trọng đã tải xong để giảm thời gian tương tác.
7. Minify CSS: nén và giảm dung lượng file CSS.
8. Minify JavaScript: nén và giảm dung lượng file JS.
9. Defer unused CSS: trì hoãn việc tải các file CSS không thực sự cần thiết.
10. Efficiently encode images: nén và tối ưu hóa hình ảnh một cách hiệu quả.
11. Serve images in next-gen formats: sử dụng các định dạng hình ảnh như JPEG 2000, JPEG XR và WebP thường có khả năng nén tốt hơn PNG hoặc JPEG, giúp tải xuống nhanh hơn và tiêu thụ ít dữ liệu di động hơn.
12. Enable text compression: tài nguyên dựa trên văn bản phải được truyền tải bằng kỹ thuật nén dữ liệu (gzip, deflate hoặc brotli) để giảm thiểu dung lượng.
13. Preconnect to required origins: sử dụng kỹ thuật preconnect và dns-prefetch để thiết lập kết nối ban đầu cho các tài nguyên quan trọng của bên thứ 3 (tài nguyên tải từ server bên ngoài).
14. Avoid multiple page redirects: tránh các chuyển hướng sẽ tạo ra sự chậm trễ không nên có trước khi trang có thể được tải.
15. Preload key requests: sử dụng để ưu tiên tìm nạp tài nguyên hiện sẽ được sử dụng sau này, trong khi tải trang.
16. Use video formats for animated content: ảnh GIF với dung lượng lớn không hiệu quả trong việc phân phối nội dung động. Cân nhắc sử dụng video MPEG4/ WebM cho hình ảnh động và PNG/ WebP cho hình ảnh tĩnh (thay vì dùng GIF) để tiết kiệm dữ liệu di động.
17. Avoids enormous network payloads: giảm page-size để tiết kiệm dữ liệu di động và giảm thời gian tải trang.
18. Uses efficient cache policy on static assets: thiết lập thời gian cache dữ liệu dài có thể tăng tốc độ truy cập lặp lại vào website của bạn.
19. Avoids an excessive DOM size: các kỹ sư trình duyệt đề xuất trang web nên chứa ít hơn 1.500 DOM nodes. Điểm tối ưu là tree depth dưới 32 phần tử và ít hơn 60 phần tử con/ mẹ. Một DOM lớn có thể tăng mức sử dụng bộ nhớ, gây ra các phép tính style dài hơn và tạo ra các bản vẽ bố cục tốn kém.
20. JavaScript execution time: giảm thời gian phân tích cú pháp, biên dịch và thực thi JS. Bạn có thể thấy việc cung cấp các file JS với tải trọng nhỏ hơn sẽ giúp ích cho điều này.
21. Minimizes main-thread work: giảm thời gian phân tích cú pháp, biên dịch và thực thi JS. Bạn có thể thấy việc cung cấp các file JS với tải trọng nhỏ hơn sẽ giúp ích cho điều này.
22. All text remains visible during webfont loads: Tận dụng tính năng font-display CSS để đảm bảo văn bản hiển thị với người dùng trong khi webfont đang tải.