I am working on a Angularjs project, I want to implement Leverage Browser Caching of images for optimisation of the website. Is there any way to implement this in an angularjs project.
2
-
you don't control browser caching of images with javascript. Not clear what you are askingcharlietfl– charlietfl2016-09-26 12:40:03 +00:00Commented Sep 26, 2016 at 12:40
-
No ! you can not disable image cache in browser but to improve your web page speed you can implement lazy loading for images.Sumit Kumar– Sumit Kumar2016-09-26 12:56:17 +00:00Commented Sep 26, 2016 at 12:56
Add a comment
|
2 Answers
Browser caching is done by the server
As well as Linx8 answer, you can find out more about it from Google browser caching.
Cache-Control defines how, and for how long the individual response can be cached by the browser and other intermediate caches. To learn more, see caching with Cache-Control.
ETag provides a revalidation token that is automatically sent by the browser to check if the resource has changed since the last time it was requested. To learn more, see validating cached responses with ETags.
In short, the browser repsonds the resources (images, stylesheets, scripts) with the following tags: Cache-Control and Etags. These header state how and how long it should be cached for, or if it has been modified since. When a user revisits the site, he can grab it from the cache instead of making a HTTP GET request to web server, saving time and cost. The recommended minimum cache time is of one week and preferably up to one year (stated by rfc2616).
Comments
Leveraging browser caching happens outside of AngularJS. You can create a .htaccess file on your server either in the root of your domain or in the same directory as your web app with something similar to:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
For more info, read here: Varvy
