Pagespeed insights là gì và nó hoạt động như thế nào?

Chắc hẳn đối với những người quản trị website, SEOer, Lập trình viện không còn xa là gì với Google pagespeed insights nữa đúng không. Tuy nhiên, hiểu rõ nó là gì? Hoạt động như thế nào? Làm sao để cải thiện điểm trên đó cho website thì chưa hẳn là ai cũng đã biết. Hôm nay, thiết kế web sẽ giúp các bạn nắm rõ hơn về khái niệm cũng như những kiến thức có bản nhất về pagespeed insights hay công cụ đánh giá website của google.

Pagespeed Insights google

Pagespeed insights là gì?

PageSpeed Insightscông cụ đánh giá website của Google là một trong những công cụ đo tốc độ trang được sử dụng nhiều nhất trên toàn thế giới. PageSpeed Insights viết tắt là PSI là công cụ đo lường hiệu suất của một trang trên cả thiết bị di động và máy tính để bàn, sau đó cung cấp các đề xuất để cải thiện trang đó. Pagespeed Insights google sẽ tập trung vào hai vấn đề chính là tốc độ tải trang (tốc độ web) và tính thân thiện với người dùng. Các thành phần này tuân thủ các phương pháp về hiệu suất Web của Google, cũng như là tự động hóa quy trình điều chỉnh.

Nhóm Google luôn đi đầu trong công cụ và tối ưu hóa hiệu suất web. Trong những năm qua, họ đã phát triển một loạt công cụ hiệu suất dành riêng cho các loại người dùng khác nhau: từ nhà phát triển, nhà tiếp thị đến chủ sở hữu trang web nghiệp dư, đều có một công cụ đánh giá website của google phù hợp với mọi nhu cầu!

PageSpeed cung cấp loại thông tin nào về trang web của bạn?

Khi bạn 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 đó. Sau khi truy cập vào: https://developers.google.com/speed/pagespeed/insights/, Nhập URL cần kiểm tra và các thông số tưng ứng xuất hiện theo trình tự sẽ là:

Điểm số trang web của thietkeweb9999.com trên PageSpeed Insights

+ Speed score - Điểm tốc độ: Điểm tốc độ dựa trên dữ liệu phòng thí nghiệm Lighthouse. Chúng ta sẽ xem trong chương tiếp theo nó được tính như thế nào.

Trường dữ liệu trện Pagespeed insight

+ Field data - Trường dữ liệu: Dữ liệu trường dựa trên trải nghiệm của người dùng Chrome trong thế giới thực trong 30 ngày qua: dữ liệu này bao gồm Bản vẽ nội dung đầu tiên (FCP) và Độ trễ đầu vào đầu tiên (FID).

Dữ liệu thử nghiệm trên Pagespeed insight

+ Lab data – Dữ liệu thử nghiệm: dựa trên phân tích Lighthouse trên thiết bị di động giả lập và mạng di động. Xem chương tiếp theo để biết chi tiết về các số liệu có trong phần này.

Cơ hội trên PageSpeed Insights

+ Opportunities – cơ hội: 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 nếu các đề xuất được triển khai.

Chuẩn đoán trên PageSpeed Insights

+ Diagnostics - Chuẩn đoán: Phần Chẩn đoán cung cấp các khuyến nghị về những phương pháp hay nhất để phát triển web nên được thêm vào trang.

Test pagespeed

+ Passed audits - Kiểm tra đạt yêu cầu: Phần Kiểm tra vượt qua bao gồm tất cả các kiểm tra hiệu suất mà trang đã đáp ứng và không cần bất kỳ sự can thiệp nào.

Theo ý kiến của chúng tôi, ba lý do chính giải thích sự phổ biến của PageSpeed Insights:

  • Điểm tốc độ của nó (từ 0 đến 100) cho biết ngay lập tức trang web của bạn hoạt động tốt như thế nào;
  • Sơ đồ màu sắc (dấu kiểm màu xanh lá cây, vòng tròn màu cam, hình tam giác màu đỏ) trong các đề xuất của nó giúp dễ dàng xác định các vấn đề ưu tiên ảnh hưởng đến hiệu suất trang web của bạn hơn;
  • Các đề xuất của nó 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ủa mình để cải thiện hiệu suất của nó.

Điểm PageSpeed Insight được tính như thế nào?

Pagespeed insights là gì

Điểm số tuân theo một bản đồ mã hóa màu cụ thể:

  • 0 đến 49 (chậm): Đỏ
  • 50 đến 89 (trung bình): Màu cam
  • 90 đến 100 (nhanh): Xanh lục

Như chúng tôi đã nói ở trên, kết quả Tốc độ trang hiện được cung cấp bởi API Lighthouse.

Điểm số cũng không ngoại lệ: xếp hạng tốc độ mà bạn thấy trên đầu báo cáo Tốc độ trang dựa trên dữ liệu phòng thí nghiệm được Lighthouse phân tích.

