Google Pagespeed Insights: Tính năng – cách dùng

Mặc dù chưa phải là yếu tố chủ chốt để đảm bảo được vị trí tốt mà Website đạt được trong SERPs (SERP là viết tắt của Search Engine Results Pages nghĩa là Trang kết quả của công cụ tìm kiếm), nhưng chắc chắn một trang web với tốc độ tải càng nhanh thì không phải chỉ có mỗi mình bạn thích thôi đâu, mà cả ông kẹ Google cũng rất thích luôn đấy. Đó là lý do chúng ta cùng tìm hiểu tính và hướng dẫn cho Google Pagespeed Insights này nhé.

SERPs của Google là kết quả trả về của công cụ tìm kiếm Google khi người dùng truy vấn. Nói dễ hiểu, khi bạn search một cụm từ bất kỳ trên google, các kết quả được hiển thị ngay sau đó chính là SERP. Nên nếu muốn có một SERP tốt cho site của mình thì bạn cũng nên cố gắng cải thiện tốc độ tải trang cho website nhé.

Cùng Type tìm hiểu Google Pagespeed Insights là gì?

Google Pagespeed Insights (GPI) là công cụ miễn phí do Google phát triển và được sử dụng phổ biến trên thế giới khi hỗ trợ kiểm tra hiệu suất của trang web và website. Google Pagespeed Insights tập trung đánh giá các chỉ số về tốc độ tải và trải nghiệm người dùng trên đa dạng các thiết bị máy tính, điện thoại di động, sau đó cung cấp các đề xuất cải thiện trang đó.

Các chuyên gia đánh giá cao GPI bởi những ưu điểm như dễ sử dụng, hoàn toàn miễn phí, khắc phục sự cố làm chậm và cải thiện tốc độ trang web, tối ưu hóa hiệu suất, tính thân thiện. Từ những đề xuất này mà các Website trở nên nhẹ và nhanh hơn, nâng cao chất lượng và trải nghiệm cho người dùng.

Các tính năng chính trong Google Pagespeed Insights

Khi bạn yêu cầu Google 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 đó. Các loại thông tin cung cấp liên quan đến website theo trình tự xuất hiện sau đây:

1. Speed Score – Điểm tốc độ: Điểm số tốc độ này dựa trên Lab Data Lighthouse
2. File Data – Trường dữ liệu: Tính năng thu thập thông tin dựa trên trải nghiệm thực tế của người dùng trên Chorme trong thời gian 30 ngày.
3. Origin Summary: dữ liệu liên quan đến báo cáo các chỉ số thiết yếu về trang – Core web vital (FCP, FID, LCP, CLS) được tổng hợp trong vòng 28 ngày.
4. Lab Data – Dữ liệu phòng thí nghiệm: Các chỉ số được tính toán và phân tích từ Lighthouse trên thiết bị di động và mạng di động. 
5. Opportunities: Thu thập các thông tin về thời gian và hiệu suất load trang, sau đó đưa ra các đề xuất về các chỉ số hiệu suất có thể giúp thời gian tải trang được nhanh hơn. Mỗi đề xuất bao gồm ước tính thời gian tải mà trang có thể tiết kiệm được nếu các đề xuất được triển khai.
6. Diagnostics: Phần Chẩn đoán cung cấp các đề xuất về những phương pháp hay nhất để phát triển web mà quản trị viên nên tham khảo để bổ sung vào trang.
7. Passed audits: Nhà phát triển website sẽ thấy được một bảng tổng hợp các hiệu suất mà website đạt được, không cần phải chỉnh sửa

Theo đó, phần Opportunities (cơ hội)được đánh giá là hữu ích nhất trong báo cáo bởi nó cung cấp các giải pháp nhằm cải thiện thời gian giúp trang tải nhanh hơn. Ngoài ra, các nhà phát triển web nên tập trung và ba yếu tố gồm: Speed Score (từ 0-100đ), Color scheme và Recommendation.

