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
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é!
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.
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 JavaScript. Sau khi cài đặt bạn chỉ cần bật Async JavaScript lên là được.
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.
Loại bỏ CSS chặn hiển thị
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>
Với Genesis theme thì bạn chỉ cần vào Genesis > Theme Setting > Dán vào khung như ảnh dưới.
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.
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.
À 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é!)
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.
Cũng thêm được vài cái mới, để tớ thử xem sao. Hê hê
Đúng rồi bác :3
Cảm ơn tác giả. Khi mình sử dụng Async JavaScript thấy web bị lỗi 1 số hiệu ứng. Nên đành phải tắn nó vậy,…
Đúng bác. Đôi khi do theme có các phần nó bị lỗi nếu trình tự tải không chính xác ấy!