Google Pagespeed Insights là gì? Cách tăng tốc độ tải trang web 2021

Trong bài viết này chúng ta sẽ giới thiệu về Google Pagespeed Insights là gì? Nó được đo như thế nào? Và quan trọng làm sao để cải thiện nó cho website của bạn?

Google Pagespeed Insights từ lâu đã là một trong các yếu tối mà Google dùng để đánh giá thứ hạng của một trang web. Nó được được công bố chính thức từ 2010, rồi được nhắc lại vào năm 2018 và đến năm 2020 thì được khẳng định lại một lần nữa bằng thuật ngữ Core Web Vitals trong năm 2020.

Google Pagespeed Insights là gì?

Google PageSpeed ​​Insights là một trong những công cụ của Google để đo lường và cải thiện hiệu suất trang web của bạn trên thiết bị di động và máy tính để bàn.

Thật tình mà nói thì Google cũng khá vất vả trong một thời gian dài để làm sao đo được Pagespeed. Các chỉ số như thế nào là phù hợp? Bạn sử dụng dữ liệu thực tế hay dữ liệu trong thử nghiệm? Bạn dùng thời gian cho toàn bộ trang hay chỉ một phần? Có rất nhiều chỉ số thực tế liên quan đến Pagespeed và đó là một việc khá gian nan để tìm ra chỉ số nào là quan trọng với người dùng.

Cuối cùng thì Google cũng đã định ra được 3 thông số được xem là quan trọng nhất đối với Pagespeed: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Ba thông số này được gọi chung là Core Web Vitals, và được dùng để đo tốc độ trang cảm nhận của khách hàng thay vì tốc độ đo thực tế.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) là chỉ số quan trọng nhất để đánh giá việc tải trang hoàn toàn. Nó được dựa trên các chỉ số sau:

• Hình ảnh
• Tốc độ đáp ứng của server
• Các block hiển thị
• Và phần hiển thị phần client

First Input Delay (FID)

First Input Delay là độ trễ trên trang web của bạn khi một thành phần được tương tác cho đến khi nó hoạt động bình thường. Để đạt được điểm tối đa cho vấn đề này cần phải tối ưu code và sử dụng ít JavaScript.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) là sự dịch chuyển bất ngờ các yếu tố trên trang web (mà người dùng không mong đợi) trong khi trang web vẫn đang tải xuống. Các yếu tố thường gây ra sự thay đổi thường gặp là font chữ, hình ảnh, video, contact form, các nút bấm (botton) và một vài loại nội dung khác.

Việc giảm chỉ số CLS rất quan trọng vì nếu chỉ số này cao, nó có thể gây ra trải nghiệm người dùng kém.

CLS phụ thuộc vào các thuộc tính kích thước được đặt đúng cách và việc tải tài nguyên của bạn theo một trình tự cụ thể, từ trên xuống dưới.

>>> Xem thêm: URL là gì? Tại sao URL lại quan trọng đối với SEO?

Làm sao để đo lường Pagespeed trên Website của bạn?

Có rất nhiều công cụ do Google cung cấp trong đó Core Webs Vitals như là một phần trong việc kiểm tra trang web.

Một trong những vấn đề lớn của các công cụ là dùng dữ liệu thử nghiệm thay cho dữ liệu thực tế. Bạn có thể phân biệt các công cụ này vì chúng thay thế chỉ số FID bằng chỉ số TBT(Total Blocking Time) – một chỉ số mô phỏng.

Vấn đề khác là hầu hết các công cụ chỉ có thể đánh giá một trang tại một thời điểm, đây không phải là cách tiếp cận thực tế để tối ưu hóa toàn bộ trang web của bạn.

Trong số các công cụ của Google được liệt kê ở trên, công cụ tốt nhất để sử dụng có lẽ là Google Search Console. Tại đó, bạn có thể chuyển đến Experience> Core Web Vitals và xem báo cáo cho tất cả các trang của mình cùng một lúc.

Trong phần báo cáo, có một danh sách các thông số bị hỏng

Và căn cứ trên đó bạn có thể thực hiện việc tìm ra các vấn đề đang gặp phải của các chỉ số, và rồi đến các trang nào bị ảnh hưởng bởi các vấn đề. Và sau cùng bạn đến với phần báo cáo PageSpeed Insights cho từng trang cụ thể. Vì thế việc tìm ra từng vấn đề cụ thể của từng trang là việc không hề đơn giản.

