Table of Contents
What is Browser Caching?
When somebody visits a page, the browser needs to download all the resources server on that domain from the server. These include HTML, CSS file, JS, images and any other assets to load and display the current page.
Rather than downloading everything over and over again by is called a Web Cache. This is a feature used by browsers to ‘temporarily store’ or ‘cache’ web page assets on the device’s local storage. This storage or data is called ‘web cache’ or ‘HTTP cache’.
This also helps reduce bandwidth consumption by webserver and also reduces the load on the server.
What are cache files?
Cache files are the ones that are downloaded for temporary usage for visiting a website for particular period of time. It will load faster because of the downloaded cache files.
What is in the cache of a browser?
Browser cache is temporary storage for file downloaded by the browser to display a website. It includes HTML, cascading style sheets (CSS), JavaScript, images and any other multimedia content that can be cached.
Leverage browser cache warning
By leveraging browser caching we actually do is instruct the browser to extend the lifetime or expiry date of the resources which are downloaded by the visitors and consequently optimize performance. By extending the lifetime of the cache you are making sure that your visitors do not need to wait to download the same things everytime they visit your site.
The change actually does, is set content expiry dates by adding cache control headers and ETag headers in HTTP headers. The Cache-Control header declares the cache period of a particular file or type of file. The ETag is then used to verify any changes which exist between the cached and requested resources.
The setting allows the specific period in days, months or years to store the cache locally.
Change htaccess to Leverage Browser Caching in WordPress
To set the expiry time of resources such as images and CSS files, this requires a modification to your htaccess file, which is found in the root of hosting server. This is done by changing the expire headers to boost performance.
To simply access hosting CPanel with file editor, find the htaccess file and add the following to the bottom of the file. Setting assets which refresh quickly such as HTML of page to expire after 600 seconds, while we change things such as CSS and JavaScript to only expire one a month.
This is the effective way to leverage browser caching for WordPress or other websites which make use of an htaccess file.
Leverage Browser Caching WordPress plugin
To avoid against the htaccess which actually break the site if you make a small mistake, you need to install a plugin which takes care of handling all of this problems.
- Download the plugin
- Go to the dashboard of your WordPress then visit: dashboard>plugins>add new
- Search for “leverage browser caching” or click upload plugin and search the file you downloaded
- Click install now.
- Activate the plugin.
To make the sites faster, plugins will help make this happen. By implementing these changes, the score on such sites as GTMetrix will increase significantly.
Leverage browser caching with htaccess in wordpress
- Step 1: locate your htaccess file.
- Step 2: paste in the code. Paste these into your htaccess file.
How to leverage browser caching of wordpress website via htaccess?
The way to fix warnings is to install any of the wordpress caching plugins. The most popular caching plugins are total W3 Cache, WP Super Cache and WP Fastest Cache. The warnings can be resolved by adding Expires headers code to htaccess file.
- Log into cPanel
- Under files section, select file manager menu.
- cPanel will popup a message asking you where you would like land within your website directories. In the same window, you will see the checkbox asking if you would like to show hidden files. Check the checkbox Show Hidden Files and click go.
- Under public _html folder of the website, find and edit the file called htaccess.
- Paste the following code into htaccess file at the end of your existing content.
Conclusion
Leverage browser caching helps in improving the web performance testing score. These are only for building basic guidelines and understanding among WordPress users.