Cách hoạt động của Google PageSpeed Insights

Cách hoạt động của Google PageSpeed Insights về cơ bản sẽ tiến hành thực hiện hai việc gồm phân tích thời gian tải và các nguồn tài nguyên, đồng thời so sánh dữ liệu đó với mức trung bình của tất cả các trang được phân tích. Tiếp theo, PageSpeed Insights sẽ đưa ra báo cáo cho người dùng và cuối cùng là điểm số.

Mục đích của việc kiểm tra điểm số website có nghĩa là bạn sẽ dựa vào đó để tìm ra các vấn để mà trang đang gặp phải, cải thiện chúng để nâng cao trải nghiệm cho người dùng. Các điểm số này không phải được xuất ngẫu nhiên mà sẽ có quy chuẩn riêng nhất định bởi các thuật toán của Google.

Do Pagespeed Insights được Lighthouse cung cấp kể từ cuối năm 2018. Vì thế, kết quả trong báo cáo điểm số của GPI sẽ dựa vào API Lighthouse.

Điểm số bị ảnh hưởng bởi sáu chỉ số trong mục Performance, phần Metrics của Lighthouse, tham khảo mục dưới đây để hiểu rõ hơn:

1. First Contentful Paint (FCP) 15%
2. Largest Contentful Paint (LCP) 25%
3. Speed Index (SI) 15%
4. Time to Interactive (TTI) 15%
5. Total Blocking Time (TBT) 25%
6. Cumulative Layoute Shift (CLS) 5%

Lưu ý: Các trọng số này dựa theo phiên bản Lighthouse 6 (phát hành 05/2020) nên sẽ có những sự thay đổi trong các phiên bản sau đó. Ngoài ra, hiệu suất có thể thay đổi mỗi khi nhà phát triển trang chạy thử nghiệm do sự thay đổi sẵn có từ công nghệ web và mạng mặc dù mã không thay đổi.

So với phiên bản Lighthouse 5 trước đó, Lighthouse 6 đã loại bỏ First Meaningful Paint và First CPU Idle và thay thế bằng Largest Contentful Paint (LCP), Total Blocking Time (TBT) và Cumulative Layout Shift (CLS).

Danh mục tổng hợp điểm hiệu suất được chia tỷ lệ theo dưới đây:

1. Điểm 90 – 100: Tốt (màu xanh lá)
2. Điểm 50 – 89: Cần cải thiện (màu cam)
3. Điểm 1 – 49: Kém (màu đỏ)

Stack Overflow là kênh được Google đề xuất cho những nhà phát triển web giải quyết các vấn đề mà họ cảm thấy khó hiểu với điểm số được chấm cho website

Cách thức sử dụng báo cáo Google Pagespeed Insights thế nào?

Pagespeed Insights khá đơn giản và dễ sử dụng, tương tự với Lighthouse.

Đầu tiên, bạn hãy truy cập trang Google Pagespeed Insights, tiếp theo là nhập URL website của bạn. Chọn phân tích, sau đó chờ vài giây để công cụ hiển thị bảng báo cáo điểm hiệu suất tổng thể và bảng phân tích các danh mục khác nhau. Bạn sẽ thấy một số đề xuất từ Google để cải thiện hiệu suất, hãy tiến hành sửa chữa các lỗi cần khắc phục để cải thiện website.

Mẹo tối ưu hiệu suất website trong Pagespeed Insights

Mọi nỗ lực đều hướng đến việc tối ưu hiệu suất website. Type chia sẻ một số giải pháp cải thiện hiệu suất trang web của bạn với các đề xuất của Google PageSpeed

