Để mang đến trải nghiệm tốt cho khách truy cập, việc liên tục hoàn thiện website là vô cùng cần thiết. PageSpeed Insights là một công cụ đánh giá chi tiết hiệu năng website. Vậy cụ thể PageSpeed Insights là gì & nó hoạt động thế nào?
Bài viết sau sẽ cung cấp cho bạn các kiến thức cốt lõi của PageSpeed Insights, hiểu cách hoạt động của hệ thống. Cùng với đó là hiểu biết về những thông số được đánh giá, đo lường.
Google PageSpeed Insights là gì?
PageSpeed Insights (PSI) là một trong các công cụ hỗ trợ SEO miễn phí, công cụ đo lường hiệu suất của một website trên cả thiết bị di động lẫn máy tính. Sau đó nó sẽ cung cấp các đề xuất để cải thiện trang đó. Nhờ vào danh tiếng của Google, PSI đang ngày càng trở nên phổ biến kể từ khi ra mắt vào năm 2013.
PageSpeed Insight là một công cụ do Google phát triển. Đây là công cụ được các cá nhân đến các chuyên gia đều sử dụng để kiểm tra và tối ưu hiệu suất web dựa trên những tiêu chí đánh giá từ Google. Khi sử dụng PSI các bạn có thể đo lường và các chỉ số báo cáo trên di động và máy tính. Ngoài ra, nó còn cung cấp những đề xuất thông qua các báo cáo UX chủa Chorome.
Kể từ năm 2018, PSI được cung cấp bởi Lighthouse. Do đó, kết quả trong các báo cáo PSI đều được dựa trên API Lighthouse. Khi tiến hành quét một trang, PageSpeed cung cấp hai loại dữ liệu về nó: Lab data và Field data.
Lab data
Được thu thập trong một môi trường được kiểm soát, gồm một tập hợp các thiết bị và thiết lập mạng được định trước. Lab data hiệu quả khi debug các vấn đề liên quan đến hiệu suất và test khả năng refactor. Tuy nhiên, nó không phải là một lựa chọn tốt để giải quyết các vấn đề nghẽn cổ chai.
Field data
Field data (hay Real User Monitoring – RUM) bao gồm performance data đến từ các lần tải trang thực. Kiểu dữ liệu này hiệu quả để ghi lại trải nghiệm thực từ người dùng. Tuy nhiên, bộ chỉ số cũng như khả năng debug còn tương đối hạn chế.
Tiêu chí đánh giá của Google PageSpeed Insight là gì?
PageSpeed Insight có những tiêu chí đánh giá tiêu chuẩn như:
- CSS và JavaScript phải được giải giải nén hoặc lược bỏ những tài nguyên không cần thiết trên trang.
- Nén dung lượng hình ảnh để giảm dung lượng tải trang trên trang web.
- Kích hoạt chức năng compress dữ liệu trước khi phản hồi về trình duyệt.
- Hạn chế redirect ở trang đích.
- Bỏ chế độ chặn CSS và JavaScript trước khi tải trang.
- Thời gian trả lời từ server nhanh….
PageSpeed cung cấp thông tin gì về trang?
Khi người dùng yêu cầu PageSpeed Insights phân tích một trang, nó sẽ trả về các phần và chỉ số khác nhau về hiệu suất của trang đó. Trình tự xuất hiện theo đó là:
Speed Score – Điểm tốc độ
Speed Score là điểm tốc độ và nó được tính dựa trên Lighthouse lab.
Field Data – Số liệu thực
Dựa trên trải nghiệm thực tế từ người dùng Chrome (trong 30 ngày). Nó bao gồm cả First Contenful Paint (FCP) và First Input Delay (FID).
Lab data – Dữ liệu Lab
Dựa trên phân tích từ Lighthouse trên thiết bị di động giả lập và mạng di động.
Opportunities – Đề xuất cải thiện trang
Bao gồm các đề xuất về chỉ số hiệu suất có thể cải thiện thời gian tải trang. Mỗi đề xuất bao gồm ước tính thời gian tải mà trang có thể tiết kiệm được khi triển khai đề xuất.
Diagnostics – Chẩn đoán
Cung cấp các gợi ý về những phương pháp tốt nhất để phát triển web nên được thêm vào trang.
Passed audits – Đạt yêu cầu
Bao gồm tất cả các kiểm tra hiệu suất mà trang đã đã ứng mà không cần can thiệp.
Trong đó, một số tính năng ưu việt góp phần tạo nên sự nổi tiếng của PSI có thể kể đến như:
- Speed Score (0 – 100): đưa ra chỉ số tức thời, đánh giá hiệu năng của trang web.
- Sơ đồ màu (xanh, cam, đỏ) giúp dễ dàng xác định, ưu tiên các vấn đề ảnh hưởng đến hiệu năng của trang web.
- Các đề xuất cung cấp phản hồi trực tiếp về những gì bạn nên sửa chữa trên trang web để cải thiện hiệu suất.
Điểm PSI được tính như thế nào?
Như đã đề cập ở trên, kết quả PageSpeed được cung cấp bởi API Lighthouse. Trong đó, các điểm số về tốc độ trang cũng được phân tích bởi nó. Điều quan trọng nhất là Google Lighthouse mô phỏng page load trong một môi trường cụ thể. Có thể là mạng di động hay các thiết bị hạng trung.
Tài liệu của Google về tính năng cho điểm của Lighthouse rất chính xác. Từ đó, ta có thêm hiểu biết về cách tính điểm, đánh giá của PSI:
Lighthouse trả về điểm hiệu suất nằm từ 0 đến 100. Với 0 là điểm thấp nhất. Điểm 0 thường chỉ ra lỗi trong Lighthouse […] 100 là điểm cao nhất có thể đạt.
Google chỉ rõ rằng các mục trong phần Chỉ số của mục Lighthouse’s Performance mới đóng góp vào điểm số. Ngoài ra, các khuyến nghị xuất hiện trong Diagnostics và Opportunities không ảnh hưởng đến điểm số.
Trong Lighthouse 6 (ra mắt vào tháng 5/2020), điểm số được đánh giá theo 6 tiêu chí:
- First Contenful Paint (FCP).
- Thời gian tương tác.
- Speed Index.
- Largest Contenful Paint (LCP).
- Total Blocking Time (TBT).
- Cumulative Layout Shift (CLS).
So với phiên bản số 5, Lighthouse 6 đã loại bỏ hai tiêu chí First Meaningful Paint và First CPU Idle. Thay vào đó là hai mục LCP, Total Blocking Time và CLS.
Dựa vào thang điểm được đưa ra, kết quả sẽ được hiển thị theo bảng màu như sau:
- 0 – 49 (chậm): Màu đỏ.
- 50 – 89 (trung bình): Màu cam.
- 90 – 100 (nhanh): Màu xanh.
Điểm số tốt cho PageSpeed Insights là gì?
Hiện nay, không khó để tìm thấy các bài viết về mẹo đạt 100/100 điểm trên Google PageSpeed. Tuy nhiên, sau khi hiểu về cách chấm điểm, có thể thấy việc đạt số điểm tuyệt đối là rất khó. Hơn nữa, tính năng ưu tiên lập chỉ mục trên thiết bị dị động cũng làm việc này khó khăn hơn.
Ngoài ra, mặc dù đạt điểm số “xanh rờn” trên PSI phần nào thỏa mãn người sử dụng. Nhưng liệu điểm số có thật sự ý nghĩa như vậy đối với website?
Hiện nay có khá nhiều mẹo để đạt được điểm số tốt trên PSI. Bạn có thể áp dụng các kỹ thuật tối ưu hóa như delay các file JS không quan trọng hoặc các CSS không dùng đến …
Nhưng liệu như vậy có đủ?
Chỉ số thực sự cho chất lượng trang web
Thực tế, chỉ số quan trọng nhất lại là thời gian tải trang. Thời gian tải trang càng thấp, điểm tổng thể PSI càng tăng.
Mối liên hệ giữa SEO và PageSpeed Insights là gì?
Điểm PSI mà trang đạt được sẽ không ảnh hưởng đến xếp hạng của Google. Bởi vì điểm số đó không phải là chỉ số duy nhất cho việc đánh giá điểm SEO. Vì vậy, không có mối tương quan trực tiếp giữa điểm số của trang web với vị trí mà nó đạt được trong SERP.
Tuy nhiên, điểm PSI là kết quả của phân tích hiệu suất tổng thể trên các chỉ số cụ thể. Với số điểm tốt, bạn có thể cho rằng trang web của mình đang ở một trạng thái tốt. Điểm số tốt là một chỉ số giúp trang web của bạn có vị trí tốt hơn trong mắt Google. Mặc dù nó sẽ không đảm bảo chiến thắng trong cuộc đua đến đỉnh của SERP.
Hơn nữa, hệ thống tính điểm của Lighthouse thúc đẩy bạn tăng tốc độ trang web. Đồng thời cải thiện trải nghiệm của người dùng, từ đó giúp trang web của bạn dễ dàng “lọt vào mắt xanh” của Google hơn.
Tóm lại, bạn nên nỗ lực tập trung vào việc đảm bảo trang web của mình tải nhanh nhất có thể. Tốc độ trang mới chính là yếu tố xếp hạng thực sự, không phải điểm số!
8 cách tối ưu PageSpeed Insights
1. Tránh chuyển hướng trang đích nhiều lần
Nếu trang của bạn không được thiết kế phù hợp, kết quả có thể là một số chuyển hướng đến các trang được tối ưu hóa cho các thiết bị khác nhau. Một số mẫu chuyển hướng phổ biến, theo Google:
- example.com sử dụng thiết kế web đáp ứng, không cần chuyển hướng – nhanh chóng và tối ưu.
- example.com → m.example.com/home – hình phạt nhiều lần cho người dùng di động.
- example.com → www.example.com → m.example.com – trải nghiệm trên thiết bị di động rất chậm.
Mỗi khi người dùng phải được chuyển hướng, quá trình hiển thị trang sẽ dừng lại – điều này làm tăng thêm vài giây vào tổng thời gian tải trang của bạn.
Tránh hoàn toàn các chuyển hướng bằng cách xây dựng trang của bạn với thiết kế phù hợp – một phương pháp đảm bảo trải nghiệm người dùng chất lượng cho dù khách hàng tiềm năng của bạn đang sử dụng thiết bị nào.
2. Sử dụng tính năng nén
Các trình duyệt ngày nay có khả năng cung cấp phiên bản thay thế nhỏ hơn của một trang cho người dùng internet. Với trình nén gzip được bật, những trang đó có thể thu nhỏ kích thước 90%.
Thay vì cung cấp toàn bộ trang cho người dùng, trình duyệt có thể tìm nạp phiên bản nén nhỏ hơn theo cấp số nhân, tải trong một phần nhỏ thời gian.
3. Giảm thiểu CSS, HTML, JavaScript
“Minifying” đề cập đến việc loại bỏ dữ liệu không cần thiết hoặc dư thừa mà không ảnh hưởng đến cách trình duyệt xử lý trang. Mã hóa kém có thể là nguyên nhân của vấn đề này và nó có thể được khắc phục theo một số cách khác nhau.
Ngoài việc khảo sát mã nguồn trang của bạn theo cách thủ công, Google khuyên bạn nên thử các tài nguyên sau:
- HTML minifier để rút gọn HTML.
- CSSNano và csso để rút gọn CSS.
- UglifyJS2 và Closure Compiler để rút gọn JavaScript.
Tất nhiên, một tùy chọn khác là tận dụng Google AMP. AMP là viết tắt của Accelerated Mobile Pages – một dự án do Google thực hiện để giúp các trang trên thiết bị di động tải nhanh hơn.
Nó hoạt động bằng cách tạo ra một định dạng mã nguồn mở loại bỏ hàng tấn nội dung không cần thiết, làm cho các trang trên thiết bị di động của bạn tải gần như ngay lập tức. AMP mang đến cho người dùng trải nghiệm hợp lý hơn trên thiết bị di động.
4. Ưu tiên nội dung trong màn hình đầu tiên
Thời gian tải trang không chỉ nói về tốc độ tải trang của bạn. Đó cũng đề cập đến “hiệu suất được cảm nhận”.
Hiệu suất cảm nhận có thể được mô tả đơn giản là “trang web của bạn cảm thấy nhanh như thế nào khi tải?” Điều này có thể hơi khác so với tốc độ tải trang web của bạn thực sự. Hiệu suất cảm nhận là tất cả từ quan điểm của người dùng, không phải từ một công cụ kiểm tra tốc độ trang web.
Brian Jackson từ KeyCDN
Để tăng hiệu suất cảm nhận, điều quan trọng là phải ưu tiên tải nội dung quan trọng đối với người dùng. Nếu các phần tử cuối cùng trên trang của bạn được tải là những phần tử mà người dùng đã click through để xem, thì trang sẽ có cảm giác như nó tải lâu hơn.
5. Tăng tốc thời gian phản hồi của máy chủ
Thời gian phản hồi của máy chủ là thời gian cần thiết để máy chủ của bạn bắt đầu tải nội dung của trang cho người dùng. Một số yếu tố theo Google nhận định có thể làm chậm thời gian phản hồi:
- Truy vấn cơ sở dữ liệu.
- Slow routing.
- Frameworks.
- Libraries.
- Tài nguyên CPU cạn kiệt.
- Cạn bộ nhớ.
6. Loại bỏ JavaScript chặn hiển thị
Khi bạn thấy thông báo lỗi có nội dung “loại bỏ JavaScript chặn hiển thị”, điều đó có nghĩa là có một đoạn mã JavaScript đang tạm dừng quá trình tải cho phần trong màn hình đầu tiên của trang. Đặc biệt, các tập lệnh của bên thứ ba có khả năng gây ra vấn đề này.
Tham khảo ngay bài viết sau đây để loại bỏ những tài nguyên chặn hiển thị gây ảnh hưởng đến website của bạn: 9 cách loại bỏ các tài nguyên chặn hiển thị hiệu quả nhất.
7. Tận dụng bộ nhớ đệm của trình duyệt
Bộ nhớ đệm của trình duyệt hoạt động bằng cách “ghi nhớ” các tài nguyên đã tải trước đó để không phải tải lại chúng sau mỗi lần truy cập. Khi khách truy cập trang web đi đến một trang mới trên trang web của bạn, tất cả dữ liệu của bạn, như logo và footer, sẽ không cần tải lại.
Điều đó sẽ dẫn đến sự gia tăng về tốc độ khi mọi người truy cập vào trang web của bạn. Google đề xuất chính sách lưu vào bộ nhớ đệm tối thiểu là một tuần và đối với các yếu tố hầu như không thay đổi, thì tốt hơn là một năm.
8. Tối ưu hóa hình ảnh
Nguyên nhân lớn nhất của việc trang chậm và điểm thấp là do hình ảnh lớn. Một trong những kỹ thuật tối ưu hóa hàng đầu để sửa kích thước hình ảnh là nén. Bạn có thể tiết kiệm trung bình 50% hoặc hơn trên kích thước hình ảnh bằng cách sử dụng các công cụ nén đơn giản.
Nếu bạn sử dụng WordPress, một trong những cách tốt nhất để làm điều này mà không tốn nhiều thời gian là sử dụng một plugin, như WP Smush Image. Đồng thời, WP Smush cũng chính là plugin nằm trong bộ quà tặng trị giá đến 26.000.000 VND/Năm của Vietnix dành cho tất cả khách hàng đăng ký thuê VPS, Hosting.
Phía trên là tổng hợp thông tin về PageSpeed Insights (PSI) và những cách tối ưu PageSpeed Insights thông dụng, mang lại hiệu quả về mặt tốc độ cho trang web. Cảm ơn các bạn đã theo dõi blog của Vietnix!
