Leverage Browser Caching
Every time HTTP request a browser loads a webpage it has to download all the web files data to properly display the page to users. This includes all the HTML, CSS, JavaScript and images. The large files take longer to load and can be especially painful if you’re on a slow internet connection or a mobile device. Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, only further reducing your page speed.
Browser caching can help by storing some of these files locally in the user’s browser. Their first visit to your site will take the same time to load, however, when that user revisits your website, refreshes the page, or even moves to a different page of your site, they already have some of the files they need locally. This means the amount of data the user’s browser has to download is less, and fewer requests need to be made to your server.
How does it work?
Leverage Browser caching works by marking certain pages, or parts of pages, as being needed to be updated at different intervals. Your logo on your website, for instance, is unlikely to change from day today. By caching this logo image, we can tell the user’s browser to only download this image once a week. Every visit that user makes within a week would not require another download of the logo image. By the web server telling the browser to store these files and not download them when you come back saves your users time and your web server bandwidth.
How to Leverage Browser Caching
To enable browser caching you need to edit your HTTP headers to set expiry times for certain types of files. To enable it, add those lines to your .htaccess file:
<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 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 2 days”
</IfModule>
## EXPIRES HEADER CACHING ##
Depending on your website’s files you can set different expiry times. If certain types of files are updated more frequently, you would set an earlier expiry time on them. When you are done save the file as is and not as a .txt file.
[…] 14.Leverage browser caching: Browser caching stores webpage resource files on a local computer when a user visits a webpage. When a web browser displays your webpage it has to load several things like your logo, your CSS file, and other resources. Browser caching saves the resources that the browser has already loaded. When a visitor goes to another page on your website your logo, CSS files, etc. do not need to be loaded again, because the browser has them saved. For more about browser caching go to our post : Leverage browser caching […]