28 Feb Page Speed with Leverage Browser Caching
When building any web application, you will find that there are lot of CSS and JavaScript files and Images are used. When the no of resources (CSS/JS/Images) are increased, page load time also increase because every time a browser loads a webpage it has to download all the web resources to properly display the page. Nowadays web app performance is most important things for all clients.
At first time user’s visit to your site, site will load all resources and browser caches all resources. If a same user tries to load another pages in sites / Refresh the site, then all resources are loaded from cache.
The main reason why browser caching is important is because it reduces the load on your web server, which ultimately reduces the load time for your users.
Leverage Browser Cache enables browser cache by proving HTTP header with expiry time based of file types. To enable leverage browser cache, we need to add code on .htaccess file with expiry time.
Add this line to your .htaccess file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
#Begin Leverage Browser Caching <IfModule mod_expires.c> ExpiresActive on # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 1 month" # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" # Your document html ExpiresByType text/html "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # Feed ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour" # Favicon (cannot be renamed) ExpiresByType image/x-icon "access plus 1 week" # Media: images, video, audio ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # HTC files (css3pie) ExpiresByType text/x-component "access plus 1 month" # Webfonts ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" # CSS and JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" <IfModule mod_headers.c> Header append Cache-Control "public" </IfModule> </IfModule> #End Leverage Browser Caching |
Check website page speed and performance tips of your site, with help of following tools:
https://developers.google.com/speed/pagespeed/insights/
https://gtmetrix.com/
http://pagescoring.com/website-speed-test/
No Comments