How to eliminate Leverage Browser Caching Issues on a WordPress website which can create some issues on the Google Page speed insights, GTMetrix and or Pingdom. This error can increase the load time of your website. There are several ways to resolve this issue including a Non-Tech Version by using a WordPress plugin and a developer version by adding a .htaccess file conditions to handle the requests by the server automatically.
This rule triggers when PageSpeed Insights detects that the response from your server does not include caching headers or if the resources are specified to be cached for only a short time.
The Gtmetrix state the error something like this:
Leverage browser caching for the following cacheable resources:
- https://www.example.coom/wp-content/uploads/2020/11/xxxxxx.png (expiration not specified)
For those who've no idea about what the Leverage browser caching is, the simplest definition of explaining the concept is that caching represents the amount of time that browser will store that file ( or cacheable resources) locally available on a website.
These resources include images, Javascript, CSS and others. Whenever a user access the website, the cacheable resources which are stored on the computer are uploaded back. The loading speed of the website is hence improved visibly. This is the reason why people want to use Leverage Browser Caching in WordPress sites.
Difference Between server caching and browser caching:
A server caching process involves generating cached web pages for your website through the webserver. There are some ways in which you can improve the server caching system. The most recommended option would be updating headers on Apache. Using WordPress plugins would be the next step, and adding CDN follows it. The most favourable and popular CDN is Cloudflare as their response time is much faster than compared to other servers.
In order to enable the Leverage Browser Caching on the WordPress website, we can use the code. It's not that much difficult as we think it is. We just have to edit the .htaccess file, add a given piece of code and that's it. Leveraging Browser caching with .htaccess file is the easiest and most effective method we all should learn about.
The best and recommended way is making the most out of both server-side and browser caching is to use a managed WordPress hosting, which pre-configures all the necessary settings for you.
In order to Enable Leverage Browsing Caching in WordPress manually by doing these steps:
- Add Expires Headers
- Add Cache-Control Headers
- Turn ETags off
Todo that, we need to follow the following steps:
- Access the website files by going to your cpanel > public_html > .htaccess file > Click on Edit
- Add the Leverage Browsing Caching code in your .htaccess file:
#Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "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 application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end
The settings included in the code above include a 600-second refresh/expiration time for HTML, and one month for CSS and JavaScript. The purpose of this expiration period is to avoid having your visitors redownload the assets too often. If you perform changes in terms of assets more often you can change the period according to your needs.
3. Add Cache-Control headers via Apache:
Copy the code below:
# BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </ifModule>
Setting an expiry date or maximum age in the HTTP headers is no longer required because it was already set during the previous step which means you don't need to repeat it here.
4. Turn Etags off
Etags stands for Entity Tags and they refer to new versions of cached files. Because you have already set cache-control headers, there is no need to use ETags, so we can switch them off to improve the loading times. Add the following piece of code to the .htaccess file:
<IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None
Save the .htaccess file and you're done with the optimization part.
Leverage Browsing in WordPress using plugins:
Tweaking the .htaccess file where you don't need it can ruin your entire website. Making one single mistake will lead to blank pages and errors, so it is perfectly understandable if you don't want to alter the file on yourself.
Luckily, there are plugins that can be useful, without you needing to learn how to enable Leverage Browser Caching in WordPress manually. Installing a plugin can be done like this:
- Download the plugin " Leverage Browser Caching "
- Navigate to Dashboard, Plugins and Add New
- Find "Leverage Browser Caching"
- Click Install Now
- Activate the plugin
- Test your website
Comments
Post a Comment