While the internet speed is increased in the whole world in the last 10 year, People tend to engage on websites which load quickly in their browser. Google and other major search engines started favouring websites which load fast in user’s browser. Several industry leaders in internet marketing, researched and found that users won’t wait for a website which take 3 or more seconds to open in their browser.
Leverage browser cache is term used by professionals to optimize PageSpeed for their website. Those who want to know “How to enable browser cache” on their WordPress website, will surely find this article really helpful.
I personally answer questions in the comments section. So never hesitate to ask, if you have any question in mind.
1. What is Browser Cache
Leveraging Browser Cache means configuring your web host to let browsers download only necessary files, when someone uses your website.
When someone try to browse a website using his favorite browser, the browser starts downloading the website from web server. During this process, browser not only downloads the HTML of the given web page, it also download some necessary assets with it. These assets are used to style and design the page and sometime enable some javascript functions in it.
Our internet browsers download all these files together and build the page in our browser, so we could see the designed page with other assets attached. Each time our browser download all these files from the webserver to display us the fresh contents. Browser cache allows your browser to ignore parts of web pages which are previously downloaded. Hence, we experience good website download speed the 2nd time we use the same website. Mainly, the browser cache will ignore web page assets when we browse a website second time. Here is a list of web page assets which are downloaded with the web page.
- HTML pages
- Javascript files
- CSS (stylesheets)
- Images
- Videos
- Fonts
- Other files (DOC, PDF, RTF, TXT)
2. How Browser Cache Work
There is a hidden communication between the users’ browser and web server. When you load a webpage in your browser, the web server tells the browser when the file being downloaded was last modified on server.
The last modified time plays a major role in leveraging browser cache. While browser downloads each file to build a page, the web server will send the last modified timestamp with the file.
Browsers download and keep all web pages and assets in temporary internet files. The next time when you try to browse the same website, your browser will compare the file on server with the local version in temporary internet files. And it will ignore the remote files from the download queue.
Your browser has built-in function to ignore files from the download queue, which were not modified on the server, since the browser downloaded it last time.
3. How Leveraging Browser Cache Works
The web browsers has built-in cache called “browser cache”. You can leverage the power of browser cache to increase PageSpeed of your website. To accomplish this task, you need to figure out the files which are not often modified on your web server. You can further configure your web server to send “not-changed” header when the website is browsed.
If server sends the “not-changed” header when someone’s browser request it, the browser will ignore that file. This way the users browser only downloads necessary pages and assets which are still in browser cache and not changed on the server.
4. Leverage Browser Cache in WordPress Using .htaccess File
You can configure your webserver to leverage the power of browser cache. This configuration is normally done using a file on your server, called “.htaccess“. To configure your webserver using this method, follow the following steps.
- Open your website’s home directory using FTP software.
- Open and edit the file in your home directory.
- public_html->.htaccess
- Put the following code and save file. You have made the right configuration now. Yay!!
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A0 <FilesMatch "\.(txt|xml|js)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(css)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$"> ExpiresDefault A691200 </FilesMatch> </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(txt|xml|js)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(css)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$"> Header set Cache-Control "max-age=691200" </FilesMatch> </IfModule>
5. Configure Browser Cache with WordPress Plugin
If you are unable to edit .htaccess file and put the above code yourself, you can always try some WordPress plugins to configure your server. This method is not only easy and practical for beginner WordPress users, its also help them control other server behaviours as well.
WP SuperCharge plugin does for you the same. If you want to optimize your blog page load speed, this plugin can do it with a 1-click method. They claim that you can do all the tedious work with 1-click and optimize each and everything needed for your WordPress blog to load on super speed.
Humming Bird plugin helps you manually configure your blog within WP Admin. This plugin also allows you to control leveraging browser cache feature. So your blog readers will be able to quickly load your blog posts in their web browser.
6. Final Thoughts
Leveraging browser cache can help you speed up your website or blog. This enables and configure your server to send special headers to user’s browsers which will enable the browser to download only necessary files to build a web page and show to the user. Browser cache can be set through editing .htaccess file or using some WordPress plugins to manage cache.
