Htaccess Leverage browser caching
Using .htaccess file we can enable browser caching for statics files to improve website performance.
Implementation of browser caching is one of the most neglected (or underrated) things and most developers do not implement this. However, it is one of the most important points to optimize the website for speed.
While analysing a website on GTmetrix, most website score shows F (0) because browsing cache is not set. Similarly, and Google PageSpeed Insights shows warnings to “Serve static assets with an efficient cache policy”.
You can easily enhance your website performance and GTmetrix score by adding small .htaccess code to enable browser cache.
What is browser caching?
When a user opens a website, the browser downloads all files for that page. The most common files are HTML, CSS, JavaScript, and images.
If a webpage has a big file or a large number of files, the browser may take some time to download all resources. That is why the website loads slowly for users.
Browser cache is a feature in which browsers can store some of the web page files locally on the user’s machine.
How does Browser Cache work?
Using browser cache, browsers store some static files temporarily when a user visits for the first time on your site. When he visits the same page (or even another page with the same files), the browser loads files from the cache quickly. Therefore, there is no need to download those files from the server and it improves website loading speed.
Enable Cache headers using Htaccess:
Here is the Htaccess code to configure Apache headers to enable browser cache for selected static files such as images, videos, fonts, CSS, javascript and other documents.
# BEGIN - Enable/Leverage browser caching
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
# Video
ExpiresByType video/webm "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
# END Leverage browser caching
Important Points about Browser Caching:
- Set static content (CSS, Docs, video, fonts etc.) cache for 1 year
- It is not recommended to set cache for more than 1 year
- Static resources that may change frequently, may have a cache for 1 week or 1 month.
How to force new static files?
Some framework and CMS append versions with static resources path as a query string to prevent loading old cached files if a new version is available.
For example, WordPress allows us to set a CSS path like “https://website.com/wp-content/themes/twentytwenty/style.css?ver=5.2.7” where each new theme version creates a different URL. That way if a new version of the WordPress theme made changes in CSS files, new ones will be loaded.
Important Links:
Exercises & Assignments |
---|
No Content Found. |
Interview Questions & Answers |
---|
No Content Found. |