Images are never cached by the browser (Laravel/DigitalOcean)

Hi,

I have a website on digital ocean, deployed with Forge. But I've noticed that after one hour or two, when I go back on my website, all images are loaded from the server again (they are displayed from top to bottom).. It's kind of annoying.

Sometimes I have up to 30 images to display. And they are displayed one by one.. Worst, the layout is not respected during the loading. These are just static images, never modified once uploaded.

I did a trick tho. I followed the following to access the images stored in Storage directory : http://stackoverflow.com/a/30192351/2559851

ln -s /path/to/laravel/storage/avatars /path/to/laravel/public/avatars

I've not edited any config files such as htaccess..

Do you guys had the same problem? How can go through this? Thanks.

jekinney

9 years ago

Level 47

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

Here is the first result on google. You can adjust some settings.

When/if you set it up right you can have a browser not even request for cached items for x-amount of time. By default it checks for changes (requests). If your CSS, is and images rarely change (24 hours or more) no need to even send a check request for x amount of time.

1 like

Let

9 years ago

Level 4

So, I added this in .htaccess file and it's better now

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 10 days"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
</IfModule>

How come this isn't by default?

Snapey

9 years ago

Level 122

How come this isn't by default?

because it may not suit all situations. Ordinarily there should be no need for this because the server should reply that the image that the browser is asking for has not changed. The browser sends a header If-Modified-Since and provides a date. If the file on the server is older than that date, the server should reply with a 304 Not Modified

This happens automatically with a default Apache install, so I am puzzled why you might need these settings, but it should be quite easy to check what's going on?

The settings you have deployed basically tell the browser, this content won't change so don't even bother asking. The effect of this is that a user changing their avatar (for instance) won't have that published to the clients (that already have it) until a year has elapsed (in your case), and there is nothing you can do about it apart from adding some cache-busting to your html.

Couple of other thoughts

if you have browser development tools open, the cache can be disabled so that images are always requested make sure that the effect you are seeing is not just a testing artifact.
if you don't want the layout to jump around as images are loaded, give your browser the image dimensions in the img tag so that it knows how much space to leave

Please or to participate in this conversation.