1. Hạn chế sử dụng mã HTML
2. Giảm thời gian thực thi JavaScirpt
3. Giảm tài nguyên cho website (sử dụng tên cho biến và các hàm ngắn hơn)
4. Giảm thời gian phản hồi của máy chủ (TTFB)
5. Lựa chọn kích thước hình ảnh phù hợp
6. Sử dụng định dạng video cho nội dung hoạt hình
7. Tránh chuyển hướng nhiều trang, đồng thời chú trọng chuyển hướng sạch
8. Giảm thời gian phản hồi của service chính
9. Tránh kích thước DOM quá mức
10. Giảm tác động của mã bên thứ ba
11. Định dạng GZIP với việc bật tính năng nén và các tệp CSS, JavaScript và HTML
12. AMP (Accelerated mobile page) cung cấp trải nghiệm di động với tốc độ tải trang nhanh hơn
13. Loại bỏ có tệp lệnh JavaScript và CSS ảnh hưởng đến tốc độ load trang của website
14. …

Tận dụng tốt và nâng cao lưu vào bộ nhớ đệm Cache trong trình duyệt web. Các plugin hỗ trợ tạo Cache miễn phí chẳng hạn: W3 Total Cache, WP Super Cache…

> Có thể bạn quan tâm: 27 cách tăng truy cập (traffic) website của bạn miễn phí năm 2022

Cách tối ưu hiệu suất cho website với Pagespeed Insights

Nếu muốn tối ưu hiệu suất website với PageSpeed Insights? Ngay chính trên các kết quả của PSI đã có những gợi ý giúp bạn cải thiện hiệu suất trang web của mình. Và những gợi ý sau đây được chúng tôi đúc kết lại sẽ giúp bạn làm điều đó.

1. Loại bỏ tài nguyên chặn kết xuất

Một trong những đề xuất phổ biến hơn từ Google PageSpeed Insights là Loại bỏ các tài nguyên chặn hiển thị. Điều này đề cập đến các tập lệnh JavaScript và CSS đang ngăn trang của bạn tải nhanh. Trình duyệt của khách truy cập phải tải xuống và xử lý các tệp này trước khi có thể hiển thị phần còn lại của trang, do đó, việc có nhiều tệp nằm trong màn hình đầu tiên có thể tác động tiêu cực đến tốc độ trang web của bạn.

Theo như Google có liên quan, có hai giải pháp bạn nên xem xét:

+ Nếu bạn không có nhiều JavaScript hoặc CSS, bạn có thể nội dòng chúng để loại bỏ cảnh báo này. Quá trình này đề cập đến việc kết hợp JavaScript và / hoặc CSS vào tệp HTML của bạn. Bạn có thể làm điều này với một plugin như Autoptimize. Tuy nhiên, điều này thực sự chỉ có giá trị đối với các trang web rất nhỏ.

+ Tùy chọn khác là hoãn lại JavaScript của bạn. Thuộc tính này tải xuống tệp JavaScript của bạn trong quá trình phân tích cú pháp HTML, nhưng chỉ thực thi nó sau khi quá trình phân tích cú pháp hoàn tất. Ngoài ra, các tập lệnh có thuộc tính này thực thi theo thứ tự xuất hiện trên trang.

Bạn sẽ tìm thấy danh sách các tài nguyên bị ảnh hưởng nhiều nhất bởi vấn đề này bên dưới đề xuất trong kết quả Tốc độ trang của bạn.

2. Tránh xâu chuỗi các yêu cầu quan trọng

Khái niệm về chuỗi các yêu cầu quan trọng liên quan đến Đường dẫn hiển thị quan trọng (CRP) và cách trình duyệt tải trang của bạn. Các phần tử nhất định – chẳng hạn như JavaScript và CSS mà chúng ta đã thảo luận ở trên – phải được tải hoàn chỉnh trước khi trang của bạn hiển thị.

Google PageSpeed Insights sẽ hiển thị cho bạn các chuỗi yêu cầu trên trang mà bạn đang phân tích. Nó cũng sẽ cho bạn biết kích thước của từng tài nguyên. Lý tưởng nhất là bạn muốn giảm thiểu số lượng yêu cầu phụ thuộc, cũng như kích thước của chúng.

Một số phương pháp để hoàn thành các mục tiêu này được đề cập trong các khuyến nghị khác được thảo luận trong bài đăng này, bao gồm:

