One of the most frequently suggested trick to speed up a WordPress site instantly is by leveraging the browser caching. For instance, Google Page Speed test suggests to leverage browser caching as one of first thing to optimize your WordPress blog.
By default when someone opens a WordPress website for the first time, the web browser caches all the images on the site locally. Now if you visit any other page on the same site and it uses some of the same images, then they will not be fetched again from the server. The local copies of the images will be used. This reduces the number of HTTP requests, thus speeding up your WordPress site. This is called browser caching.
The issue with the default browser caching is that web browsers cache the images and other media files, for a specific website, only for 24 hours. After that it deletes the locally cached images and fetches the images from the web server again.
If you get repeat visitors on your website, or if you run a WordPress site that uses a lot of images, like a photography blog or a wallpaper site, you can tell the web browser to cache the images for a relatively longer time. This procedure is called leveraging of browser caching.
You can easily leverage browser caching using the .htaccess file in the root folder of your WordPress installation on your web server. Note that its only applicable for Apache servers.
The first method to leverage browser caching is by using the cache control header in the .htaccess file. Add this code to your .htaccess file,
1 2 3 4 | # Image and Flash content Caching for One Month <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$"> Header set Cache-Control "max-age=2592000" </FilesMatch> |
When a web browser starts to fetch the contents of a website from a web server, it first reads the .htaccess file for cache control headers. If there are no cache control headers specified in the .htaccess file, then the default cache time of the browser is used. In the above code, the cache control header is set to one month for flv, gif, jpg, jpeg, png, ico and swf files. So the web browser will keep these files cached for 1 month.
Another way to leverage browser caching is by using the ExpiresByType directive in the .htaccess file. To use this method, add this code to your .htaccess file,
1 2 3 4 5 6 7 8 9 10 11 12 | ## EXPIRES CACHING BY THEMEPREMIUM ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule> ## EXPIRES CACHING BY THEMEPREMIUM ## |
This code works the same way as the code above. Adding this code to the .htaccess file instructs the web browser to cache the specified files for 1 year.
Note that if a user clears its browser’s cache manually, then all the caches files will be deleted, irrespective of leveraging of browser’s cache. But this factor is beyond our control.
Do post a comment below if you face any issues issues while you try to leverage browser caching for WordPress using the .htaccess file.