Hashtag Systems | How to Leverage browser caching in wordpress websites?
10289
post-template-default,single,single-post,postid-10289,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-3.4,wpb-js-composer js-comp-ver-5.5.4,vc_responsive

Blog

How to Leverage browser caching in wordpress websites?

Blogs   |  

Yes, you have come across this term – Browser Caching – while speaking about the page speed of a website. Before digging deeper, let’s take a look at what this means – Leverage browser caching means use to maximum advantage of the caching of a website. By this means we could increase the page speed of a wordpress site to a considerable level.

What does Browser Caching mean?

In order to properly display a webpage, the browser has to download all the files (HTML, CSS, JS and Images) on page load. Some websites are lightweight, provided the content is limited. But consider a social media site like Facebook, it is huge and contains several contents, images, scripts, etc. and thus several megabytes large. Imagine you are on a slow internet connection and the large files/images take too long to display – no doubt you will leave the site. Coming to the mechanism that happens on the backend in this case. The server gets separate requests for each file and content and the simultaneous requests make the server do extra work which in turn slows down the speed of the page. 

Here comes the importance of storing the files locally in the user’s browser, in which case the first visit takes the same time to load. When the same user revisits the site, some of the files are already stored locally and need not request for the same. I hope you understand the underlying effect on page speed here. The amount of data the user’s browser has to download is less, and fewer requests need to be made to the server. And, the result? – Decreased page load times.

Leverage Browser Caching for Images, CSS and JS

You can specify how long the browsers should keep images, CSS and JS stored locally, so that the user’s browser will download less data while navigating through the pages, which will improve the loading speed of your website.

To enable it, you need to edit your HTTP headers to set expiry times for certain types of files or configure the apache to serve the appropriate headers (add the following lines to your .htaccess file):

## 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 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 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 (ie., CSS files). When you are done save the file as is and not as a .txt file.

If you are using any form of CMS, cache extensions or plugins might be available to do this work.

How does leverage browser caching works in WordPress:

Creating an aesthetic wordpress website using themes and other plugins is not supreme if the site is too slow to load and no doubt, the user will leave the site within seconds. Quality content and fast-loading pages are important when it comes to a website to grab the attention of any users. Hence, the easiest way to make a faster website is through leverage browser caching.

 

Let’s see what happens when a user accesses a certain domain:

  • The user types in the site URL in the address bar.
  • The browser generates an HTTP request to the server where the site is hosted.
  • The server collectively sends all the data to the user where he finds a delay. To prevent this slowdown, the site owner can reduce the size of the scrips, optimize the image sizes, optimize CSS and so on.
  • When the data is transmitted, the browser displays the site and the user gets to see it. The process repeats when the user accesses each page. Sometimes, the number of server requests increases which leads to low performance. This is why we need to optimize the site to make it faster.

 

Cache content is used in both web browsers and software applications. It is stored temporarily on your local disk. This data is called ‘ Web Cache’ or ‘HTTP Cache‘. When you visit the same website, the browser will upload the information stored on your local computer and download the content from the website.

You can check whether your wordpress website leverage browser caching properly by using a specific tool, the most popular one is Google Pagespeed Insights

Type in the URL of your website and then click on Analyze. It gives you a report on the score your website has in terms of optimization for mobile and desktop separately. The score ranges from 0 to 100, and you will also get suggestions on how to improve your website after. One of the most common suggestions is to opt for Leverage Browsing Caching in WordPress.

Server Caching Vs Browser Caching:

A wordpress user should have an idea about server caching – the process which involves generating cached web pages for the website through a web server. The steps above represent website caching, which is mainly on the server-side. There are certain by which we can improve the server caching system. The most recommended option would be updating headers on Apache. Using WordPress plugins would be the next step, and adding CDN follows it.

List of a few plugins that can be used for browser caching:

 

  • W3 Total Cache – WordPress plugin
  • WP Fastest Cache
  • Cache Enabler – WordPress Cache
  • Yoast SEO to edit the .htaccess file

 

You may not notice the changes soon after installing a plugin. This delay is because of the stylesheet file.  The browser cache that was already saved in your computer will prevent you from seeing the changes you have done. To properly see the website after making the required changes, it would be recommended to visit it using the Incognito mode of the browser. By using this, you won’t use cache resources and the changes could be seen properly. 

The method you choose for leverage browser caching doesn’t matter. The only thing that matters is to see it in action and you can choose any comfortable method to get there. Alter the .htaccess file or use a WP plugin, you will get better loading experience by activating the Leverage Browser Caching.

Disadvantages:

The drawback of enabling browser caching is the users may not get the updated version of the website if the parameters are set too long on certain files.

Need help in getting these stuff done? Don’t hesitate to Contact us. We would recommend you leave this stuff in the hands of Taggers. We will help you with our tips and tricks to get your website run smoothly.


« |
No Comments

Post A Comment