Hướng dẫn cài đặt browser caching cho website WordPress

Hướng dẫn cài đặt browser caching cho website WordPress giúp tăng tốc độ load web và tiết kiệm băng thông.

Bạn test tốc độ website bằng các công cụ như Google PageSpeed Insights, GTmetrix hay Pingdom và nhận được cảnh báo “leverage browser caching” (nâng cao lưu vào bộ nhớ đệm trong trình duyệt)? Bạn đang băn khoăn không biết xử lý vấn đề này như thế nào? Nếu đúng như vậy thì bài viết hôm nay chính là dành cho bạn. Nhưng trước hết, hãy cùng WP Căn bản tìm hiểu xem browser caching là gì và tại sao bạn nên cài đặt nó cho website của mình nhé.

Tham khảo thêm:

• Hướng dẫn cài đặt và sử dụng plugin WP Rocket
• Hướng dẫn cài LiteSpeed Cache cho WordPress

Browser caching là gì?

Nếu các bạn chưa biết thì hầu hết các trình duyệt web hiện nay đều sở hữu khả năng cache dữ liệu tĩnh. Nghĩa là các file tĩnh như hình ảnh, CSS, JS… thường sẽ được lưu lại trên RAM hoặc ổ đĩa cứng sau lần tải web đầu tiên và sử dụng lại trong các lần tải tiếp theo. Dữ liệu sẽ không phải mất thời gian tải từ host nữa mà thay vào đó nó sẽ được lấy trên RAM hoặc ổ cứng máy tính, giúp tiết kiệm thời gian tải.

Browser caching không chỉ giúp website của bạn load nhanh hơn vào những lần truy cập sau đó mà nó còn giúp bạn tiết kiệm băng thông và tăng khả năng chịu tải cho host (giảm số lượng request tới server). Vì vậy, không có lý do gì để không kích hoạt tính năng tuyệt vời này cho website của bạn.

Cài đặt browser caching cho website WordPress

Có 2 phương pháp khác nhau để làm việc này: sử dụng plugin hoặc chèn code vào các tập tin tương ứng.

Sử dụng plugin

Một số plugin tạo cache dành cho WordPress hiện nay đã được tích hợp sẵn tính năng browser caching, chẳng hạn như LiteSpeed Cache, WP Rocket hay W3 Total Cache.

Đối với plugin WP Rocket, tính năng browser caching sẽ tự động được kích hoạt và bạn không cần phải thiết lập gì thêm. Hướng dẫn cài đặt plugin WP Rocket, các bạn có thể xem trong link tham khảo ở phần đầu bài viết.

Đối với plugin LiteSpeed Cache, các bạn truy cập LiteSpeed Cache => Settings => Advanced => chuyển mục Browser Cache sang trạng thái ON. Mục Browser Cache TTL, các bạn có thể giữ nguyên như mặc định (1 tháng) hoặc điều chỉnh thời gian theo ý thích nhưng nên để tối thiểu là 1 tháng.

Nếu các bạn không tìm thấy tab Advanced, hãy click vào nút Show Advanced Options ở góc trên, bên phải giao diện cài đặt của plugin LiteSpeed Cache.

Chèn code thủ công

Phương pháp này có thể được áp dụng cho tất cả các nền tảng website nói chung và các website WordPress đang cài đặt plugin tạo cache nhưng không có sẵn tính năng browser caching (chẳng hạn như WP Super Cache hay Cache Enabler) nói riêng.

Có 2 tùy chọn khác nhau để làm việc này, sử dụng Cache-Control headers hoặc Expires headers. Các bạn cũng có thể sử dụng kết hợp cả 2.

Đối với web server LiteSpeed và Apache

Chèn đoạn code sau đây vào đầu file .htaccess nếu bạn muốn sử dụng Cache-Control headers:

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

Trong đó 2592000 là số giây, tương ứng với 1 tháng. Các bạn có thể để mặc định hoặc tùy chỉnh thông số này cho phù hợp với nhu cầu sử dụng, nhưng nên để tối thiểu là 1 tháng.

Còn đây là code nếu bạn muốn sử dụng Expires headers:

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

Lưu lại và kiểm tra kết quả.

Đối với web server NginX

Chèn đoạn code sau đây vào trong server block (server {...}) của NginX, thường nằm ở đường dẫn /etc/nginx/site-enabled/default: nếu bạn muốn sử dụng Cache-Control headers:

location ~* \.(png|jpg|jpeg|webp|gif)$ {
    expires 365d;
    add_header Cache-Control "public, no-transform";
}</p>
<p>location ~* \.(js|css|pdf|html|swf)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

Trong đó: 365d = 365 ngày = 1 năm, 30d = 30 ngày = 1 tháng.

Còn đây là code nếu bạn muốn sử dụng Expires headers:

location ~* \.(jpg|jpeg|webp|gif|png)$ {
    expires 365d;
 }</p>
<p>location ~* \.(pdf|css|html|js|swf)$ {
    expires 30d;
 }

Khởi động lại NginX service và kiểm tra kết quả.

Kiểm tra browser caching

Kiểm tra kết quả bằng các công cụ test tốc độ như Google PageSpeed Insights, GTmetrix hay WebPageTest. Các bạn cũng có thể sử dụng Chrome Developer Tools để làm điều này.

Click chuột phải vào giao diện website => chọn Inspect => chọn tab Network => Reload (F5) website => click vào link của 1 file tĩnh bất kỳ (được lưu trên website của bạn) và kiểm tra kết quả:

Riêng đối với Google Analytics, các bạn có thể tham khảo bài viết “Khắc phục lỗi cache của Google Analytics một cách đơn giản” để xử lý lỗi leverage browser caching. Thật đơn giản phải không nào? Chúc các bạn thành công!

Mọi thắc mắc liên quan đến việc cài đặt browser caching cho website WordPress xin vui lòng gửi vào khung bình luận bên dưới để được hỗ trợ và giải đáp.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)