• Loại bỏ tài nguyên chặn kết xuất
• Trì hoãn hình ảnh ngoài màn hình
• Giảm thiểu CSS và JavaScript

Ngoài ra, bạn có thể tối ưu hóa thứ tự tải nội dung để rút ngắn CRP. Điều này có nghĩa là chuyển nội dung trong màn hình đầu tiên lên đầu tệp HTML của bạn.

Điều quan trọng cần lưu ý là không có một số lượng kỳ diệu các chuỗi yêu cầu quan trọng mà bạn cần phải giải quyết. Google PageSpeed Insights không tính lần kiểm tra này là “đạt” hoặc “không thành công”, không giống như nhiều đề xuất khác của nó. Thông tin này được cung cấp đơn giản để giúp bạn cải thiện thời gian tải.

3. Giữ số lượng yêu cầu thấp và kích thước chuyển khoản nhỏ

Trình duyệt càng phải thực hiện nhiều yêu cầu để tải các trang của bạn và các tài nguyên mà máy chủ của bạn trả về để đáp ứng càng lớn thì thời gian tải trang web của bạn càng lâu. Do đó, rất hợp lý khi Google khuyên bạn nên giảm thiểu số lượng yêu cầu bắt buộc và giảm kích thước tài nguyên của bạn.

Không có số lượng yêu cầu lý tưởng hoặc kích thước tối đa cần lưu ý. Thay vào đó, Google khuyên bạn nên đặt các tiêu chuẩn đó cho chính mình bằng cách tạo ngân sách hiệu suất. Đây là một tập hợp các mục tiêu đã xác định có thể liên quan đến các khía cạnh như:

• Kích thước hình ảnh tối đa
• Số lượng phông chữ web được sử dụng
• Bạn gọi đến bao nhiêu tài nguyên bên ngoài
• Kích thước của tập lệnh và khuôn khổ

Tạo ngân sách hiệu suất cung cấp cho bạn một bộ tiêu chuẩn để bạn tự chịu trách nhiệm. Khi bạn vượt quá ngân sách của mình, bạn có thể đưa ra quyết định loại bỏ hay tối ưu hóa các nguồn lực để tuân thủ các nguyên tắc đã định trước của mình. Bạn có thể tìm hiểu thêm về cách tạo một tài khoản trong hướng dẫn riêng của Google.

4. Giảm thiểu CSS

Các tệp CSS thường lớn hơn mức cần thiết để giúp con người dễ đọc hơn. Chúng có thể bao gồm các ký tự xuống dòng và dấu cách khác nhau mà máy tính không cần thiết để hiểu nội dung của chúng.

Giảm thiểu CSS của bạn là quá trình cô đọng các tệp của bạn bằng cách loại bỏ các ký tự, khoảng trắng và trùng lặp không cần thiết. Google khuyến nghị phương pháp này vì nó làm giảm kích thước tệp CSS của bạn và do đó có thể cải thiện tốc độ tải:

5. Giảm thiểu JavaScript

Cũng giống như bạn có thể giảm kích thước tệp CSS thông qua thu nhỏ, điều tương tự cũng áp dụng cho các tệp JavaScript của bạn

6. Loại bỏ CSS không sử dụng

Bất kỳ mã nào trong biểu định kiểu của bạn là nội dung phải được tải để trang của bạn hiển thị với người dùng. Nếu có CSS trên trang web của bạn không thực sự hữu ích, điều đó sẽ làm giảm hiệu suất của bạn một cách không cần thiết.

Giải pháp ở đây về cơ bản giống như giải pháp để loại bỏ CSS chặn hiển thị. Bạn có thể nội dòng hoặc trì hoãn các kiểu theo bất kỳ cách nào phù hợp nhất cho các trang của mình. Bạn cũng có thể sử dụng một công cụ như Chrome DevTools để tìm CSS không sử dụng cần được tối ưu hóa.

