Hello Friends, Today I am going to share how to improve your website performance and how to reduce website load time.
Today I am going to tell you about Leverage browser caching.
Leverage browser caching : – Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network, which reduces load time. To do this we can specify expiry for resource in server’s .htaccess file so that resources would be loaded from local disk instead of server till expiry time.
So here is the code which you can write in .htaccess file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
## EXPIRES 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 text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ## |
In the code you can see we can define different expiry time for different type of resources.
1 2 3 4 |
ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" |
Here these four lines of codes are for image types
1 |
ExpiresByType text/css "access 1 month" |
Here we are setting expiry for css files.
1 2 |
ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" |
Here we setting expiry for html and pdf files.
1 |
ExpiresByType text/x-javascript "access 1 month" |
Here we setting expiry for javascript files.
1 2 |
ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" |
Above two lines of codes are for flash files and icon images.
1 |
ExpiresDefault "access 1 month" |
This line sets expiry for all other resources.
There is another method also for setting expiry in .htaccess file
1 2 3 4 |
# 1 Month for most static assets <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch> |
In .htaccess file # is used for comment so the first line is ignored here.
1 |
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> |
Above tells which files types to be chached.
1 |
Header set Cache-Control "max-age=2592000, public" |
Header set Cache-Control is setting headerÂ
max-age=2592000 is defining expiry or max-age of resources and public just defining it is public
References
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
https://varvy.com/pagespeed/leverage-browser-caching.html
Thanks Please share if you like
Comments