Cách tăng tốc độ tải trang cho website của bạn?

Bây giờ bạn đã có danh sách các trang bị ảnh hưởng, đã đến lúc cải thiện Tốc độ trang của bạn. Dưới đây là một số cơ hội tối ưu hóa phổ biến nhất cũng như một số lời khuyên về cách bạn có thể khai thác chúng.

Bây giờ là lúc chúng ta đã có danh sách những trang bị ảnh hưởng và phải tìm mọi cách để cải thiện Pagespeed cho các trang đó. Sau đây là một vài việc mà bạn có thể cân nhắc để tối ưu.

1. Đặt kích thước hình ảnh

Trước tiên hãy bắt đầu bằng một cái gì đó đơn giản nhất. Nếu bạn không ghi kích thước hình ảnh có thể trình duyệt phải mất thời gian để xác định thông số này một cách chính xác. Điều này có nghĩa nó sẽ làm cho các nội dung hiển thị ra không đúng vị trí và làm ảnh hưởng đến CLS của trang.

Để tránh vấn đề này, hãy luôn đặt thuộc tính chiều rộng và chiều cao cho hình ảnh như sau:

<img src=”pillow.jpg” width=”640″ height=”360″ alt=”purple pillow with flower pattern” />

Với thông tin này, tất cả các trình duyệt có thể tính toán kích thước của hình ảnh và chuẩn bị sẳn bộ nhớ cho trang.

2. Serve images in next-gen formats

Tất cả các định dạng hình ảnh đều có kích thước và chất lượng không giống nhau.

Định dạng JPEG và PNG có đặc điểm chất lượng và nén kém hơn nhiều so với AVIF, JPEG 2000, JPEG XR và WebP.

Trong các định dạng trên thì kiểu WebP là cần phải cân nhắc nhiều nhất. Nó hỗ trợ nén tốt và cũng cho phép tạo hình ảnh động. Thông thường các tệp WebP sẽ giảm dung lượng từ 25-35% so với PNG hoặc JPEG.

Trước đây khi dùng WebP thì có một số trình duyệt không hỗ trợ nên khiến nó không được dùng phổ biến. Tuy nhiên, khi Safari của IOS 14 trở lên hỗ trợ định dạng này thì xem như 90% trình duyệt đã hỗ trợ định dạng này.

Nếu trang web của bạn được xây dựng trên WordPress, bạn có thể dễ dàng tạo bản sao WebP của hình ảnh của mình bằng một plugin tối ưu hóa hình ảnh như Imagify. Nếu trang web của bạn không được xây dựng trên nền tảng CMS hoặc bạn không muốn cài đặt quá nhiều plugin, bạn có thể chuyển đổi hình ảnh của mình bằng trình chuyển đổi trực tuyến hoặc trình chỉnh sửa đồ họa.

3. Nén hình ảnh

Cho dù bạn có sử dụng những định dạng hình ảnh mới nhất hay không thì việc nén hình ảnh của bạn vẫn là một việc nên làm để giảm dung lượng trang tổng thể. Một lần nữa, nếu trang web của bạn được xây dựng trên WordPress, bạn có thể nén hàng loạt hình ảnh của mình bằng các plugin hình ảnh như WP Smush. Bạn cũng có thể sử dụng trình nén trực tuyến nếu không muốn cài đặt quá nhiều plugin và có nguy cơ làm chậm trang web của bạn. Phương án cuối cùng – sử dụng trình chỉnh sửa đồ họa để nén hình ảnh của bạn trước khi tải chúng lên trang web của bạn.

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

Hình ảnh ngoài màn hình là những hình ảnh xuất hiện bên dưới màn hình đầu tiên, có nghĩa là người dùng sẽ không nhìn thấy chúng cho đến khi họ cuộn ra khỏi màn hình ban đầu. Khu vực trong màn hình đầu tiên là những gì Google sử dụng để đo tốc độ trang của bạn, vì vậy, đó là nơi mà hầu hết nỗ lực tối ưu hóa của bạn nên được tập trung vào.

Vì thế những hình ảnh không nằm trong khung màn hình đầu tiên thì nên trì hoãn lại đế không làm gia tăng thời gian tải trang.

