Làm sao để đạt điểm số cao trên Google PageSpeed Insights?

Chào toàn thể các anh em idichvuseo thân mến, hôm nay sau mấy tháng mình mới đạt được 50 bài viết, mừng quá... nên để không phụ lòng BQT diễn đàn, mình xin được đóng góp cho diễn đàn một bài viết.
Có thể bài viết của mình không có gì mới mẻ, hoặc nhiều anh em đã biết rồi, thì mình cũng xin mạn phép được chia sẻ chút kiến thức nhỏ nhoi đến anh em newbie, mong rằng những gì mình sắp viết dưới đây sẽ giúp anh em được phần nào trong quá trình học hỏi và làm việc nhé.

Làm sao để đạt 100/100 trên Google PageSpeed Insights?

Hẳn ai đã có kinh nghiệm một thời gian làm web, làm SEO đều đã từng nghe đến vấn đề về điểm số trên một công cụ đo lường của Google là Google PageSpeed Insights. Điểm số ở đây được cho là có ảnh hưởng lớn đến kết quả SEO của các bạn.

Bản thân mình đã nghiên cứu trên một số website của nước ngoài, và đạt được điểm số 96/100. Tuy nhiên, cái gì cũng có mặt lợi và mặt hại, nên mình quyết định chỉ dừng lại ở mức điểm vừa phải (trên 70 cho giao diện Mobile, và xấp xỉ 90 cho giao diện Desktop), mình thấy như vậy là tốt rồi. Và mình sẽ chia sẻ với anh em một số công cụ để đạt được mức điểm cao 90/100, sau đó tùy anh em quyết định nhé.

Google PageSpeed Insights quan trọng đến mức nào?

Google PageSpeed Insights là một công cụ của Google, công cụ này giúp bạn kiểm tra tốc độ của website và hướng dẫn cho bạn cách làm sao để website đó hoạt động nhanh hơn, cũng như thân thiện với giao diện Mobile hơn, dựa theo các tiêu chí đánh giá của Google.

Hầu hết mọi người ban đầu đều mong muốn, và tìm cách để đạt được thang điểm tối đa 100/100 trên Google PageSpeed Insights. Nhưng hầu hết các chuyên gia, tại các website uy tín mình từng tham khảo, đều khuyên các bạn đừng quá lo lắng về mức điểm tuyệt đối. Thay vì tập trung vào thang điểm dựa theo các tiêu chí đánh giá của Google, bạn hãy tập trung vào việc phát triển nội dung và tốc độ loading của website. Hay nói cách khác, hãy thuê hosting tốt, chăm chút website của bạn, nếu thang điểm ở mức 70-80, vậy là OK!

Thêm một vấn đề nữa, điểm số Google PageSpeed Insights có ảnh hưởng đến thức hạng SEO của bạn hay không? Thì câu trả lời được Gary Illyes, (Webmaster Trends Analyst for Google) trả lời là CÓ!

OK, bây giờ mình sẽ lần lượt giới thiệu tới các bạn các lỗi cơ bản và công cụ để cải thiện thang điểm Google PageSpeed Insights này nhé.

1. Enable Compression

Vấn đề thường gặp nhất, mà Google PageSpeed Insights thường yêu cầu bạn sửa chữa là Enable Compression.

Để fix lỗi này, Google sẽ khuyên chúng ta là mở "Gzip Compression". Đây là vấn đề đơn giản với những ai xài server riêng, nhưng lại là vấn đề nan giải với những ai đang dùng Shared Host như mình. Để khắc phục lỗi này, bạn có thể dùng 2 cách: 1 là dùng plugin; 2 là chỉnh file .htaccess.

Cách 1: dùng Plugin.

Các bạn có thể dùng một số caching plugin có hỗ trợ enable Gzip. Plugin quen thuộc và được ưa chuộng nhất có lẽ là WP Rocket, hoặc W3 Total Cache, các bạn cài đặt rồi vào phần settings là thấy ngay.

Cách 2: chỉnh sửa file .htaccess.

Một cách đơn giản nữa (nếu bạn không muốn dùng plugin) là chỉnh sửa file .htaccess. Thêm đoạn code này vào nhé:

Mã:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Lưu ý là các bạn hãy thêm đoạn code ở phần dưới cùng của nội dung file .htaccess nhé, như này:



Sau khi làm xong công đoạn này, hãy kiểm tra điểm số website của mình nhé.

2. Optimize Images - Tối ưu hóa hình ảnh

Một vấn đề hết sức phổ biến khác, là vấn đề hình ảnh. Đa số các bạn sẽ được Google yêu cầu tối ưu hóa hình ảnh để dung lượng hình ảnh nhẹ hơn, giúp web chạy nhanh và mượt hơn.



Đây là vấn đề mà mình nghĩ chúng ta nên giải quyết, không chỉ vì điểm số, mà còn để cho website của chúng ta chạy tốt hơn. Vì theo các nghiên cứu, hình ảnh thường chiếm tới 65% dung lượng của website. Điều này lý giải vì sao nếu hình ảnh nặng nề, sẽ ảnh hưởng tiêu cực tới chất lượng website của bạn.

