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

Google Pagespeed Insight 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.

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

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

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 insight

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.

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 insight

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.

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

Như đã đề cập ở phần trên. Kết quả PageSpeed Insights được cung cấp với API Lighthouse. Điểm Google Pagespeed Insights bao nhiêu cũng không ngoại lệ. Điều quan trọng nhất cần chú ý là: Lightgouse mô phỏng tải trang trong một môi trường đã sắp xếp sẵn:

Với mạng và thiết bị di động ở tầm trung. Một số tài liệu về cách tính Lighthouse đã được Google Page Speed phát hành. Chúng sẽ giúp ta hiểu thêm về nguồn gốc xếp hạng Page Speed Insights.

Lighthouse trả kết quả Performance Score cho Website giữa 0 đến 100. 0 là điểm số thấp nhất, nó chỉ xảy ra khi Lighthouse bị lỗi. […]. 100 là cao nhất mà một Website có. Nó đại diện cho việc Web đó thuộc Top đầu phân vị 98 (trên thang nhóm 100). Điểm 50 đại diện cho phân vị thứ 75.

Google Page Speed cũng làm rõ: Ở danh mục Performance của Lighthouse, chỉ có mục trong phần Metrics mới có ảnh hưởng đến điểm Page Speed. Với Lighthouse 6 (phát hành hồi tháng năm, 2020), sẽ đo bằng 6 chỉ số dưới đây:

• First Contentful Paint – Nội dung đầu hiển thị
• Time to Interactive – Thời gian tương tác
• Speed Index – Chỉ số tốc độ Page Speed
• Largest Contentful Paint – Phần tử lớn nhất hiển thị
• Total Blocking Time – Tổng thời gian chặn
• Cumulative Layout Shift  – Thay đổi bố cục tích lũy

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

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

Google Pagespeed Insight 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.

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

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

Công cụ Google Pagespeed cũng đưa ra các gợi ý cải thiện để tối ưu hóa hiệu suất trang web. Các gợi ý này bao gồm:

Tối ưu hóa hình ảnh: Tối ưu hóa hình ảnh bằng cách nén kích thước của chúng và lưu trữ chúng ở định dạng phù hợp.

Sử dụng cache: Sử dụng cache giúp giảm thời gian tải trang bằng cách lưu trữ các tài nguyên trên trình duyệt hoặc server.

Sử dụng HTTP/2: Sử dụng HTTP/2 giúp tăng tốc độ tải trang bằng cách cho phép nhiều yêu cầu được xử lý cùng một lúc.

Sử dụng CDN: Sử dụng CDN giúp cải thiện tốc độ tải trang bằng cách phân phối tài nguyên trên nhiều máy chủ khác nhau trên toàn cầu.

Liên hệ với SEMTEK để tháo nút thắt cho website của bạn bằng giải pháp về Marketing!

SEMTEK Co,.LTD

🏡 Địa chỉ: 2N Cư Xá Phú Lâm D, Phường 10, Quận 6, TP.HCM
📧 Email: info@semtek.com.vn
☎️ Hotline: (+84)098.300.9285

Các tìm kiếm liên quan:

• 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

Nội dung liên quan:

• Nên học marketing ở đâu ? Những trường đại học nào đào tạo Marketing tại Việt Nam?
• Hướng dẫn cách sử dụng luật hấp dẫn không phải ai cũng biết
• Nhân khẩu học là gì? Yếu tố nhân khẩu học bao gồm những gì?