Cách dễ dàng khắc phục cảnh báo về bộ nhớ đệm của trình duyệt trong WordPress

Tác giả NetworkEngineer, Tháng bảy 15, 2021, 12:29:08 AM

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 2 Khách đang xem chủ đề.

Cách dễ dàng khắc phục cảnh báo về bộ nhớ đệm của trình duyệt trong WordPress


Bằng cách khắc phục cảnh báo bộ nhớ đệm của trình duyệt bằng, bạn sẽ nhanh chóng tăng tốc trang web WordPress của mình và mang lại trải nghiệm tốt hơn cho khách truy cập trang web của bạn.

Trong bài viết này, mình sẽ hướng dẫn bạn cách dễ dàng khắc phục cảnh báo bộ nhớ đệm trình duyệt bằng   trong WordPress.

Bộ đệm trình duyệt trong WordPress 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. Khi một trang web tải, tất cả các tệp sẽ được tải riêng.

Điều này tạo ra nhiều yêu cầu giữa trình duyệt và máy chủ lưu trữ WordPress của bạn, điều này làm 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 web của bạn sẽ lưu trữ cục bộ bản sao của trang web của bạn. Điều này cho phép các trình duyệt tải các tệp phổ biến như biểu định kiểu, biểu trưng, ​​hình ảnh, v.v. nhanh hơn khi người dùng truy cập trang thứ hai trên trang web của bạn.

Điều này làm giảm tải tổng thể của máy chủ vì sẽ có ít yêu cầu hơn được thực hiện đến máy chủ thực tế và kết quả là hiệu suất trang web của bạn sẽ được cải thiện.

Bạn sẽ thấy Cảnh báo Trình duyệt Cache cho WordPress ở đâu?

Cảnh báo bộ nhớ đệm của trình duyệt tận dụng có nghĩa là bạn chưa bật bộ nhớ đệm của trình duyệt hoặc bộ nhớ đệm của bạn có thể được thiết lập sai cách.

Khi bạn đang chạy kiểm tra tốc độ trang web, bạn sẽ nhận được một báo cáo cho bạn biết những gì bạn có thể khắc phục để tăng tốc WordPress.

Nếu trang web của bạn hiện không sử dụng bộ nhớ đệm của trình duyệt, thì bạn sẽ nhận được cảnh báo để bật bộ nhớ đệm của trình duyệt.

Đây là cách nó có thể trông như thế nào khi xem kết quả của bạn từ công cụ thông tin chi tiết về tốc độ trang.


Cảnh báo bộ nhớ đệm của trình duyệt

Đôi khi bạn sẽ nhận được cảnh báo cho biết chính sách bộ nhớ cache hiệu quả của bạn không hoạt động.

Cả hai cảnh báo này đều đề cập đến lỗi khi thiết lập bộ nhớ đệm của trình duyệt.


Cảnh báo chính sách bộ nhớ đệm hiệu quả

Tận dụng bộ nhớ đệm của trình duyệt có nghĩa là kích hoạt và tùy chỉnh các quy tắc bộ nhớ đệm để tăng tốc trang web của bạn.

Chúng ta hãy xem cách dễ dàng khắc phục cảnh báo bộ nhớ đệm trình duyệt trong WordPress bằng hai phương pháp khác nhau.

Chỉ cần sử dụng các liên kết nhanh bên dưới để chọn cách bạn muốn sửa cảnh báo bộ nhớ đệm trình duyệt bằng trong WordPress.

  • Khắc phục cảnh báo bộ nhớ đệm của trình duyệt bằng bằng cách sử dụng một plugin.
  • Khắc phục cảnh báo bộ nhớ đệm của trình duyệt bằng bằng mã.

Phương pháp 1. Khắc phục cảnh báo bộ nhớ đệm của trình duyệt bằng với plugin WP Rocket WordPress.

WP Rocket là plugin bộ nhớ đệm WordPress tốt nhất trên thị trường. Nó rất thân thiện với người mới bắt đầu và có thể giúp bạn tối ưu hóa tốc độ trang web của mình, ngay cả khi không biết các thuật ngữ phức tạp về bộ nhớ đệm và tốc độ.


WP Rocket

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.

Để khắc phục cảnh báo bộ nhớ đệm của trình duyệt bằng với WP Rocket, tất cả những gì bạn phải làm là cài đặt và kích hoạt plugin.

Để biết thêm chi tiết, hãy xem hướng dẫn của  mình về cách cài đặt và thiết lập WP Rocket trong WordPress đúng cách.

WP Rocket sẽ tự động bật bộ nhớ đệm của trình duyệt và sửa đổi .htaccess của bạn với các quy tắc phù hợp.

Lưu ý: nếu bạn đang sử dụng lưu trữ web SiteGround, thì bạn có thể sử dụng plugin SiteGround Optimizer miễn phí để thay thế.

Nó có các tính năng gần giống như WP Rocket và nó sẽ tự động kích hoạt bộ nhớ đệm của trình duyệt cho bạn.

Phương pháp 2. Khắc phục cảnh báo bộ nhớ đệm của trình duyệt bằng cách thêm mã vào WordPress.

Phương pháp thứ hai liên quan đến việc thêm mã vào các tệp WordPress của bạn. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn dành cho người mới bắt đầu của  mình để dán đoạn mã từ web vào WordPress.

Phương pháp này không thân thiện với người mới bắt đầu, vì vậy vui lòng chỉ làm theo phương pháp này nếu bạn biết chính xác mình đang làm gì. Đối với hầu hết các chủ doanh nghiệp,  mình khuyên bạn nên sử dụng Phương pháp 1.

