Tell browser to cache

Published 1 month ago by AdamEsterle

Is there a way to tell the browser (via your code) to cache your js/css files for x amount of time? Or is that just a browser setting the user has to set on their own browser?

I hear it being referred to by Jeffrey as if the developer has this power either via PHP or JS

Best Answer (As Selected By AdamEsterle)
barry.van.veen

You can send headers to the users browser to let the browser know which content can be cached and how long.

You could send these headers from PHP (Laravel) but not all content is served by PHP. If the user requests a css file it is probably served directly by your server. You can configure your server to send these headers on all requests (whether they are served by PHP or not) so that you have everything covered.

You probably want to search for "Cache-Control header".

Also, think about a mechanism to force reloading your css/js files if you upload new versions. This is commonly referred to as "cache busting".

ohffs
ohffs
1 month ago (221,760 XP)

You could have a look into etags and cache-control.

MikeHopley

This is done by configuring the server to send suitable headers, instructing the browser to treat those resources as unchanging for a certain length of time.

Google for "far future expires header". Here's an article for Apache server

Once this is set, the browser will not even ask the server whether the resource is fresh. Therefore it's essential to have a robust cache-busting system in place, such as the versioning offered by Laravel Mix.

AdamEsterle

So Laravel does not control this by default since it is an apache/nginx thing?

barry.van.veen

You can send headers to the users browser to let the browser know which content can be cached and how long.

You could send these headers from PHP (Laravel) but not all content is served by PHP. If the user requests a css file it is probably served directly by your server. You can configure your server to send these headers on all requests (whether they are served by PHP or not) so that you have everything covered.

You probably want to search for "Cache-Control header".

Also, think about a mechanism to force reloading your css/js files if you upload new versions. This is commonly referred to as "cache busting".

AdamEsterle

Awesome! Thank you

I use the Mix versioning to do the busting of css and js

I have custom code to change the filenames of the images I am using (like a user's profile picture). That is needed too since cache-control effects images also? Is there anything I'm missing other than images, css, and js?

Sign In or create a forum account to participate in this discussion.