1

Here is an image of my recent webpage test:

enter image description here

Is there any way to start as many http requests as early as possible? For example, the google font file requests start very late. Similarly, I want to move the jQuery request to as early as the script.min.js request which is hosted on the domain. Basically, I am looking for any way to make these requests more efficient.

Vineet Sharma
  • 221
  • 2
  • 11
  • 1
    Assuming that `script.min.js` actually references jQuery, you'd need to simply swap the order of the script tags for those 2. Other than that you could look at what you *don't* need to immediately load and do some reading about async and defer... http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html – Reinstate Monica Cellio Jan 31 '18 at 11:25
  • @Archer the order of scripts in the webpage is `jquery`, `barba`, `script.min.js`. So I assumed `jquery` will also load in that order. Since `script.min.js` loads before everything else, I thought may be they can all be loaded earlier. – Vineet Sharma Jan 31 '18 at 11:28
  • Most browsers have a limit on the number of concurrent requests it will do. But most modern browsers now support HTTP2 & SPDY, so if you have controls of the SERVER side you could add this support, this allows much better concurrent requests. – Keith Jan 31 '18 at 11:29
  • Thanks for the recommendation guys. Is there any way to push the font file requests to left? – Vineet Sharma Jan 31 '18 at 11:37

1 Answers1

0

First of all, make sure the request are done straight from HTML whenever possible, and not dynamically via JavaScript. Put your JS and CSS requests into <head> if possible. That way, the preload scanner of the browser will request those files as soon as possible.

Be careful though about where the CSS is placed - see https://csswizardry.com/2018/11/css-and-network-performance/ for more.

If you can't put everything into <head> of the HTML, you're looking for <link rel="preload">, which was created exactly for that purpose; it tells the browser to download some resources, but not execute them yet.

Some literature:

Note though that as of late 2018, it's disabled in Firefox, with no ETA when this will ship.

Also, be careful when using preload as the preloaded requests get the highest priority, which sometimes might mean than other critical but not preloaded resources will wrongly get deprioritized.

In some cases (depending on browser, order of entries in HTML etc.), preload can lead to double fetches (particularly for webfonts). Make sure to check for that.

jakub.g
  • 38,512
  • 12
  • 92
  • 130