7. Giảm thời gian thực thi JavaScript

Thực thi JavaScript thường là yếu tố đóng góp nổi bật nhất cho công việc của chuỗi chính. PageSpeed Insights có một đề xuất riêng để cảnh báo cho bạn nếu nhiệm vụ này có tác động đáng kể đến hiệu suất trang web của bạn:

Các phương pháp được đề xuất ở trên để giảm công việc của chuỗi chính cũng sẽ giải quyết cảnh báo này trong kết quả Tốc độ trang của bạn.

8. Giảm thời gian phản hồi của máy chủ (TTFB)

Time to First Byte (TTFB) là thước đo thời gian để trình duyệt nhận lại byte dữ liệu đầu tiên từ máy chủ trang web của bạn sau khi đưa ra yêu cầu. Mặc dù tốc độ này không giống với tốc độ trang web tổng thể của bạn, nhưng việc có TTFB thấp là điều dễ hiểu đối với hiệu suất trang web của bạn.

Do đó, giảm thời gian phản hồi của máy chủ nằm trong số các đề xuất của Google PageSpeed Insights. Nếu bạn có thể đạt được TTFB thấp, bạn sẽ thấy thông báo này trong Kiểm tra đạt yêu cầu:

Có một số yếu tố có thể ảnh hưởng đến TTFB của bạn. Một số chiến lược để hạ thấp nó bao gồm:

• Chọn nhà cung cấp dịch vụ lưu trữ web chất lượng cao (Dịch vụ Hosting)
• Sử dụng các chủ đề và plugin nhẹ
• Giảm số lượng plugin được cài đặt trên trang web của bạn
• Sử dụng Mạng Phân phối Nội dung (CDN)
• Triển khai bộ nhớ đệm của trình duyệt
• Chọn nhà cung cấp Hệ thống tên miền (DNS) vững chắc – Dịch vụ domain

9. Kích thước hình ảnh thích hợp

Các tệp phương tiện như hình ảnh có thể là lực cản thực sự đối với hiệu suất trang web của bạn. Định kích thước phù hợp cho chúng là một cách đơn giản để giảm thời gian tải của bạn:

Nếu trang của bạn bao gồm các hình ảnh lớn hơn mức cần thiết, CSS sẽ được sử dụng để thay đổi kích thước chúng một cách thích hợp. Quá trình này mất nhiều thời gian hơn là chỉ tải hình ảnh ở kích thước phù hợp ban đầu, do đó ảnh hưởng đến hiệu suất trang của bạn.

Để làm điều này, bạn có thể tải lên hình ảnh ở kích thước phù hợp hoặc sử dụng ‘hình ảnh đáp ứng’. Điều này liên quan đến việc tạo hình ảnh có kích thước khác nhau cho các thiết bị khác nhau.

Bạn có thể thực hiện việc này bằng cách sử dụng thuộc tính srcset, được thêm vào thẻ để chỉ định các tệp hình ảnh thay thế ở các kích thước khác nhau. Trình duyệt có thể đọc danh sách này, xác định tùy chọn nào tốt nhất cho màn hình hiện tại và cung cấp phiên bản hình ảnh đó của bạn.

10. Trì hoãn hình ảnh ngoài màn hình

Quá trình trì hoãn hình ảnh ngoài màn hình thường được gọi là “tải chậm”. Điều này có nghĩa là thay vì làm cho trình duyệt tải mọi hình ảnh trên một trang trước khi hiển thị nội dung trong màn hình đầu tiên, nó sẽ chỉ tải những hình ảnh hiển thị ngay lập tức.

Tải ít hơn trước khi trang hiển thị có nghĩa là hiệu suất tốt hơn, đó là lý do tại sao Google đề xuất phương pháp này:

11. Mã hóa hình ảnh hiệu quả