Trong trường hợp này người ta hay dùng đến thuật ngữu Lazy Loading. Đây là việc chỉ tập trung tải hết những hình ảnh trong khu màn hình đang thấy và những gì còn lại chỉ hiển thị ra khi người dùng cuộn xuống dưới.

5. Chuyển đổi hình gifs sang Video

Nếu như bạn có một hình Gifs thì khuyên chân thành bạn nên chuyển nó thành Video. Vì thực tế đã cho thấy nếu dùng video thì tốc độ nhanh gấp năm lần với 1 hình gifs cùng nội dung.

Để chuyển đổi Gifs thành video thì có thể dùng những ứng dụng online hoặc tool như Ffmpeg. Google thực tế thì đề nghị nên dùng 2 định dạng video là WebM và MP4.

WebM cũng bị một điểm yếu như WebP là nhẹ nhưng ít được hỗ trợ bởi các trình duyệt. Vì thế nếu dùng Video trên trang bạn có thể dùng WebM trước và một video MP4 dự phòng theo kiểu như sau:

<video autoplay loop muted playsinline>

  <source src=”animation.webm” type=”video/webm”>

  <source src=”animation.mp4″ type=”video/mp4″>

</video>

6. Trì hoãn những CSS không sử dụng

Khi trình duyệt tải trang nó sẽ duyệt hết qua tất cả các thành phần để áp dụng cho những hiệu ứng có CSS. Vì thế nếu những CSS không sử dụng trong trang mà trình duyệt cũng phải mất thời gian duyệt qua sẽ làm tổng thời gian tải tăng lên.

Mục tiêu ở đây là xác định các phần CSS không được sử dụng hoặc không quan trọng và xóa chúng hoàn toàn hoặc thay đổi thứ tự tải chúng.

7. Giảm thiểu JS và CSS

Thông thường khi viết mã JS và CSS thì sẽ có những comment, khoảng trắng, cách dòng và các code. Điều này làm cho việc tải các đoạn thừa lên khiến cho trang bị chậm. Vì thế hãy xem và loại bỏ những thứ không cần thiết cho JS và CSS.

8. Trích xuất những CSS quan trọng

Theo mặc định, CSS là những tài nguyên render-blocking. Trang web sẽ không được hiển thị cho đến khi toàn bộ cú pháp được trình duyệt đọc và phân tích đây đủ, điều này làm tốn thời gian tải trang.

Vì thế, những gì cần thiết để tải trong khung hình đầu thì hãy đưa vào phần <head> của mã HTML. Phần còn lại hãy dùng cấu trúc tải không đồng bộ. Điều này giúp cải thiện đáng kể điểm LCP và người dùng cảm giác được tải trang web nhanh hơn.

9. Cải thiện tốc độ server

Một trong những nguyên nhân gây ra thời gian tải website chậm chính là tốc độ của server. Điều này có nhiều nguyên nhân:

• Đường truyền chậm
• CPU thấp
• Ram thấp
• Cơ sở dữ liệu nặng

Để giải quyết những điều này bạn cần tìm một nhà hosting có chất lượng tốt kèm theo sử dụng các dịch vụ CDN để tăng tốc độ truy cấp.

10. Loại bỏ hay tải bất đồng bộ JS từ các phần mềm thứ 3

Ngày nay, việc một website thường tích hợp các tiện ích từ mạng xã hội, map, video nhúng làm cho việc tải trang khá chậm khi phải gởi yêu cầu sang bên thứ 3. Điều này sẽ làm cho Pagespeed ảnh hưởng.

Vì thế hãy cân nhắc đến vấn đề này.

11. Bất cache trình duyệt

Cache trình duyệt cho phép máy client không cần tải lại trang đã vào trước đó nhằm giúp giảm thời gian tải lại toàn bộ trang.

12. Tránh việc chuyển hướng (Redirect) quá nhiều

Nếu trên trang phải redirect quá nhiều và những link redirect chậm cũng sẽ gây ra những tác động không ngừng đến trang của mình.

Kết luận

12 vấn đề liệt kê ở trên là những vấn đề thường ảnh hưởng đến Pagespeed của trang. Hãy chắc chắn bạn theo sát những báo cáo từ Google và cải thiện từng phần một cho trang web của mình và tăng tính trải nghiệm người dùng.

source https://ttm.media/google-pagespeed-insights-la-gi/