How to ask browser to cache files for future use

Question

I have an app that is using some large libraries. There are almost 200 js and css files being loaded. And this is how it goes. First it loads 30 of them listed on first html. Than after running some. they trigger loading their own required files. After that library starts, I run a callback that starts other library that loads their own files.

So in first load network activity almost stops several times before it starts downloading 50 other files. And website opening time is almost 20 seconds. But it is mainly because there are big gaps in between library loads.

Since I have the list of all 200 files is there any way that I can ask browser to start downloading all these files and only run in when it is required. So that it will work on downloading all these libraries in the very beginning.

My first approach was I thought maybe I can add file list to HTTP header of first html file. I looked for https://en.wikipedia.org/wiki/List_of_HTTP_header_fields and couldn't see one that I can send list of files that will be used in this html file. And google did not offered me any other solution too at least I couldnt find it.

UPDATE:

This files are all at CDN, I cannot change the headers for assets, I can only change my initial html file headers.

Answer 1

The solution I found is preloading, it allows to load files in advance.

I had to add tags to my html file:

<link rel="preload" href="https://example.com/style.css" as="style">
<link rel="preload" href="https://example.com/example.js" as="script">
<link rel="preload" href="https://example.com/example.woff2" as="font" type="font/woff2" crossorigin>

More Info at : https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

And here: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

Preloading Browser support : https://caniuse.com/#feat=link-rel-preload

Preconnect might also be helpful if you want to start SSL connection beforehand.

Answer 2

First bit, how to get it to cache. This comes from the server. Basically, set an Expires, ETag, Cache-Control or some combination to configure how long it should stick around. Regardless of how it is loaded, if it has one of these headers, it'll stick around. Do note that it isn't guaranteed to stick around (especially on mobile, where disk space is more of a premium), but most will.

As for pre-loading them, it may be unnecessary. If they all load and get cached, then subsequent runs may not have to wait and you might be good. This way, they'll load in the right order and only run when you want.

If you still want them to all pull down right away and you have a list of them, you can just add them each as <script> tags. You can either render this list as script tags server-side, or pull the list and use some JavaScript to dynamically add script tags.

If these script tags have load-time dependencies (i.e., B must be started before A or B will fail, etc), you'll need to make sure you have them in the right order.

If they have onload functionality, then you'll have to somehow wrap that up so it'll only trigger when you want.

Answer 3

If you are using apache you would need to use a plugin called mod_expires in .htaccess.

In a nutshell, the browser will ask the server to get the file and then the browser responds with the file and expiration time. If the browser will be getting the same file again, it will decide whether the file is old enough to actually make a request to get a new one, otherwise it will used the cached version.

For this to work your .htaccess would look like this:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week”
ExpiresByType image/jpeg "access 1 week"
ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType image/svg "access 1 week"
ExpiresByType image/svg+xml "access 1 week"
ExpiresByType text/css "access 1 hour"
ExpiresByType text/x-javascript "access 1 hour"
ExpiresByType text/javascript "access 1 hour"
ExpiresByType application/javascript "access 1 hour”
ExpiresByType application/x-javascript "access 1 hour”
ExpiresByType application/pdf "access 1 week"
ExpiresByType application/x-shockwave-flash "access 1 week"
ExpiresByType image/x-icon "access 1 week"
</IfModule>

The rules above, add expiration for Content types like png, jpg, jpeg, javascript etc. for an hour or a week depending on the content type.