Tại sao chúng ta cần tối ưu hóa Google Pagespeed Insight?

google pagespeed

Tìm hiểu khái niệm Google Pagespeed là gì?

Google Pagespeed  là một bộ tiêu chuẩn đo lường về khả năng thân thiện của webiste (đối với thiết bị di động và máy tính để bàn) do chính Google đã đề xuất ra. Theo Google các tiêu chuẩn trong Pagespeed Insight sẽ tập trung vào 2 vấn đề chính, đó là tốc độ tải trang và sự thân thiện với trải nghiệm người dùng. Và các website nào càng đưa ra nhiều điểm ở trang đánh giá thì webite đó càng đáp ứng càng nhiều các tiêu chuẩn mà Google đề ra.

google pagespeed

Dựa theo thông tin chi tiết về việc kiểm tra website để xem liệu rằng website đã đáp ứng tốt các phương pháp về việc tối ưu web hay chưa thì bên cạnh đó thì Google Pagespeed Insights sẽ chấm điểm từ 0 – 100.

Các loại Google Pagespeed Insights:

  • Tốt: Website áp dụng các phương pháp tối ưu hiệu suất và mang lại những trãi nghiệm tuyệt vời cho người dùng.
  • Cần khắc phục: Website chưa tối ưu một số phần phổ biến dẫn tới là khiến trãi nghiệm người dùng không được tốt.
  • Kém: Website không được tối ưu và có khả năng mang lại trãi nghiêm người dùng kém.

Hãy lưu ý rằng: Google pageSpeed Insights chỉ đánh giá các khía cạnh độc lâp 5 về hiệu xuất của trang có thể kể tới như cấu hình máy chủ, cấu trúc HTML của trang và việc sử dụng các tài nguyên khác như hình ảnh, JavaScript và CSS. Việc thực hiện tốt các đề xuất sẽ cãi thiện được các hiệu xuất ở trang. Tuy vậy hiệu xuất tuyệt đối của trang vẫn sẽ phụ thuộc vào kết nối mạng của người dùng khi truy cập web.

Tại sao chúng ta cần tối ưu hóa Google Pagespeed Insight?

Nếu bạn ra ngoài kia và hỏi tất cả những người xung quanh rằng họ có thích một trang web được tải nhanh hay không? Tôi cá rằng tất cả mọi người sẽ nói có. Điều đó xuất phát từ tâm lý và trải nghiệm mong muốn của họ.

google pagespeed

Ngày nay, các trang web có nhiều tính năng hơn bao giờ hết. Nó khiến hiệu suất và tốc độ trở thành mối quan tâm hàng đầu của phần lớn doanh nghiệp trực tuyến. Vậy đâu là những lý do quan trọng khiến chúng ta phải tối ưu hóa tốc độ website?

1. Cải thiện trải nghiệm người dùng

Khi người dùng nhấp vào liên kết, một trang web bắt đầu được tải, có một khoảng thời gian để họ chờ đợi nội dung xuất hiện.

Nếu trang web tải chậm, người dùng có thể gặp nhiều vấn đề về trải nghiệm như mức độ tin tưởng giảm xuống, xuất hiện cảm giác ức chế hoặc đôi khi mất bình tĩnh. Ngược lại, các website hiệu suất cao, có pageSpeed nhanh sẽ giúp cho trạng thái tinh thần và trải nghiệm của người dùng trở nên tốt hơn.

2. Cải thiện tỷ lệ chuyển đổi

Không có gì ngạc nhiên khi việc cải thiện google pagespeed sẽ cải thiện hiệu suất.

Khi xem xét mối quan hệ giữa thời gian tải và tỷ lệ chuyển đổi của một trong những khách hàng, OrangeValley cho thấy, chậm hơn 1 giây khiến tỷ lệ chuyển đổi giảm hơn 25%. Vì vậy, làm cho trải nghiệm trang web của bạn thú vị hơn bằng cách cải thiện tốc độ là một trong những cách tốt nhất để đảm bảo cải thiện tỷ lệ chuyển đổi của bạn.

3. Giữ chân người dùng