Điều quan trọng nhất cần lưu ý trong bối cảnh này là Lighthouse mô phỏng tải trang trong một môi trường cụ thể: mạng di động và thiết bị hạng trung.

Tài liệu của Google về tính năng cho điểm Lighthouse rất chính xác và giúp rất nhiều để hiểu được xếp hạng PageSpeed Insights đến từ đâu:

"Lighthouse trả về điểm Hiệu suất từ 0 đến 100. 0 là điểm thấp nhất có thể. Điểm 0 thường chỉ ra lỗi trong Lighthouse. 100 là điểm tốt nhất có thể, đại diện cho phân vị thứ 98, một trang web hoạt động hàng đầu. Điểm 50 đại diện cho phân vị thứ 75."

Các khuyến nghị xuất hiện trong Chẩn đoán và Cơ hội không phải là một phần của điểm số.

Trong Lighthouse 6 (phát hành vào tháng 5 năm 2020), điểm số được đo bằng 6 chỉ số:

  • Bức tranh có nội dung đầu tiên
  • Thời gian tương tác
  • Chỉ số tốc độ
  • Sơn có nội dung lớn nhất
  • Tổng thời gian chặn
  • Dịch chuyển bố cục tích lũy

Vậy PageSpeed Insights và SEO chúng có liên quan với nhau không?

Điểm PageSpeed đơn thuần mà trang web của bạn đạt được sẽ không ảnh hưởng đến xếp hạng của Google: Con số đó không phải là một chỉ báo về “đ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 của bạn và vị trí mà nó sẽ đạt được trong SERP.

Tuy nhiên:

Vì, như chúng ta đã thấy, điểm PageSpeed là kết quả của phân tích hiệu suất tổng thể trên một số chỉ số cụ thể, điểm của bạn càng tốt, bạn càng có thể cho rằng trang web của mình đang ở trạng thái tốt.

Ngoài việc ảnh hưởng đến Trải nghiệm người dùng (UX/UI) trên trang web của bạn, hiệu suất cũng đóng một vai trò trong SEO. Do PageSpeed Insights được điều hành bởi công cụ tìm kiếm lớn nhất và phổ biến nhất trên thế giới, điều đó có lý do là điểm số của bạn có thể có một số ảnh hưởng đến xếp hạng của Trang kết quả trên Công cụ tìm kiếm (SERP) (ít nhất là trên chính Google).

Điểm tốt là một chỉ số công bằng cho thấy trang web của bạn tốt hơn trong mắt Google. Nhưng nó sẽ không đảm bảo chiến thắng trong cuộc đua đến đỉnh SERP. Một trang web nhanh hơn có cơ hội được Google yêu thích cao hơn.

Sau đó, nỗ lực của bạn nên được tập trung vào việc đảm bảo trang web của bạn tải nhanh nhất có thể: tốc độ trang là yếu tố xếp hạng thực sự, không phải điểm số.

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

Bạn 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 lại

Sau khi tìm hiểu về Pagespeed Insights và các tính năng của công cụ này, chắc chắn ai cũng muốn đạt được mức điểm tối đa 100/100 để website của mình được đánh giá tốt nhất trên Google. Nhưng thực tế bạn không nên để tâm quá nhiều và chạy điên cuồng theo những điểm số trên công cụ này. Bởi công cụ này chủ yếu sẽ cảnh báo cho bạn những khu vực trên web đang có vấn đề và cần được khắc phục. Nhưng đây có thể là một công cụ test website tốt đấy nhé.

Theo chúng tôi, bạn nên dùng sản phẩm này như một  trang web đánh giá website, là công cụ để tham khảo là chính, không nên bắt buộc phải đạt thang điểm 100.

Bạn có câu hỏi về Google PageSpeed Insights hoặc cách tối ưu hóa hiệu suất trang web của bạn không? hãy để lại trong phần bình luận bên dưới nhé!

Based on reviews

5.0
overall

0

0

0

0

0

Add a review

Your Ratting

Your Review

Name *

Email *

BÀI VIẾT MỚI NHẤT

HỖ TRỢ TRỰC TUYẾN

Than phiền dịch vụ

Skype

THIẾT KẾ WEB GIÁ RẺ UY TÍN CHUẨN SEO

CÔNG TY TNHH 123CORP - 0313132477

Trụ sở chính: 60 Nguyễn Đình Chiểu, P.Đakao, Q.1, TPHCM

VPĐD: 14 Phạm Quý Thích, P.Tân Quý, Q.Tân Phú, TPHCM

Điện thoại: (+84) 28. 38 12 17 19

Email: info@123corp.vn

Bạn cần chúng tôi tư vấn 24/7

Email: thanhhuu@123corp.vn

Hỗ trợ kĩ thuật

Email: doannguyen@123corp.vn

Than phiền dịch vụ

Email: info@123corp.vn

THIẾT KẾ WEB GIÁ RẺ UY TÍN CHUẨN SEO