Home
Blogger

How to Configure Cache-Control for Blogger and WordPress Theme Images, CSS and JavaScript?

htaccess leverage browser caching for images, video, audio, css and JS. Explore how to leverage Browser Caching for Images, CSS and JS in Blogger BlogSpot. Learn how to Fix the Leverage Browser Caching Warning in WordPress. How to use expire header caching?
The most effective cache feature for page speed is caching web browser. Most of the static files that are used on web pages can be saved on the user’s device for future access.

Faster loading time is the key to engage more visitors with our websites and blogs. 

 If your website takes a longer time to load, then visitors will switch to another site straight away. Due to slow loading speed, every year a website loses 28% of visitors. 

 And in the case of returning visitors, the statistical data is horrible, because they do not want to revisit that site. 

There are many accumulated little tasks to do for the improvement of our website loading speed but among them Leveraging Browser Cache is important. 

 Probably you don’t know or have little knowledge regarding Leveraging Browser Cache. So few questions always buzzing in your brain that 
  • How to leverage browser caching for static HTML assets? 
  • How to fix the leverage browser caching in WordPress? 
  • How to use header expire feature or leverage browser caching in Blogger site? 
Everyday many queries made by website owners on leverage browser caching in different platforms like PHP, Magento, java-based projects. Generally, the whole caching process made in a web browser, but modern browsers are more efficient and optimized in the website cache controlling system, even capable to handle all external resources, data pre-fetching, etc. 

 So many webmasters argued that using the expiring header feature is pointless. But it has good value in terms optimize your site for search engines.

All the browsers work independently and users don’t have enough control over them. By implementing and using header expire or cache controlling feature we can leverage browser caching for Images, CSS, JS, and other media files. 

The concept of Leverage browser caching is unknown to many webmasters but this can significantly improve your website or Blog loading time. It helps to reduce the page loading time for repeat visits. 

Leverage browser caching to make your website faster

You can check the leverage browser caching status of your site by using Google PageSpeed Insights, Thinkwithgoogle, and GTmetrix tools. Whatever the CMS platform you are using, all of us should overcome this issue. 

What is Browser Caching? 

When we visit a website by using browsers like Internet Explorer, Google Chrome, Firefox, Opera, etc. then every time it loads all the components of the website like images, videos, HTML code, CSS code, and JavaScript. 

 If your website containing heavy media files and a large script of HTML, CSS, and JavaScript then logically it will take time to load. 

Today almost all major browsers use caching features to give a smooth user experience to the users. Browser cache helps to temporarily store some files in your browser locally, so when the first time you visit a website then it loads everything from a website but when you revisit the same site then it doesn’t need to load everything, because the browser’s cache already stored everything in the first visit. 

 Even if you refresh the page or visit a different page it will work like same way later until the expiration of the header. 

What is leverage browser caching? 

Leverage browser cache means the controlling feature of your web browser cache. Through this technique, you can specify how long a web browser should store images, CSS code, and JS files in the user’s device. 

As a result, when you surf the same website again then it will download less data while navigating through your pages. Ultimately this will improve the loading speed of your website. 

Through leverage browser caching we can Change the request headers of the resources to use caching. 

Also, this will optimize the overall caching strategy of any website. Remember that caching will allow a browser to store frequently requested files on the user’s device like PC, Smartphone, and Tablet for a preset period of time. When you enable caching then the subsequent page loads more efficiently. 

Benefits of leverage browser caching 

There are certain benefits you will get after Leveraging the browser cache. Those are as follows 
  • Your web page overall loading time will significantly improve. 
  • This technique will ask the website visitors to save and reuse the files, which is included in your website. 
  • This will significantly reduce page loading speed for returning visitors. 
  • Leverage Browser Caching will help to load the website’s Images, other media files, CSS and JS files without downloading them every time, because it will pick the file from the browser cache. 
  • It will reduce the server response time to less than 200ms. 
  • It will save time for the website visitors. 
  • It can also save the bandwidth of the webserver. 

Leverage Browser Caching in for Images, CSS and JS to make Blogger Theme Faster

To get more page view, we should focus on improving page loading speed. If you are using Blogger content management system then you might be worried about leverage browser caching issue, because users have less control over it. Moreover, the blogger platform automatically controls the browser cache. 

 Every blogger theme loads with many unnecessary render-blocking files like CSS bundle, authorization CSS and JS files on each visit. For that reason, blogger sites take a longer time to load and visitors are getting away. 

In this tutorial, I will show you how to control cache in Blogger Site? Please follow the below steps: 

Step #1: Log in to your Blogger BlogSpot site and go to Blogger dashboard. 

Step #2: Select Theme tab and from the top left down arrow Click Edit HTM button 

Step #3: Find the opening header  <head> tag.  at the top of the HTML editor. 

Step #4: Now add the below code block right after opening the header.
 
<!-- Cache-control config by www.bloggerspice.com --> <include expiration='7d' path='*.css'/> <include expiration='7d' path='*.js'/> <include expiration='3d' path='*.gif'/> <include expiration='3d' path='*.jpeg'/> <include expiration='3d' path='*.jpg'/> <include expiration='3d' path='*.png'/> <include expiration='3d' path='*.webp'/> <include expiration='3d' path='*.ico'/> <meta content='sat, 02 jun 2021 00:00:00 GMT' http-equiv='expires'/> <meta content='public' http-equiv='Cache-control'/> 

Here we have used 7d and 3d means 7 days and 3 days to expire the CSS, JS, images like jpeg, jpg, png and gif files. 

 So when visitors visit your Blog site then the browser will store cache for 7 days for CSS and JavaScript. Similarly, images files will be stored for 7 and 3 days. 

Step #5: Hit the Save theme button and exit from there. 

