Nếu bạn đang tìm cách fix lỗi Leverage Browser Caching trên WordPress

Thì trong bài viết này mình sẽ hướng dẫn bạn cách hơn giản nhất.

Nó sẽ giúp website bạn được load nhanh hơn và mang trải nghiệm tốt hơn đến người truy cập.

Browser Caching là gì?

Bộ nhớ đệm trình duyệt (browser caching) là một cách để cải thiện tốc độ tải trang web của bạn.

Bình thường khi truy cập vào một website, tất cả các file sẽ được tải một cách riêng biệt.

Điều này tạo rất nhiều request giữa browser và server của bạn, dẫn đến tăng thời gian tải website.

Khi bộ nhớ đệm của trình duyệt được bật, trình duyệt sẽ lưu lại một bản sao của trang web đó.

Điều này cho phép các trình duyệt tải các file như style, logo, image, v.v. nhanh hơn khi người dùng truy cập trang thứ hai trên trang web của bạn.

Lỗi Leverage Browser Caching trên WordPress

Lỗi Leverage Browser Caching có nghĩa là cache trình duyệt của bạn chưa được bật, hoặc thiết lập chưa đúng.

Ban có thể kiểm tra bằng các công cụ test tốc độ website như GTmetrix hoặc GG PageSpeed Insight.

kết quả trên GG PageSpeed Insight

Lỗi Serve static assets with an efficient cache policy cũng tương tự với Leverage Browser Caching.

Ở đây các công cụ này đang khuyến khích bạn phân phối các nội dung tĩnh bằng bộ nhớ đệm.

Trong bài này mình sẽ hướng dẫn bạn thực hiện fix lỗi này bằng 2 cách sau.

Cách 1: Sử dụng plugin WP Rocket để fix lỗi Leverage Browser Caching

WP Rocket là một trong những cache plugin tốt nhất thị trường hiện nay.

Với người mới dùng không am hiểu nhiều về kỹ thuật, theo mình thì nên dùng wp rocket thay vì cache plugin khác.

Nó đầy đủ tính năng, giao diện người dùng thân thiện, chỉ cần bật để kích hoạt các tính năng mong muốn.

Ngay lập tức, tất cả các cài đặt bộ nhớ đệm được đề xuất sẽ thực sự tăng tốc trang web WordPress của bạn.

Bạn chỉ cần cài đặt plugin WP Rocket và nó sẽ tự động kích hoạt bộ nhớ đệm trình duyệt ( bằng file .htaccess)

Mình cũng đã có một bài đánh giá chi tiết WP Rocket, nếu chưa biết hãy tham khảo nhé.

Cách 2: Fix lỗi Leverage Browser Caching bằng đoạn code sau

Trước khi sử dụng cách này, hãy chắc chắn rằng bạn đã từng edit file trên wordpress và backup đầy đủ nhé.

Đối với các bạn mới tốt nhất nên sử dụng cách 1 để đảm bảo an toàn cho website (hoặc có thể nhờ ai đó am hiểu).

Nếu bạn vẫn đọc tiếp thì chúng ta bất đầu fix lỗi bằng đoạn code sau.

Kiểm tra xem đang chạy Apache hay Ngnix

Trước tiên bạn phải kiểm tra xem mình đang chạy Apache hay Ngnix server.

Để làm đều này bạn click chuột phải trên trình duyệt -> Inspect, hoặc đơn giản nữa là bạn nhờ bên hosting hỗ trợ.

Chuyển sang tab network, bên menu trái ngay dòng đầu domain click vào kéo xuống dưới đến tab Response Headers.

Ví dụ ở đây site này dùng LiteSpeed server thì nó sử dụng file .htaccess để lưu cấu hình giống Apache nhé.

Thêm Cache-Control và Expire Headers trên Apache

Trước tiên bạn cần tìm thấy file .htaccess trên máy chủ của mình, nếu vì một lí do đó bạn không thấy nó.

Thì có 2 lí do một là nó chưa được tạo hoặc đang bị ẩn đi, thì xem hướng dẫn này nhé -> cách tìm file .htaccess.

Bạn có thể kết nối với server thông qua FPT client hoặc vào File manager nếu hosting bạn có cPanel hoặc Direct Admin.

file htaccess sẽ nằm ngang hàng với các thư mục gốc của wordpress

Tiếp theo, bạn cần thêm cache-control and/or expire headers để bật bộ nhớ đệm của trình duyệt.

Điều này cho trình duyệt web biết nó sẽ lưu trữ các tài nguyên trang web của bạn trong bao lâu trước khi chúng bị xóa.

Bạn có thể thêm đoạn mã sau vào file .htaccess để áp dụng:

## EXPIRES HEADER CACHING ##

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 image/svg "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 3 days"

## EXPIRES HEADER CACHING ##

Đoạn code này đặt các ngày hết hạn bộ nhớ đệm khác nhau tùy thuộc vào mỗi loại file.

Sau đó, bạn có thể thêm dòng code sau để kích hoạt cache-control:

    Header set Cache-Control "max-age=96000, public"

Dòng code này đặt thời gian hết hạn cho bộ nhớ đệm, ví dụ trên, bộ nhớ cache sẽ hết hạn sau 90.000 giây.

Sau đó, trình duyệt web sẽ yêu cầu các phiên bản mới của file.

Thêm Cache-Control và Expire Headers trên Nginx

Nếu bạn đang sử dụng Nginx webserver, thì việc chỉnh sửa file cấu hình máy chủ sẽ phức tạp hơn.

Đầu tiên bạn sẽ cần xác định file cầu hình của Ngnix trên máy chủ của mình, mà cái này lại khác nhau trên mỗi control panel cài đặt.

Bạn gõ lệnh nginx –t  để kiểm tra hoạt động và đường dẫn của Nginx, lúc này hệ thống sẽ hiển thị ra đường dẫn file cấu hình Nginx của VPS

Ví dụ: File config của Nginx sẽ nằm trên đường dẫn như : www/server/nginx/conf/nginx.conf (nginx.conf chính là file cấu hình).

Sau đó bạn thêm đoạn code sau:

location ~* .(jpg|jpeg|gif|png|svg)$ {
  expires 365d;
}
 
location ~* .(pdf|css|html|js|swf)$ {
  expires 3d;
}

Dòng code này sẽ đặt thời gian hết hạn cho các loại file khác nhau tương tự như trên Apache

*Lưu ý: rằng hình ảnh được lưu trong cache lâu hơn HTML, CSS, JS và các loại tệp khác vì hình ảnh thường giữ nguyên.

Sau đó, bạn có thể thêm dòng code sau để kích hoạt cache-control:

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

Đoạn code này thông báo cho máy chủ biết các loại đinh dạng trên sẽ không thay đổi trong 14 ngày.

Okie vậy là bạn đã tiến hành fix lỗi Leverage Browser Caching xong.

Ngoài ra nếu bạn đang tìm nhiều cách khác để tối ưu tốc độ, hãy tham khảo bài hướng dẫn tăng tốc WordPress toàn tập nhé.

Nếu bạn có góp ý cũng như thắc mắc hãy để lại comment ở dưới bài viết này nhé.