Best Practice to Manage All Asset Caching (Images, CSS, Js, Everything)

Best Practice to manage all asset caching (images, css, js, everything)

Found what I believe to be an acceptable solution at How to force browser to reload cached CSS/JS files? No idea how I missed this in my original investigation.

For anyone who comes to this question, note I'm referring to the first answer on the linked page that references Google's mod_pagespeed plugin for apache. This works at the web server level, thus "[it works] with PHP, rails, python, static HTML -- anything."

This is precisely the kind of solution I was looking for. This tool, or something similar, should be in use by all web developers to keep caching logic orthogonal to the code itself.

Better way to prevent browser caching of JavaScript files

You want CSS and JS to be cached. It speeds up the loading of the web page when they come back. Adding a timestamp, your user's will be forced to download it time and time again.

If you want to make sure they always have a new version, than have your build system add a build number to the end of the file instead of a timestamp.

If you have issues with it just in dev, make sure to set up your browsers to not cache files or set headers on your dev pages to not cache.

What are the best practices for images/svgs being used for multple img elements?

a svg file can be used as many times as you need in the src attribute. There's nothing wrong using the same file multiple times.

e.g.

<img class="image-1" src="src/chance.svg" />
<img class="image-2" src="src/chance.svg" />

.image-1 {
   // styles here
}
.image-2 {
// styles here
}

Prevent image caching in rails on a per tag basis

One option I can think of to do this would be to write a little helper that would append a "?YYYYMMDDHH" to the end of Gravatar URL's. You could generate the URL's to include year, month, day and hour. This way the browser caching should only be stale for an hour maximum.

This will increase perceived load time for your users as images would be browser cached less frequently. You could adjust any number of ways: YYYYMMDD, YYYYMMDDHHm, etc. You'll have to weigh the importance of having up-to-the-minute Gravatar images versus page rendering speeds.

Caching Lifetime Best Practice for Google Pagespeed

Google recommends 1 year for static assets.

We recommend a minimum cache time of one week and preferably up to
one year for static assets, or assets that change infrequently. If
you need precise control over when resources are invalidated we
recommend using a URL fingerprinting or versioning technique...

Source: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

As stated you need to make sure you implement cache busting techniques to ensure you don't inadvertently serve old CSS etc.

It is calculated on a non linear scale (i.e. 6 months is not twice as good as 3 months) so it is not possible to give an exact numer of days but 6 months for all assets would pass, whereas all assets except CSS at 1 year with CSS at 1 week may not.

If you change your CSS and JS cache time to 1 year I would imagine this diagnostic would not show.

Always bear in mind these are recommendations and best practices, you have to do what is best for your site so ensure that any cache length you set is right for your use case.

---

Related Topics