All done now it will take a few days to take effect but this script will work 100%. 

How to fix leverage browser caching in WordPress? 

WordPress platform users can control the browser’s cache by modification of the .htaccess file. This file can be found at the root of your hosting server. Many WordPress users don’t want to use excess plugins due to the effect on page loading speed. For them the following tutorial is perfect. 

Step #1: Log in to your WordPress hosting cPanel 

Step #2: In File Editor find the .htaccess file. 

Step #3: Now add the following code to the top of your .htaccess file. 

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>

ExpiresActive on

ExpiresByType text/css "access plus 15 days"
ExpiresByType text/xml "access plus 0 seconds"

ExpiresByType application/x-javascript "access plus 15 days"
ExpiresByType text/javascript "access plus 15 days"
ExpiresByType image/ico "access plus 15 days"

ExpiresByType image/gif "access plus 15 days"
ExpiresByType image/jpg "access plus 15 days"
ExpiresByType image/jpeg "access plus 15 days"
ExpiresByType image/png "access plus 15 days"

ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType text/html "access plus 15 days"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"

ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/json "access plus 0 seconds"

</IfModule>
ExpiresByType application/rss+xml "access plus 1 hour"

ExpiresByType application/atom+xml "access plus 1 hour"
Step #4: Finally Save and exit from there.

Alternatively, you can use .htaccess leverage browser caching for images and CSS by setting seconds like below: 

<IfModule mod_expires.c> 
ExpiresActive On

ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"

ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"

ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"

ExpiresByType application/x-javascript "access plus 86400 seconds"
ExpiresByType text/javascript "access plus 86400 seconds"
</IfModule>
You have wide options to set the time frame of header expiration. Both methods are suitable and widely used by many users. 

How to set different caching times for different file types? 

This is very easy to control cache by changing caching times for different file types. You can choose either 1 week or 1 month or 1 year, it’s up to you. 

For example, in the Blogger site, we have added cache like for CSS files that after 7 days it will expire. 

<include expiration='7d' path='*.css'/>

So if you want it will expire after 10 days then you can change the code like below 

<include expiration='10d' path='*.css'/>

Similarly in WordPress site set the duration for CSS file 1 month. 
  • ExpiresByType text/css "access plus 1 month" 
If you would like to keep cache for 1 year, then simply you can change like below 
  • ExpiresByType text/css "access plus 1 year" 
This is pretty simple to set the expiry time. Now you can set any file expiry time for the short and long term. 

Which file should set short and long expiry time? 

This is a common question that which file should we set for short and which one for long expiry time? 

We should set a short expiry time for small scripts container files like CSS, HTML, and JavaScript but not often recommended. If your site containing few JS script then it will not affect your site loading speed significantly. So we can set the time from 10 days to 1 month. 

If you set a long expiry time for heavy files then it will also create problems. Now the question is how it will affect or create a problem? 

Suppose you have set your CSS code expiry time up to 1 year. And after 3 months you decided to updated your website design by changing the CSS script, in this case returning visitors won’t able to see the changes in your webpage. 

Because the user’s browser already stored the previous CSS script from your website and it will reload it from temporary storage when they visit next time. 

As a result, visitors won’t get a notice about your change design. Only after passing the header expiry date browser will download new files from your website and display your new design. 

But in the case of Images and videos, we must set a long expiry time. Generally, media files contain heavy properties and take a longer time to load. 
So if we set a long expiry time then the browser will use stored files from the cache and when visitors revisit your site they won’t see any effect in loading speed. 

Conclusion 

I have shown the implementation system of leverage browser caching on both Blogger and WordPress sites. I hope this tutorial will help you to speed up your blog and website. However, there are other related issues you must solve to overcome the slow loading website issue. 

Though the Blogger platform gives you limited control over their cache controlling feature but in WordPress, it will work perfectly .htaccess leverage browser caching for Images, CSS and JS would be the perfect solution for WordPress users. 

And after implementing the header caching feature wait till few weeks to take effect. And check your blog on Google PageSpeed Insights, Thinkwithgoogle, and GTmetrix tools to see the result. 

Regarding this article, if you have any query or constructive suggestion then feel free to share with us. 

9 comments

  1. I am very glade to know that. Thank you.
  2. Thank you for sharing this information please visit my site for more information about all thinks inside head:
    https://femmerang.com/category/inside-my-head/
  3. Eu só fiquei em duvida em relação a tag:

    < meta content='sat, 02 jun 2021 00:00:00 GMT' http-equiv='expires'/>

    essa data devo mudar?
  4. do i need to change this tag?:

    < meta content='sat, 02 jun 2021 00:00:00 GMT' http-equiv='expires'/>

    • Hi Felipe, you should change it to a future value. e.g. 2024. thank you.
    • My site is https and the following is: < meta content='sat, 02 jun 2021 00:00:00 GMT' http-equiv='expires'/> do I change it to https or is it correct? I don't want to create mixed content, lord knows I have enough problems with my website on Blogger. Why did I choose it, because it's Google so I thought it was best option. It's theee single worst option in the history of mankind.
    • CMIIW: The method is outdated, and now it is more common to use the HTTP header Cache-Control to set cache policies. You can simply use the `meta content='public' http-equiv='Cache-control'` tag to set the Cache-Control rule as "public."

      If you want to control the expiration time for a specific page, you can do it through the HTTP header on the server side or use the `meta` tag with `http-equiv='Cache-control'` and set the max-age value to determine how long the content can be cached.

      Example:
      meta http-equiv="Cache-control" content="max-age=3600, public"

      Sorry, i cant use tag <> in here
    • Hi, please use our code parser https://www.bloggerspice.com/p/pre-code-parser.html to make the code compatible for your blogger theme.
Go Up