Google pagespeed insights là gì? Cách tối ưu Google Pagespeed Insights

Google pagespeed insights

Google Pagespeed Insights là gì đó là một bộ tiêu chuẩn đo lường về khả năng thân thiện của website đố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 Insights sẽ tập trung vào hai vấn đề chính, đó là tốc độ tải trang và thân thiện với trải nghiệm người dùng.

– Và nếu các website nào càng được nhiều điểm ở trang đánh giá Pagespeed Insights thì tức là trang đó đáp ứng được càng nhiều các tiêu chuẩn của Google đề ra.

– Dựa theo thông tin chi tiết về việc kiểm tra website để xem liệu website của bạn đã áp dụng tốt các phương pháp về việc tối ưu website hay chưa?

 

Cách tối ưu Google Pagespeed Insights tới 100 điểm

 

Google pagespeed insights

 

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

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 >.

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

Giải thích :

– Kích thước hình ảnh lớn có thể làm tăng dung lượng và tốc độ tải trang web 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.

 

Google pagespeed insights

 

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. Rút gọn CSS google pagespeed insights

Giải thích :

– Rút gọn CSS là làm cho css của bạn ngắn hơn mà vẩn giữ được toàn bộ nội dung của CSS , Nó giúp giảm nhẹ số KB file CSS của bạn.

Khắc phục :

– Khắc phục vấn đề này các bạn có thể dùng các công cụ hỗ trợ online như Minify CSS.

– Chúng sẻ giúp bạn một cách nhanh chóng.

– Bạn cũng có thể làm bằng tay nếu CSS của bạn ngắn.

5. Xóa biểu định kiểu xếp chồng (CSS) không dùng

Giải thích :

– Thông thường các trang web được load file CSS bằng cách như thế này< link href=”style.css” rel=”stylesheet” >

– Việc này làm trình duyệt phải tải File và phân tích do đó nó làm tăng đáng kể việc người dùng phải chờ đợi.

Khắc phục :

– Để giải quyết vấn đề này cách đơn giản nhất mà hiệu quả là các bạn copy toàn bộ nội dung trong File Style.css bỏ vào thẻ < style > như thế này.

– Lưu ý : Thẻ < style > phải được đặt trong thẻ < HEAD > trên đầu trang web của bạn nhé.

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

Giải thích :

– Hình ảnh được mã hóa sẽ cho tốc độ tải 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.

 

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

 

Google pagespeed insights

 

– 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 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.

Xin lưu ý rằng:

– PageSpeed Insights chỉ đánh giá các khía cạnh độc lập về hiệu suất của trang: 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 bên ngoài như hình ảnh, JavaScript và CSS .

– Thực hiện tốt các đề xuất sẽ cải thiện được hiệu suất của trang (ở mức độ tương đối). Tuy nhiên, hiệu suấ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 vào website.

– Thực tế, các tiêu chuẩn này không cần bạn phải áp dụng toàn bộ vì không phải tiêu chuẩn nào bạn cũng có thể sử dụng trên mọi trường hợp.

– Cho nên, nếu không có khả năng làm được một số tiêu chuẩn nào đó thì cứ bỏ qua, vì Google không bắt bạn phải đạt tiêu chuẩn hết.

 

Hiện tại, Google Pagespeed Insights có tất cả 16 tiêu chuẩn đánh giá

 

 

1. Quy tắc tối ưu tốc độ

– Tránh sử dụng chuyển hướng ở trang đích.

Google pagespeed insights

 

– Bật chức năng nén dữ liệu gửi về trình duyệt.

– Cải thiện thời gian phản hồi của máy chủ.

– Cải thiện bộ nhớ đệm ở trình duyệt.

– Nén các tài nguyên CSS và Javascript trên website.

– Nén giảm dung lượng hình ảnh.

– Tối ưu việc chèn CSS vào website.

– Thiết lập thứ tự ưu tiên của nội dung trong website.

– Bỏ chặn Javascript và CSS khi tải trang.

2. Quy tắc tối ưu hiệu suất sử dụng

– Tránh sử dụng các trình cắm (plugin) để hiển thị nội dung.

– Cấu hình viewport để hiển thị kích thước màn hình phù hợp.

– Tối ưu các nút bấm hoặc liên kết trên website.

– Sử dụng cỡ chữ phù hợp để hiển thị nội dung.

– Như vậy, nếu bạn muốn website của mình thân thiện với Google Pagespeed thì hãy chắc chắn rằng là bạn đã áp dụng các quy tắc ở trên.

– Google PageSpeed Insights viết tắt Google PSI là một bộ tiêu chuẩn đo lường tốc độ và khả năng thân thiện của website do chính Google đề xuất ra.

– Theo Google, các tiêu chuẩn trong Pagespeed Insights sẽ tập trung vào hai vấn đề chính, đó là tốc độ tải trang và thân thiện với trải nghiệm người dùng.

– Và nếu các website nào càng được nhiều điểm ở trang đánh giá Pagespeed Insights thì tức là trang đó đáp ứng được càng nhiều các tiêu chuẩn của Google đề ra.

– Thực tế, các tiêu chuẩn này không cần bạn phải áp dụng toàn bộ vì không phải tiêu chuẩn nào bạn cũng có thể sử dụng trên mọi trường hợp.

– Nên nếu bạn xem serie này và không có khả năng làm được một số tiêu chuẩn nào đó thì cứ bỏ qua, vì Google không bắt bạn phải đạt tiêu chuẩn hết.

 

Ngoài ra, Google còn gợi ý kèm theo các cách để tối ưu hiệu suất cho website

– Bên cạnh đánh giá trang web, công cụ google page speed test này còn hỗ trợ việc tối ưu hiệu suất dựa trên tình hình thực tế của trang.

– Sau khi hiển thị điểm số và kết quả, phía dưới sẽ là các đề xuất nhằm giúp cải thiện điểm số website được cao hơn. Đồng nghĩa với việc website của bạn sẽ được tối ưu đáng kể.

– Thực tế, các tiêu chuẩn này không cần bạn phải áp dụng toàn bộ vì không phải tiêu chuẩn nào bạn cũng có thể sử dụng trên mọi trường hợp.

– Nên nếu bạn xem serie này và không có khả năng làm được một số tiêu chuẩn nào đó thì cứ bỏ qua, vì Google không bắt bạn phải đạt tiêu chuẩn hết.

Liên hệ

Địa chỉ: 2N Cư xá phú Lâm D, P.10, Q6, HCM

Hotline: 098 300 9285

Email: quang.nguyen@thietkewebplus.net

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

  • web speed test
  • test my site
  • pagespeed insights là gì
  • google page speed insight test
  • google speech insight
  • test tốc độ website
  • gtmetrix
  • điểm google

 

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 *