Hướng dẫn fix lỗi Leverage Browser Caching Warning trên WordPress
Source: Hướng dẫn fix lỗi Leverage Browser Caching Warning trên WordPress
Nếu bạn đang tìm cách khắc phục lỗi Leverage Browser Caching trên WordPress
Thì trong bài viết này tôi sẽ chỉ cho bạn một cách đơn giản nhất.
Nó sẽ giúp trang web của bạn tải nhanh hơn và mang lại trải nghiệm tốt hơn cho khách truy cập.
Bộ nhớ đệm trình duyệt là gì?
Bộ nhớ đệm của trình duyệt là một cách để cải thiện tốc độ tải trang web của bạn.
Thông thường khi truy cập vào một trang web, tất cả các tệp sẽ được tải riêng.
Điều này tạo ra rất nhiều yêu cầu giữa trình duyệt và máy chủ của bạn, dẫn đến tăng thời gian tải trang web.
Khi bộ nhớ đệm của trình duyệt được bật, trình duyệt sẽ lưu 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 tệp như kiểu, biểu trưng, hình ảnh, v.v. nhanh hơn khi người dùng truy cập vào trang thứ hai của trang web của bạn.
Tận dụng lỗi bộ nhớ đệm của trình duyệt trên WordPress
Đòn bẩy lỗi Bộ đệm trình duyệt có nghĩa là bộ nhớ cache của trình duyệt của bạn không được bật hoặc không được đặt chính xác.
Bạn có thể kiểm tra bằng các công cụ kiểm tra tốc độ trang web như GTmetrix hoặc GG PageSpeed Insight.
kết quả trên GG PageSpeed Insight
Lỗi Cung cấp nội dung tĩnh với chính sách bộ nhớ cache hiệu quả giống với Tận dụng bộ nhớ đệm trình duyệt.
Ở đây, các công cụ đang khuyến khích bạn cung cấp nội dung tĩnh với bộ nhớ đệm.
Trong bài viết này, mình sẽ hướng dẫn các bạn khắc phục lỗi này theo 2 cách sau.
Phương pháp 1: Sử dụng plugin WP Rocket để sửa lỗi Leverage Browser Caching
WP Rocket là một trong những plugin bộ nhớ đệm tốt nhất trên thị trường hiện nay.
Đối với những người dùng mới chưa có nhiều hiểu biết về kỹ thuật thì theo tôi, bạn nên sử dụng wp rocket thay vì caching các plugin khác.
Nó có đầy đủ tính năng, giao diện thân thiện với người dùng, chỉ cần bật nó lên để 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 của trình duyệt (với tệp .htaccess)
Mình cũng đã có bài đánh giá chi tiết về WP Rocket, nếu bạn nào chưa biết có thể tham khảo.
Phương pháp 2: Khắc phục lỗi Leverage Browser Cache với đoạn mã sau
Trước khi sử dụng phương pháp này, hãy đảm bảo rằng bạn đã chỉnh sửa file trên wordpress và có bản sao lưu đầy đủ.
Đối với người 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ờ người am hiểu).
Nếu bạn vẫn đang đọc, hãy bắt đầu sửa lỗi bằng đoạn mã sau.
Kiểm tra xem đang chạy Apache hay Ngnix
Trước tiên, bạn phải kiểm tra xem bạn đang chạy máy chủ Apache hay Ngnix.
Để làm điều này, nhấp chuột phải vào trình duyệt -> Kiểm tra hoặc chỉ cần yêu cầu bên lưu trữ hỗ trợ.
Chuyển sang tab mạng, trên menu bên trái ngay đầu miền, nhấp và cuộn xuống tab Tiêu đề phản hồi.
Ví dụ, ở đây trang này sử dụng máy chủ LiteSpeed, nó sử dụng tệp .htaccess để lưu cấu hình như Apache.
Thêm Cache-Control và Expire Headers trên Apache
Trước tiên, bạn cần tìm tệp .htaccess trên máy chủ của mình, nếu vì lý do nào đó mà bạn không thấy tệp đó.
Thì có 2 nguyên nhân một là nó chưa được tạo hoặc bị ẩn thì xem bài hướng dẫn này -> cách tìm file .htaccess.
Bạn có thể kết nối với máy chủ qua FPT client hoặc vào File manager nếu có hosting cPanel hoặc Direct Admin.
Tệp htaccess sẽ cùng cấp với thư mục gốc của wordpress
Tiếp theo, bạn cần thêm tiêu đề kiểm soát bộ nhớ cache và / hoặc hết hạn để kích hoạ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 vào bộ nhớ cache 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 mã sau vào tệp .htaccess của mình để áp dụng:
## 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 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" </IfModule> ## EXPIRES HEADER CACHING ##
Mã này đặt ngày hết hạn bộ nhớ cache khác nhau tùy thuộc vào loại tệp.
Sau đó, bạn có thể thêm dòng mã sau để bật kiểm soát bộ nhớ cache:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=96000, public"
</filesMatch>
Dòng mã này đặt thời gian hết hạn cho cache, trong ví dụ trên, 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 tệp.
Thêm Cache-Control và Expire Headers trên Nginx
Nếu bạn đang sử dụng máy chủ web Nginx, thì việc chỉnh sửa tệp cấu hình máy chủ sẽ phức tạp hơn.
Trước tiên, bạn sẽ cần xác định tệp cấu hình Ngnix trên máy chủ của mình, tệp này khác nhau đối với mỗi bảng điều khiển được cài đặt.
Ví dụ, tệp cấu hình của Nginx sẽ nằm trên đường dẫn như: www / server / nginx / conf / nginx.conf (nginx.conf là tệp cấu hình).
Sau đó, thêm mã sau:
location ~* .(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* .(pdf|css|html|js|swf)$ {
expires 3d;
}
Dòng mã này sẽ đặt thời gian hết hạn cho các loại tệp khác nhau tương tự như Apache
*Ghi chú: hình ảnh đó được lưu trong bộ nhớ 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 mã sau để bật kiểm soát bộ nhớ cache:
location ~* .(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 14d;
add_header Cache-Control "public, no-transform";
}
Mã này cho máy chủ biết rằng các loại định dạng trên sẽ không thay đổi trong 14 ngày.
Okie vậy là bạn đã sửa được lỗi Leverage Browser Caching.
Ngoài ra, nếu bạn đang tìm kiếm thêm cách để tối ưu hóa tốc độ, hãy xem hướng dẫn tăng tốc WordPress hoàn chỉnh của chúng tôi.
Nếu có góp ý hay thắc mắc gì, hãy để lại bình luận bên dưới bài viết này.
Via: sieucoder.com
from sieucoder.com https://ift.tt/3pmuY7g
via Sieucoder.com
Nhận xét
Đăng nhận xét