Cho dù nhận được nhiều lượt nhấp từ kết quả tìm kiếm nhưng nếu trang web của tôi tải chậm thì rất có thể tỷ lệ thoát sẽ tăng cao và nhiều người dùng bỏ đi.

Trong một nghiên cứu điển hình, sau khi giảm thời gian tải trang trung bình xuống 850 mili giây, COOK đã đạt được tỷ lệ chuyển đổi tăng 7%, tỷ lệ thoát giảm 7% và mức độ tham gia của người dùng tăng 10%.

Từ đó cho thấy, các trang web có hiệu suất cao thu hút và duy trì người dùng tốt hơn so với các trang web có hiệu suất thấp.

Điểm Google PageSpeed Insights mới có đáng tin?

Đúng như vậy. Chính cách chấm điểm mới đã khiến cho điểm số của các website bị thay đổi rất nhiều.

Bạn có nhìn thấy dòng chữ “The speed score is based on the lab data analyzed by Lighthouse“? Điều này có nghĩa là 6 thông số bao gồm: First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive và Estimated Input Latency trong phần Lab Data mới là yếu tố quyết định điểm Google PageSpeed Insights chứ không phải là các tiêu chí về tối ưu mã nguồn website như trước đây.

google pagespeed

Các thông số này đều là đơn vị thời gian (tính bằng giây hoặc mili giây) và chúng càng thấp thì càng tốt.

Các hạng mục trong phần Opportunities, Diagnostics và Passed audits chỉ là để Google gợi ý cho bạn cách tối ưu website mà thôi. Kể cả khi bạn đã hoàn thành toàn bộ các lời khuyên của Google nhưng 6 thông số trong phần Lab Data vẫn cao thì điểm Google PageSpeed của bạn vẫn thấp.

Các thông số trong phần Lab Data bị chi phối bởi các yếu tố sau:

  • Mức độ tối ưu của mã nguồn website (page-size, HTML, CSS, JS, webfont, hình ảnh, công nghệ cache dữ liệu…): mã nguồn website được tối ưu càng tốt, page-size càng nhẹ thì các thông số trong Lab Data càng thấp.
  • Hiệu năng của host: host phản hồi càng nhanh thì các thông số trong Lab Data càng thấp.
  • Tốc độ mạng internet từ host tới người dùng và từ host tới server của Google: tốc độ mạng càng nhanh thì các thông số trong Lab Data càng thấp.
  • Khoảng cách địa lý từ host tới người dùng và từ host tới server của Google: khoảng cách giữa host với vị trí test càng gần thì các thông số trong Lab Data càng thấp.

Như vậy, nếu bạn chỉ nhìn vào điểm Google PageSpeed Insights để đánh giá mức độ tối ưu mã nguồn của 1 website là hoàn toàn không chính xác. Đấy là chưa kể việc điểm số sẽ bị thay đổi theo lần test, theo người test, do tốc độ mạng và tốc độ host ở mỗi thời điểm là khác nhau.

Chính Google cũng đã thừa nhận điều này:

Lighthouse analysis of the current page on an emulated mobile network. Values are estimated and may vary.

Tạm dịch là:

Phân tích Lighthouse của trang hiện tại được tiến hành trên một mạng di động giả lập. Giá trị được ước tính và có thể thay đổi.

Một website có điểm Google PageSpeed cao thì chắc chắn sẽ load nhanh trên thực tế. Nhưng một website load nhanh trên thực tế thì chưa chắc đã đạt được điểm cao khi chấm với Google PageSpeed Insights.

Cách tối ưu Google Pagespeed Insights đạt điểm cao

1. Loại bỏ các tài nguyên chặn hiển thị

Giải thích:

Đối với các tập tin JavaScript và CSS chúng thường rất nặng và không được tối ưu đúng cách nó sẽ trì hoàn tốc độ hiển thị web của bạn với người dùng

Khắc phục:

– Đối với tập tin JavaScript bạn cần đem chúng bỏ hết dưới cuối trang là ok

