Đọc, hiểu đúng báo cáo của Google PageSpeed Insights

Thứ ba - 04/06/2019 12:47
In ra
Đóng cửa sổ này

PageSpeed Insights là công cụ của Google dành cho các nhà phát triển web giúp phân tích nội dung của trang web, sau đó tạo đề xuất nhằm giúp trang đó hoạt động nhanh hơn. Tuy nhiên đọc và hiểu các báo cáo này như thế nào? Ứng dụng đến đâu... lại là chuyện mà chúng ta phải bàn!

URL công cụ: https://developers.google.com/speed/pagespeed/insights/

PageSpeed Insights (PSI) báo cáo về hiệu suất của một trang web trên cả thiết bị di động và máy tính để bàn và cung cấp các đề xuất cải thiện hiệu suất cho người phát triển web.

PSI cung cấp cả dữ liệu thử nghiệm và dữ liệu thực tế của một website. Dữ liệu phòng thí nghiệm phù hợp cho việc để gỡ lỗi các vấn đề về hiệu năng, vì nó được thu thập trong một môi trường được kiểm soát. Tuy nhiên, nó có thể không nắm bắt được các nút "nghẽn cổ chai" trong thực tế (điều mà thường xuyên xảy ra ở Việt Nam, nhất là khi cáp quang biển bị sự cố). Dữ liệu thực tế hữu ích hơn vì nó ghi lại trải nghiệm người dùng thực, trong thế giới thực - nhưng có bộ số liệu hạn chế hơn. Bạn có thể xem tài liệu Hiểu thế nào về các Công cụ giúp đo lường và cải thiện tốc độ web (bản tiếng Anh) để biết thêm thông tin về 2 loại dữ liệu này.

Điểm hiệu suất

Ở đầu báo cáo, PageSpeed Insights cung cấp điểm số tóm tắt hiệu suất của trang. Điểm này được xác định bằng cách chạy Lighthouse để thu thập và phân tích dữ liệu phòng thí nghiệm về trang. Điểm từ 90 trở lên được coi là nhanh và 50 đến 90 được coi là trung bình. Dưới 50 được coi là chậm.

Pgge Speed insights - NukeViet.vn page 1

Điểm đánh giá website NukeViet.vn - phiên bản Desktop

Điểm hiệu suất dựa vào dữ liệu thực tế & dữ liệu thử nghiệm, như ở trên Google không có báo cáo dữ liệu thực tế nên nó sẽ sử dụng hoàn toàn dữ liệu thử nghiệm.

Dữ liệu thử nghiệm

Phần này PageSpeed Insights sử dụng Lighthouse để phân tích trang web mà bạn khai báo, sau đó nó tạo ra điểm hiệu suất được tính toán dựa trên hiệu suất của trang, căn cứ vào các số liệu khác nhau, bao gồm: Sơn nội dung đầu tiên, Sơn có ý nghĩa đầu tiên, Chỉ số tốc độ, Thời gian chờ CPU đầu tiên, Thời gian tương tác và Độ trễ đầu vào ước tính (First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive và Estimated Input Latency)

Mỗi số liệu được ghi và dán nhãn bằng một biểu tượng:

Nhanh được chỉ định với một dấu kiểm màu xanh lá cây
Trung bình được biểu thị bằng vòng tròn thông tin màu cam
Chậm được chỉ định với một hình tam giác cảnh báo màu đỏ

Pgge Speed insights - NukeViet.vn page 2

Pgge Speed insights - NukeViet.vn page 3

Báo cáo chi tiết các vấn đề cần khắc phục cho website NukeViet.vn - phiên bản Desktop

Tự kiểm tra bằng Lighthouse trên trình duyệt

Lighthouse hiện tại đã tích hợp trong bảng Audits của Chrome DevTools. Để tạo ra báo cáo này bạn có thể:

Cài đặt trình duyệt Google Chrome lên máy tính của bạn.
Trong trình duyệt Google Chrome, truy cập trang web cần kiểm tra.
Mở Chrome DevTools bằng cách nhấn CTRL+SHIF+I hoặc click chuột phải, chọn inspect.
Click vào bảng Audits trên cửa sổ inspect.
Click Perform an audit. DevTools sẽ hiển thị ra danh mục các thứ bạn cần phân tích. Hãy chọn toàn bộ.
Click Run audit. Sau 60 đến 90 giây, Lighthouse sẽ cho bạn báo cáo về trang.

Lighthouse tách Audits của nó thành ba phần:

Opportunities - Cơ hội cung cấp đề xuất cách cải thiện số liệu hiệu suất của trang. Mỗi đề xuất trong phần này ước tính trang sẽ tải nhanh hơn bao nhiêu nếu cải tiến được thực hiện.
Diagnostics - Chẩn đoán cung cấp thông tin bổ sung về cách một trang tuân thủ các thực tiễn tốt nhất để phát triển web.
Passed Audits - Vượt qua kiểm tra cho biết website đã vượt qua các cuộc kiểm tra.

Kết quả kiểm tra trang NukeViet.vn bởi Lighthouse

Lưu ý rằng kết quả kiểm tra Lighthouse của bạn không phải là kết quả kiểm tra thử nghiệm Lighthouse của Google cho nên cho dù bạn có tối ưu hết trên máy của bạn thì nó cũng chỉ là dữ liệu thử nghiệm đối với máy bạn. Nó không thay đổi hoàn toàn kết quả kiểm tra và điểm số của PageSpeed Insights. Lý do là vì bạn chỉ có thể tối ưu được 2 yếu tố:
- Mã nguồn website (page-size, HTML, CSS, JS, webfont, hình ảnh, công nghệ cache dữ liệu…).
- Tốc độ hosting/ hiệu năng máy chủ.

Trong khi đó tốc độ website ngoài mã nguồn và hosting thì còn phụ thuộc các yếu tố sau:
- Đường truyền internet từ hosting/server tới server test của Google. Vì server Google đặt ở ngoài lãnh thổ Việt Nam nên các server/ hosting trong nước sẽ gặp bất lợi vì hiện tượng "nghẽn cổ chai" (khi truy cập từ trong nước ra quốc tế và ngược lại). Điều này ảnh hưởng lớn đến tốc độ phản hồi của site.
- Khoảng cách địa lý từ hosting/server tới server test của Google. Khoảng cách càng xa, thời gian càng trễ thì điểm số càng thấp.

Chính vì PageSpeed Insights không chỉ đánh giá mã nguồn website mà tập trung đánh giá tổng thể để nâng cao trải nghiệm người dùng cho nên việc cải thiện 100% điểm số của PageSpeed Insights là điều không thể. Chưa kể do công nghệ xử lý và vận hành website của CMS mà việc "làm đẹp điểm số" trước đây chưa chắc đã nâng cao trải nghiệm người dùng. Vì thế các nhà phát triển cần hiểu rõ bản chất của từng con số báo cáo mà PageSpeed Insights cung cấp, chọn cải thiện điểm nào phải căn cứ hiểu biết về các vấn đề có liên quan để tránh mất công mất sức mà không đem lại giá trị nào cho người dùng.

Nếu chỉ để kiểm tra sự thân thiện của website với thiết bị di động một cách đơn giản, bạn có thể sử dụng công cụ là Mobile Friendly. Địa chỉ truy cập như sau: https://search.google.com/test/mobile-friendly