2

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?

| improve this question | | | | |
  • Do you have a packet/network sniffer? A sniffer might give you more information than FF. – Trebor Mar 17 at 14:14
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>
| improve this answer | | | | |
  • Interesting info, but I don't have any ? or query string in the path.. – Ryan Stone Mar 15 at 16:17
1

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>
| improve this answer | | | | |
  • do you have any knowledge of how to do this either in the .htaccess file or in the headers, I have already tried to implement it from the .htaccess doc's but I don't know if I have got the modules in the correct order or if the syntax is right. – Ryan Stone Jul 22 '19 at 22:42
  • Can you update you answer with an example implementation? – Ryan Stone Jul 22 '19 at 22:42
  • Do you use AWS? If not, what hosting service do you use? What CMS do you use? – Alec Sharratt Jul 23 '19 at 6:29
  • Let me know if that worked? – Alec Sharratt Jul 23 '19 at 6:38
  • I use NameCheap Shared hosting, Do I use AWS? Not as far as I'm aware, What CMS am I using? I have no idea. I will look what the two acronyms mean first. As Far as I am aware Set Cache-Control Max Age="'SumNumber" only sets the Expiry, Not actual Cacheing of items is this wrong? – Ryan Stone Jul 23 '19 at 10:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.