– Đối mới tập tin CSS thì bạn cần nén hết chúng lại thành 1 file duy nhất, Sau đó dùng công cụ Minify CSS để nén chúng lại mới kích thước nhỏ nhất . Sau khi nén lại bạn Copy toàn bộ Code CSS nén được ra ngoài thẻ < HEAD > và đặt chúng trong thẻ < STYLE >.

google pagespeed

2. Thay đổi kích thước hình ảnh cho phù hợp

Giải thích:

Kích thước hình ảnh lớn có thể làm tăng dung lượng và google pagespeed của bạn , Do đo kích thước hình ảnh được hiển thị càng chuẩn sẻ mang lại tốc độ tải trang tốt hơn

Khắc phục:

– Ở Máy Tính Để Bàn kích thước Chuẩn để đo kích thước là 1313px và ở Thiết Bị Di Động là 425px . Khi Fix kích thước hình ảnh bạn nên Test ở 2 màn hình này sẻ cho bạn kích thước chuẩn nhất . Các bạn có thể dùng thẻ < PICTURE > của HMTL5 để tải hình ảnh cho từng màn hình đúng với kích thước của nó.

– Nếu có điều kiện và hiểu biết về SVG thì chúng tôi khuyên bạn nên sử dụng SVG là giải pháp tối ưu nhất hiện nay. Vì nó có thể chia tỷ lệ PX phù hợp với bất kể màn hình nào.

– Ngoài ra các bạn cũng có thể sử dụng CDN để tải nhiều hình ảnh cho nhiều màn hình khác nhau.

3. Trì hoãn tải các hình ảnh ngoài màn hình

Giải thích:

Hình ảnh ngoài màn hình là khi bạn tải trang web giao diện đầu tiên bạn thấy được là giao diện trong màn hình , Thì phần còn lại phải lăn chuột xuống mới thấy được gọi là phần nằm ngoài màn hình. Các hình ảnh ở đây do không cần thiết phải hiển thị ngay lập tức nên việc trì hoãn nó sẻ giúp ích cho tải giao diện trong màn hình người dùng tăng lên đáng kể .

Khắc phục:

– Để khắc phục vấn đề này nó có khá nhiều cách mà cách đơn giản nhất là bạn có thể dùng kỹ thuật Lazy Loading để tải hình ảnh trên trang web theo kiểu bất đồng bộ . Nghỉa là web bạn Load tới đâu thì tải tới đó chứ ko tải 1 lúc

– Ngoài ra Intersection Observer API là một modern interface mà bạn có thể sử dụng để tải hình ảnh và nội dung khác.

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

Giải thích

Hình ảnh được mã hóa sẽ cho google pagespeed nhanh hơn và tiêu tốn ít dữ liệu di động của người dùng hơn.

Khắc phục:

– Để giải quyết vấn đề này các bạn nên sử dụng định dạng SVG cho các hình đơn giản như logo , icon..

– Các hình ảnh khác bạn nên dùng các công cụ tối ưu hóa trên mạng như TinyPNG hoặc dùng CDN Google cũng có thể mã hóa hình ảnh cho bạn

5. Phân phối hình ảnh ở định dạng mới và hiệu quả hơn

Giải thích:

Các định dạng hình ảnh mới như JPEG 2000, JPEG XR và WebP thường nén tốt hơn so với các định dạng hình ảnh cũ như PNG hoặc JPEG. Điều này có nghĩa là tốc độ tải xuống nhanh hơn và tiêu tốn ít dữ liệu di động hơn

Khắc phục:

– Để khắc phục vấn đề này các bạn các bạn nên chọn các định dạng hình ảnh mới như JPEG 2000, JPEG XR và WebP bằng các công cụ chuyển đổi online như Convertio.co hay các công cụ khác

– Chúng tôi khuyên bạn nên dùng định dạng WebP vì chúng khá phổ biến và phù hợp với nhiều trình duyệt hơn .

Các tìm kiếm liên quan đến google pagespeed

  • google pagespeed insights
  • test my site
  • web speed test
  • gtmetrix
  • tối ưu google pagespeed insights
  • test tốc độ website
  • check page speed for mobile

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *