4 Replies - 159 Views - Last Post: 13 September 2017 - 05:51 AM

#1 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Avoid ressource scheduling ?

Posted 13 September 2017 - 04:09 AM

Hello folks,

I have this little optimisation "issue":

I often want my webpages to start with an animation, and some of them require images.

In this case, the image takes 900ms to load and is by far the last element to be loaded, but it only starts downloading 300ms after index.html has loaded because the browser schedules it *after* the stylesheets has finished dowloading (donwloading downloading downloading downloading I love this word downloading I could repeat it all day downloading).

Is there a simple way to tell the browser to shut up and do as it is told? Javascript files are not scheduled but I am not going to base64 encode this image so I wonder if there is another trick.

Note that this is a general purpose question. In this case I find the loading speed totally acceptable. But it bugs me.

Looking forward to reading you!

Is This A Good Question/Topic? 0
  • +

Replies To: Avoid ressource scheduling ?

#2 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,764
  • Joined: 12-December 12

Re: Avoid ressource scheduling ?

Posted 13 September 2017 - 04:56 AM

I don't think I'll be able to help with this personally, but can you confirm whether the image is an img tag in the HTML (for someone else who might assist)?

Looking around, though, wouldn't <link rel="preload"> for the async downloading of CSS be a solution? Check it in caniuse if so.
Was This Post Helpful? 1
  • +
  • -

#3 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: Avoid ressource scheduling ?

Posted 13 September 2017 - 05:18 AM

This is very interesting and I think it could solve the problem, but the support isn't good and since the rel attribute is replaced I should run tests on legacy browsers to be sure the stylesheet is not totally ignored.

this makes me think I could load the stylesheet with AJAX and dump it in a style attribute when it's loaded. I am looking for something more standard, but your answer could qualify: it's currently a working draft, which is encouraging.

I haven't tried a HTML element actually, it's loaded with JS (the document.createElement scheme). I will check that this evening. I don't like the idea of adding actual elements to the document but I am not this close-minded.

This post has been edited by ge∅: 13 September 2017 - 05:21 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6376
  • View blog
  • Posts: 25,764
  • Joined: 12-December 12

Re: Avoid ressource scheduling ?

Posted 13 September 2017 - 05:25 AM

If you are considered Ajax - i.e. JS - then I suppose you could also consider a preload polyfill.

Or loadCSS
Was This Post Helpful? 1
  • +
  • -

#5 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,126
  • Joined: 21-November 13

Re: Avoid ressource scheduling ?

Posted 13 September 2017 - 05:51 AM

Awesome!

It is true that for some websites, relying on JS to load CSS doesn't fully satisfy me, but most of what I do would have no purpose without JS so it is fine. The polyfill version is the most future-proof solution. I love it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1