Như đã nói, chúng ta hãy xem cách khắc phục cảnh báo bộ nhớ đệm trình duyệt bằng bằng cách thêm mã vào WordPress.

Lưu ý: trước khi bạn tùy chỉnh mã WordPress của mình, mình khuyên bạn nên sao lưu trang web WordPress của mình. Để biết thêm chi tiết, hãy xem hướng dẫn của  mình về cách sao lưu và khôi phục trang web WordPress của bạn.

Xác định xem trang web của bạn đang chạy Apache hay Nginx?

Trước tiên, bạn cần tìm hiểu xem trang web của mình đang sử dụng máy chủ Apache hay Nginx.

Để thực hiện việc này, hãy mở trang web của bạn trong một tab hoặc cửa sổ mới. Sau đó, nhấp chuột phải và chọn tùy chọn 'Kiểm tra'.


Nhấp chuột phải và kiểm tra

Tiếp theo, nhấp vào tab 'Mạng' ở đầu trang. Bạn có thể cần phải làm mới trang để tải kết quả.


Nhấp vào mạng

Sau đó, nhấp vào tên miền của bạn trong cột 'Tên'. Nó phải ở đầu trang.


Nhấp vào URL trang web

Sau đó, trong phần 'Tiêu đề phản hồi', bạn sẽ thấy một mục được gọi là 'máy chủ' nơi loại máy chủ được hiển thị. Trong trường hợp này, trang web đang chạy trên máy chủ Apache.


Tìm loại máy chủ

Thêm Cache-Control và Expire Headers trong Apache.

Để khắc phục cảnh báo sử dụng bộ nhớ đệm của trình duyệt với máy chủ Apache, bạn sẽ thêm mã vào .htaccess của mình.

Để chỉnh sửa tệp này, bạn cần kết nối với tài khoản lưu trữ WordPress của mình bằng ứng dụng khách FTP hoặc công cụ quản lý tệp của máy chủ lưu trữ của bạn.

Sau khi kết nối, bạn có thể thấy .htaccesstệp của mình trong thư mục gốc của trang web.


.htaccess

Nếu bạn không thể tìm thấy nó, thì đừng lo lắng. Đôi khi tệp này có thể bị ẩn. Để biết thêm chi tiết, hãy xem hướng dẫn của  mình về lý do tại sao bạn không thể tìm thấy tệp .htaccess trên trang web WordPress của mình.

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 để 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.

Tiêu đề kiểm soát bộ nhớ cache cung cấp các chi tiết cụ thể cho trình duyệt web về cách bộ nhớ đệm sẽ được thực hiện.

Tiêu đề hết hạn cho phép lưu vào bộ nhớ đệm và cho trình duyệt web biết nó sẽ lưu trữ các tệp cụ thể trong bao lâu trước khi bị xóa.

Bạn có thể thêm mã sau vào .htaccess của mình để thêm các tiêu đề hết hạn:
   
Mã nguồn [Chọn]
## 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 các ngày hết hạn bộ nhớ cache khác nhau dựa trên loại tệp.

Sau đó, bạn có thể thêm mã sau để bật kiểm soát bộ nhớ cache:
   
Mã nguồn [Chọn]
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
    Header set Cache-Control "max-age=96000, public"
</filesMatch>

Mã này đặt thời gian cho thời điểm bộ nhớ cache sẽ hết hạn. Trong 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 tệp.

Thêm Cache-Control và Expire Headers trong Nginx.

Nếu bạn đang sử dụng máy chủ web Nginx để lưu trữ blog WordPress của mình , thì bạn có thể chỉnh sửa tệp cấu hình máy chủ để khắc phục lỗi bộ nhớ đệm của trình duyệt.

Cách bạn chỉnh sửa và truy cập tệp này tùy thuộc vào máy chủ lưu trữ của bạn, vì vậy bạn có thể liên hệ với nhà cung cấp dịch vụ lưu trữ nếu bạn cần trợ giúp truy cập tệp.

Sau đó, bạn cần thêm mã sau để thêm các tiêu đề hết hạn:
   
Mã nguồn [Chọn]
location ~* \.(jpg|jpeg|gif|png|svg)$ {
  expires 365d;
}
 
location ~* \.(pdf|css|html|js|swf)$ {
  expires 3d;
}

Mã này sẽ đặt thời gian hết hạn cho các loại tệp khác nhau. Lưu ý rằng 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 mã sau để thêm tiêu đề kiểm soát bộ nhớ cache:
   
Mã nguồn [Chọn]
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 14d;
 add_header Cache-Control "public, no-transform";
}

Mã này đặt thời gian bộ nhớ cache sẽ hết hạn. Nó cho máy chủ của bạn biết rằng các loại tệp ở trên sẽ không thay đổi trong 14 ngày.

Nếu bạn đang muốn tăng tốc WordPress hơn nữa, hãy nhớ xem hướng dẫn của  mình về cách tăng tốc độ và hiệu suất WordPress.

Mình hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng sửa lỗi cảnh báo bộ nhớ đệm trình duyệt bằng   trong WordPress. Bạn cũng có thể muốn xem danh sách cuối cùng của  mình về các lỗi WordPress phổ biến nhất và cách khắc phục chúng, đồng thời chuyên gia của  mình chọn các công cụ và plugin SEO tốt nhất để nhận được nhiều lưu lượng truy cập hơn.