1

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.

chickens
  • 19,976
  • 6
  • 58
  • 55
  • 1
    You can implement multiple solutions like: Lazy loading assets asyn, HTTP2 push. However, 200 JS files mean 200 times roundtrip to the server. Consolidate in as few as possible for best optimized result. If you cant do lazy load or HTTP2 push you can set long content expiry in HTTP header for vendor files. – Rikin Apr 09 '18 at 16:29
  • 1
    You're fixing the wrong problem. Don't send 200 javascript files to the browser to begin with. Also, if your CDN doesn't allow you to control cache settings, it's not really a CDN. – Evert Apr 09 '18 at 16:46
  • Rikin, my research about your answer about "HTTP2 push" lead me to preload, and this looks promising. https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content – chickens Apr 09 '18 at 17:00

3 Answers3

1

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.

Vitalij Kornijenko
  • 559
  • 1
  • 10
  • 22
  • I'm not using apache and files are almost all at cdn which I have no control and question is not about caching them for second time calls. I want to cache them before first time they are called. – chickens Apr 09 '18 at 16:37
  • In that case, you would have to add expiration in your CDN config. It will vary from CDN to CDN but for something like AWS CloudFront, this documentation will help https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html it explains cache control, expiration and how to control it. – Vitalij Kornijenko Apr 09 '18 at 16:44
0

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.

samanime
  • 25,408
  • 15
  • 90
  • 139
0

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.

chickens
  • 19,976
  • 6
  • 58
  • 55