Để khắc phục, rất đơn giản, có rất nhiều plugin hỗ trợ bạn trong việc tối ưu hóa hình ảnh. Dưới đây là 5 plugins được ưa chuộng nhất, bạn có thể chọn cho mình một plugin phù hợp.

• Imagify Image Optimizer
• Optimus Image Optimizer
• ShortPixel Image Optimizer
• WP Smush
• TinyPNG

Những plugin này sẽ hỗ trợ bạn tối ưu những hình ảnh đã up lên, nếu bạn không muốn tiếp tục sử dụng, thì đừng quên tối ưu hóa hình ảnh trước khi up lên những lần sau nhé. Rất nhiều công cụ giúp bạn làm điều này, ví dụ như PTS chẳng hạn.

3.
Eliminate Render-blocking JavaScript and CSS in Above-the-fold Content

Sau 2 vấn đề thường gặp nhất đã nêu ở trên, hầu hết các bạn cũng sẽ bắt gặp yêu cầu "Eliminate Render-blocking JavaScript and CSS in Above-the-fold Content"



Để khắc phục tình trạng này, mình sử dụng plugin là Autoptimize. Đây là Plugin tốt, tuy nhiên chỉ phù hợp với các website vừa và nhỏ, không phù hợp với những website lớn. (Anh em làm website lớn chắc không cần đọc bài viết của mình nữa, nên mình chỉ viết về plugin này thôi nhé).

Tại sao mình dùng plugin này? vì đây là plugin được cộng đồng wordpress đánh giá rất cao, dung lượng nhẹ, dễ sử dụng.

Sau khi cài đặt Autoptimize, vào phần settings và chọn “Optimize CSS Code”. Bạn tiếp tục vào phần Advanced, chọn “Aggregate inline CSS” và “Inline All CSS”.



Tiếp đó mình cũng chọn Optimize HTML code



Tới đây, kiểm tra lại điểm số trên Google PageSpeed Insights, các bạn đã có thể đạt trên 88 điểm. Google sẽ yêu cầu bạn fix một số lỗi như Google Fonts, Minify CSS v.v... Các bạn có thể chọn trong phần settings của Autoptimize. Nếu các bạn làm theo yêu cầu này, điểm số có thể đạt từ 92/100 đến 95/100. Tuy nhiên, mình đã thử chọn sửa lỗi Google Fonts, điều này lại làm ảnh hưởng vô cùng tiêu cực đến giao diện website, font chữ trên web mình bị lỗi tùm lum. Nên mình quyết định không chọn option này.

4. Reduce server response time

Cuối cùng, lỗi thường gặp nữa mà Google yêu cầu bạn fix đó là Reduce server response time. Lỗi này do bạn đang sử dụng host có tốc độ chậm. Nếu bạn có điều kiện, hãy nâng cấp host lên nhé.

Sau khi cải thiện được 4 lỗi phổ biến trên, mình đã đạt được thang điểm 90/100. Tuy nhiên, như ban đầu mình nói, cái gì cũng có mặt lợi mặt hại (ví dụ như fix lỗi google fonts sẽ làm giao diện website xấu đi chẳng hạn) nên mình dừng lại ở thang điểm 72/100 cho giao diện Moble và 86/100 cho giao diện Desktop.

Các bạn có thể trải nghiệm và tự quyết định nên dừng lại ở mức điểm nào nhé. Cám ơn các bạn và xin chúc toàn thể anh em idichvuseo một năm mới nhiều niềm vui, phát tài phát lộc.

 

nhìn hơi hoa mắt nhưng pagespeed của mh toàn 55 65 hic nản

 

Bài viết hơi dài, nhưng mình chắc chắn nếu bạn sử dụng những công cụ mình nêu trong bài viết, bạn có thể cải thiện điểm số lên trên 80

 

tốc độ load trang web càng nhanh càng tốt nhưng với site của mình test tầm 70 mà vẫn top nhiều từ khóa như thường.

 

Mình cũng dừng lại ở con số 88 va 65. Tốc độ phản hồi máy chủ hơi chậm nên có lúc là 82. Tạm chấp nhận được. Tối ưu được hình ảnh thì chỉ số tăng cao lắm.

 

Bài viết rất hay nếu chi tiết và hướng dẫn thêm một số lỗi nữa thì tốt quá

 

Mình nghĩ không cần phải 100/100. Chỉ cần 70/100 là có thể chiến tốt rồi. Tối ưu lại CSS với hình ảnh thôi là có thể từ 50 lên 70 rồi. Mình toàn tối ưu bằng plugin vừa dễ vừa nhanh

 

Đọc xong chết liền, bác tự viết hay đi copy thế. Dù sao cũng cảm ơn bác đã chia se nhé

 

Mình thường bị lỗi về CSS với bật nén gì đó. Cái này về mặt kỹ thuật nên mình không rành lắm. Ngoài ra, về nén hình ảnh thì mình có thể xử lý được! Bạn nào biết chỉ mình nhé, hiện tại mình check được 6-7x điểm thôi