Như ở phần tối ưu hình ảnh, hình ảnh có tác động đáng kể đến hiệu suất trang web của bạn. Một trong những phương pháp hay nhất về tối ưu hóa cơ bản nhất mà bạn có thể muốn xem xét là nén, có thể giúp giảm kích thước tệp của bạn để chúng tải nhanh hơn. Đây cũng là phương pháp chính để thực hiện theo khuyến nghị của Google về Mã hóa hình ảnh hiệu quả:

Chìa khóa là đạt được kích thước tệp nhỏ nhất có thể mà không làm giảm chất lượng của chính hình ảnh. Các plugin như Imagify và Smush có thể giúp thực hiện nhiệm vụ này. Bạn có thể tìm hiểu thêm về chúng trong hướng dẫn tối ưu hóa hình ảnh của chúng tôi.

Các đề xuất khác ảnh hưởng đến việc bạn “đạt” hay “không đạt” trong quá trình kiểm tra Hình ảnh mã hóa hiệu quả bao gồm:

• Đăng hình ảnh ở kích thước chính xác
• Thực hiện tải chậm (trì hoãn hình ảnh ngoài màn hình)
• Chuyển đổi hình ảnh sang định dạng tệp thế hệ tiếp theo, chẳng hạn như WebP
• Sử dụng các định dạng video cho nội dung động, chẳng hạn như GIF

Ngoài việc nén hình ảnh của bạn, bạn có thể làm theo các bước để thực hiện các đề xuất này như được mô tả ở phần khác trong bài đăng này.

12. Sử dụng Định dạng Video cho Nội dung Hoạt hình

GIF có thể là một dạng nội dung trực quan hiệu quả trong nhiều trường hợp. Tất cả các hướng dẫn hướng dẫn, đánh giá tính năng và thậm chí cả hoạt ảnh hài hước đều có thể nâng cao bài đăng của bạn và làm cho chúng trở nên thú vị và có giá trị hơn đối với người đọc.

Thật không may, những lợi ích đó phải trả giá bằng hiệu suất của bạn. GIF đòi hỏi phải tải, đó là lý do tại sao PageSpeed Insights khuyên bạn nên phân phát nội dung video thay thế:

Thật không may, chuyển đổi GIF sang định dạng video không phải là quy trình đơn giản nhất. Trước tiên, bạn sẽ phải quyết định loại video bạn muốn sử dụng:

• MP4: Tạo tệp lớn hơn một chút, nhưng tương thích với hầu hết các trình duyệt chính.
• WebM: Định dạng video được tối ưu hóa cao nhất, mặc dù nó có khả năng tương thích với trình duyệt hạn chế.

Khi bạn đã đưa ra lựa chọn phù hợp nhất cho trang web của mình, bạn sẽ cần chuyển đổi các định dạng tệp.

13. Đảm bảo văn bản vẫn hiển thị trong khi tải Webfont

Giống như hình ảnh, phông chữ có xu hướng là các tệp lớn và mất nhiều thời gian để tải. Trong một số trường hợp, trình duyệt có thể ẩn văn bản của bạn cho đến khi phông chữ bạn đang sử dụng tải hoàn toàn, điều này sẽ dẫn đến đề xuất này từ Google PageSpeed Insights.

14. Tránh chuyển hướng nhiều trang

Chuyển hướng được sử dụng khi bạn muốn một URL trỏ đến URL khác. Họ thường được sử dụng khi bạn di chuyển hoặc xóa một trang trên trang web của mình. Mặc dù không có gì sai khi sử dụng chuyển hướng nói chung, nhưng chúng gây ra thêm sự chậm trễ trong thời gian tải.

Tóm cái váy lại

Trên đây là tất cả những kiến thức chung nhất về Google PageSpeed Insights bao gồm các nội dung liên quan đến việc giải thích về công cụ, cách thức hoạt động, những tính năng chính và đặc biệt là các mẹo để tối ưu GPI nhằm nâng cao hiệu suất trang cũng như trải nghiệm người dùng. LPTech hy vọng các nhà phát triển website có thể ứng dụng thành công vào các dự án của mình