Ankita
Member • Oct 4, 2013
Leverage Browser Caching For Wordpress Using .htaccess File Code
One of the most common PageSpeed Insight Suggestion for a Wordpress blog is - Leverage Browser Caching. If you haven't already done this for your wordpress blog, it's time to do it right away.
The Google PageSpeed improvement suggestion tells you that - "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. So you should Leverage browser caching for the following cacheable resources: ... "
So what exactly is Browser Caching?
Well, using browser caching, we're explicitly instructing browsers to hang onto particular files for a specified period of time. When the file is needed again, the browser is to pull from its local cache instead of requesting it from the server again.
Why is it important?
Running a website without caching in place makes as much sense as driving to the store for a glass of water every time you’re thirsty. Ok, you get it.
What is .HTACCESS file? Why does it need editing?
The name stands for “hypertext access”. The file provides a way to do things to your webserver that would normally be done in configuration files of your webserver. That access allows you the webmaster to do many things that you may not have known were possible.
How to locate your .htaccess file?
Wherever you upload things to your webhost (like a file manager) is where you will find it.
Typically however the .htaccess file will be on the “root” level or the “www” folder. Basically wherever you put your files to be displayed on the web, that will be the most likely place to find the .htaccess.
There's a thing call ExpiresByType directive. This is used to tell browsers which files to cache and how long to hang onto them.
All you have to do is add the following code on the TOP of all the content in your .htaccess file -
If you have any questions, feel free to ask them in the replies below.
The Google PageSpeed improvement suggestion tells you that - "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. So you should Leverage browser caching for the following cacheable resources: ... "
So what exactly is Browser Caching?
Well, using browser caching, we're explicitly instructing browsers to hang onto particular files for a specified period of time. When the file is needed again, the browser is to pull from its local cache instead of requesting it from the server again.
Why is it important?
Running a website without caching in place makes as much sense as driving to the store for a glass of water every time you’re thirsty. Ok, you get it.
What is .HTACCESS file? Why does it need editing?
The name stands for “hypertext access”. The file provides a way to do things to your webserver that would normally be done in configuration files of your webserver. That access allows you the webmaster to do many things that you may not have known were possible.
How to locate your .htaccess file?
Wherever you upload things to your webhost (like a file manager) is where you will find it.
Typically however the .htaccess file will be on the “root” level or the “www” folder. Basically wherever you put your files to be displayed on the web, that will be the most likely place to find the .htaccess.
There's a thing call ExpiresByType directive. This is used to tell browsers which files to cache and how long to hang onto them.
All you have to do is add the following code on the TOP of all the content in your .htaccess file -
## EXPIRES CACHING ##That's all.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" ## EXPIRES CACHING ##
If you have any questions, feel free to ask them in the replies below.