Hướng dẫn tối ưu điểm Google Pagespeed Insights với Wordpress-2
Hướng dẫn tối ưu điểm Google Pagespeed Insights với Wordpress-2

Google Pagespeed Insights là một trong các công cụ đo tốc độ website phổ biến do chính Google đặt ra theo các tiêu chuẩn cơ bản của họ về 2 vấn đề chính là tốc độ tải trang và độ thân thiện với người dùng. Hôm nay, mình sẽ hướng dẫn các bạn cách tùy chỉnh lại website để phù hợp với công cụ này.

Tại sao điểm số website trên Google Pagespeed Insights trở nên quan trọng?

Dựa theo một số tin tức của mình thì vào cuối năm 2016 Google đã bắt đầu ưu tiên xếp hạng cao hơn cho các website đạt trên 85đ Google pagespeed. Nhưng bạn phải nên nhớ rằng đừng để điểm số ảo này ám ảnh vì mỗi trang web đều có cách thiết lập không nên thay đổi vì sẽ xảy ra lỗi nếu bạn chỉnh sửa không chính xác. Việc đơn giản của bạn cần làm chỉ là tìm cách tối ưu nó tốt nhất mà vẫn đảm bảo website chạy tốt.

Để đo chính xác tốc độ website thì bạn nên dùng các công cụ như:  Pingdom, GTMetrix còn Google pagespeed thì tìm cách tối ưu cho nó thôi. 

Bắt đầu tối ưu Google Pagespeed Insights cho wordpress

Nén Gzip ngay và luôn

Tất cả các trình duyệt hiện đại hỗ trợ và tự động nén Gzip cho tất cả các yêu cầu HTTP. Cho phép nén Gzip có thể làm giảm kích thước của các phản ứng chuyển dữ liệu lên đến 90%, giúp giảm đáng kể lượng thời gian để tải về các nguồn tài nguyên, giảm thiểu sử dụng dữ liệu cho khách hàng và cải thiện thời gian tải lần đầu cho website của bạn.

Thêm chế độ nén Gzip cho website, để làm điều này chúng ta cần phải cho phép nén Gzip. Đáng tiếc là các share hosting không tự động kích hoạt chế độ này dù đã có trên máy chủ của họ, vì vậy chúng ta phải làm điều đó bằng tay hoặc bằng Plugin.

Về Plugin bạn có thể dùng một số Plugin có hỗ trợ chức năng nén Gzip như WordPress Total Cache hoặc WP Rocket,…nhiều lắm không kể hết nổi.

Thường thì các share host sử dụng Apache là chính, cách làm tay thủ công bạn chỉ cần sao chép dòng code phía dưới và dán vào tập tin .htaccess. Mà bạn nhớ phải sao lưu file này trước nhé!

# 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
add-gzip-code
Nhìn ảnh cho dễ hiểu nhé các bạn.

Nếu website của bạn chạy trên nền Nginx, chỉ cần thêm vào tập tin này vào nginx.conf của bạn.

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Sau khi thêm xong bạn dùng tool này để check nhé!

check-gzip

Tối ưu hóa hình ảnh

Đây là một trong các nguyên nhân chính làm chậm trang web của bạn. Và cách đơn giản nhất để tối ưu chúng là sử dụng một số Plugin sau đây:

Hoặc bạn có thể dùng các phần mềm nén ảnh thủ công trước khi upload ảnh lên hosting như: Adobe Photoshop, GIMP, hoặc Affinity

Loại bỏ JavaScript chặn hiển thị

Đây là một trong các nguyên nhân chính khiến điểm số pagespeed của bạn không được cao nhưng cũng là một trong các “tài nguyên” cần thiết giúp cho website của bạn hoạt động ổn định.

toi-uu-hoa-pagespeed-insights
Đây là một số đoạn JS khiến Itidea bị chậm.

Khi một trình duyệt tải một trang web, JavaScript và CSS chặn hiển thị sẽ chặn một số tài nguyên cho đến khi chúng được tải và xử lý bởi trình duyệt. Có 2 cách cơ bản để khắc phục vấn đề này.

