2020 June 13 Archive - EXEIdeas – Let's Your Mind Rock

In our last articles about How To Fix The Leverage Browser Caching In Blogspot/Blogger? and How To Remove “Leverage Browser Caching” In Your Website?, you know that 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% 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 fix the leverage browser caching in WordPress?So many webmasters argued that using expiring header features 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 it. 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.You can check 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 a browser 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 large scripts of HTML, CSS, and JavaScript then logically it will take time to load.Today almost all major browsers use caching features to give 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 browser’s cache already stored everything in the first visit.Even if you refresh the page or visit the different page it will work like the 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 subsequent page loads more efficiently.Benefits Of Leverage Browser Caching:There are certain benefits you will get after Leveraging browser cache. Those are as followsYour 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 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.How To Fix The Leverage Browser Caching In WordPress Without Plugin?WordPress platform users can control the browser’s cache by modification of .htaccess file. This file can be found in the root of your hosting server. Many WordPress users don’t want to use excess plugins due to affect on page loading speed. For them the following tutorial is perfect.Step 1.): Log in to your WordPress hosting cPanelStep 2.): In File Editor find the .htaccess file.Step 3.) Now add the following code to the top of your .htaccess file.Step 4.) Finally, Save and exit from there.## EXPIRES HEADER CACHING ## ExpiresActive onExpiresByType 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"ExpiresByType application/rss+xml "access plus 1 hour"ExpiresByType application/atom+xml "access plus 1 hour" ## EXPIRES HEADER CACHING ##Step 5.) 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. Similarly in WordPress site set the duration for CSS file 7 days.ExpiresByType text/css "access plus 7 days"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 a 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 CSS script, in this case returning visitors won’t able to see the changes in your webpage.Because the user’s browser already stored 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 long expiry time. Generally, media files contain heavy properties and take a longer time to load.So if we set 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:We have shown the implementation system of leverage browser caching on WordPress sites. We hope this tutorial will help you to speed up your blog and website. However, there are other related issues you must solve to overcome for slow loading website issues.Though the Blogger platform gives you limited control over their cache controlling feature but in WordPress, it will work perfectly to 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.Final Words:Be aware that the is placed well in your document. Rest all is in your hand if you want to customize it or play with it. That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allowed to us. Don’t forget to share this with your friends so they can also take benefit from it and leave.