Website downloading resources Multiple times, unecessarily

Question

I have a couple of website projects that I am currently working on as a learning exercise & Have noticed in the developer tools that at least two of my projects are Downloading resources Multiple times. I am using firefox developer edition & it is showing as having downloaded the css file at least 7 times, Images and a video are around 20 times aswell as three.js? Is there anyway I can force it to only download once as the items have not changed or been moved in the directory. Wondering if this is possible either as a header or in the .htaccess or any other available code. Is annoying me & is obviously redundant or not necessary? also is probably effecting page load time, but it just seems pointless to download the same document or resource multiple times? Any Comments would be appreciated

I have a Vj video loop that I would like to include in my page, I just counted and its downloading it 26 times for some unknown reason.

I'm not really sure which tags to put this under as GET requests is not available? Can someone help?

Answer 1

Any chance you have a "?" question mark or query string as part of the path to your CSS file? Apparently, some proxies don't cache files with query string parameters (see comments at end of article).

And, here's an example for adding expiration headers to your htaccess file.

<IfModule mod_expires.c>
  ExpiresActive On


  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"

</IfModule>

Answer 2

You need to set your cache policy properly, it sounds like it’s not set at all. So every time someone goes to a page they have to re-download all the same files. Setting the cache for css and js to 30 days as a minimum is a good start.

Beware that you need to implement version control on these files, otherwise if you make a css change the cached version will be used instead of the new one. For example if you have a style sheet called “style-1.css” then you release a new version, change the file name to “style-2.css”.

This should resolve the problems you’re seeing and helps to improve page load times for users as they only need to download new files or content rather than everything every time.

You could try this code in the Htaccess file which gives a 90 day cache for images and most other file types:

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|txt|xsl|css)$">
Header set Cache-Control "max-age=7776000"
</FilesMatch>