1/ Nếu bạn có khá ít (khoảng dưới 4 đoạn JavaScript ) thì cũng không gây quá nhiều ảnh hưởng cho website nên bạn có thể cân nhắc việc cài thêm Plugin Autoptimize. Autoptimize tăng tốc độ trang web của bạn và giúp bạn tiết kiệm băng thông bằng cách tập hợp và giảm thiểu JS, CSS và HTML.

2/ Cách 2 là dùng cơ chế tải không đồng bộ JavaScript là Async giúp tạm dừng phân tích cú pháp HTML để thực hiện lại khi nó đã hoàn tất tải. Để làm việc này thì bạn cài thêm Plugin là Async JavaScriptSau khi cài đặt bạn chỉ cần bật Async JavaScript lên là được.

Async JavaScript
Bật Async JavaScript lên và tận hưởng.
Async JavaScript 2
À quên chuyển tag Defer sang Async nữa

Nếu bạn không muốn sử dụng một plugin thì chỉ việc thêm đoạn mã sau vào Fuction.php

/*function to add async to all scripts*/
function js_async_attr($tag){
# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Sau khi cài xong thì điểm Pagespeed trên di động của mình tăng từ 67 > 71 và desktop từ 87 > 89. Cũng gọi là nhanh hơn một tý. Ở đây còn 2 đoạn JS nhưng là của Plugin Cache Rocket nên mình giữ nguyên không xóa.

Async JavaScript 3

Loại bỏ CSS chặn hiển thị

css loai bo google pagespeed insights

Bạn có thể thấy rằng CSS đầu tiên chúng ta cần phải tối ưu hóa là phông chữ Google của chúng tôi (fonts.googleapis.com). Để khắc phục điều này, chúng ta sẽ cài đặt các plugin miễn phí của Google là Disable Google Fonts.

Với theme bình thường, Sau khi cài đặt Plugin thì Font Google của bạn sẽ bị lỗi. Việc bạn cần làm là vào trang Google font và lấy mã nhúng cho font mà bạn đang sử dụng. Truy cập vào Footer.php và dán code nhúng trước thẻ đóng </body>

footerphp-sua-file

Với Genesis theme thì bạn  chỉ cần vào Genesis > Theme Setting > Dán vào khung như ảnh dưới.

google-font

Cách này mình đã test và hiệu quả khi dùng theme thường, các theme của genesis thì chả có gì xảy ra.

Tối ưu cho style.css

Đơn giản là cài Plugin Autoptimize và cài đặt như sau.

optimize-css-code

autoptimize-optimize-html-code

Tận dụng bộ nhớ đệm trình duyệt

Đối với máy chủ Nginx

Thêm Cache-Control Header trong Nginx

Bạn có thể thêm Header Cache-Control trong Nginx bằng cách thêm dòng sau vào máy chủ cấu hình máy chủ của bạn.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

Thêm Expires Headers trong Nginx

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

Đối với máy chủ Apache

Bạn thêm các code vào vị trí thích hợp trong file .htaccess (Dùng Filezilla truy cập vào host sẽ thấy)

Thêm Cache-Control Headers trong Apache

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

Thêm Expires Headers trong Apache

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Sau khi chỉnh xong thì file .htaccess của bạn sẽ tạm thời trông như thế này.

expire-headers

À lưu ý khá tức cười là nếu bạn sử dụng Google analytic thì vẫn sẽ tồn tại đoạn này dù đã tùy chỉnh. Để tiễn nó đi luôn thì bạn chỉ cần cài Plugin Complete Analytics Optimization Suite vào là được.(nhớ chèn lại mã theo dõi nhé!)

xoa-js-google-analytic
Nó thông báo vậy này!

Giảm thời gian phản ứng máy chủ

Ở phần này hầu như là do hosting của bạn ở xa hoặc có tốc độ quá cùi. Giải pháp là đăng ký các dịch vụ CDN miễn phí, dùng các plugin cache (quá nhiều rồi nên mình khộng liệt kê nữa)

Giảm kích thước JavaScript (Minify JavaScript)

Nếu nó báo cả cái này thì bạn vào lại Plugin Autoptimize lúc nãy cài và bật dòng Optimize JavaCript Code lên là được.

Vậy là xong, áp dụng các bước trên thì chắc chắn bạn đã phần nào cải thiện được điểm Google Pagespeed của mình rồi.

Hướng dẫn tối ưu điểm Google Pagespeed Insights với WordPress
4 (2) votes

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here