seo Question posted in
Some basic information to get you started with this can be found here.

How to force browsers prefetch images in first 6 parallel connections – SEO

I’ve found a lot of techniques to preload images both with CSS and JS, but none of them was able to REALLY preload images the way I need, or more specifically in the order I need.

Simply put the browser will preload all images and stuff in one block, but the order in which each image will be downloaded by the browser is totally on his own calculation, mostly (and totally reasonably) the top most elements in the document will be downloaded first.

Unfortunately this is quite true in my tests with <img> elements only; for other elements with something like background images it’s not really like that, even if the images are used as background for the <body> element for example.

The only solution this far that worked the way I needed was to place some <img>elements right after the <body>tag and set them with style="display:none". This is working, but rather ugly and terribly rough way imo to achieve this.

I’m also a bit concerned for SEO, since bots will find right at the start of the document some hidden images just for this purpose (I’m mostly preloading images for preloaders effects like “loading..” with a small logo image).

I was quite charmed with a super brilliant solution I saw to preload images with a pseudo element on the body like this body:before and then use multiple background images. While this technique indeed works to preload, it won’t effect the loading order priority… very sad it’s so perfect! 🙁

Isn’t there really any other way to force to preload stuff with top priority over the rest of the assets without cluttering the top of the document with hidden images?

UPDATE

As I explain in the comments below, I’m not concerned in having the images loaded in a particular order, I want them to be downloaded BEFORE the most part of the assets and other item in the “download” chart, so that the images will render almost instantly inside the browser along with normal CSS layout rendering when the page is accessed.

UPDATE 2

More info: the term “preload” is indeed misguiding, a more close term for what I’m looking for could be “prefetch” but basically it goes like this:

Most browsers download 6 requests in parallel at a time, holding up the rest of the downloads. If what you “really” need is in this top 6, you are lucky, else it in the next 6, or maybe the one after and so on.

What I’m trying to do is find a proper way to tell “hey download this first please” and in particular “this image”.
As pointed out by @farkas in the answers below rel="subresource" is indeed a good start but as pointed here, it works mostly as “[..]suggests it’s actually downloaded as a lower priority than stylesheets/scripts and fonts but at an equal or higher priority than images”, so it will indeed be loaded first than many other things, but still no proper way to break in those 6 gold top spots.

net chart download

As you can see, the browser downloaded first the styles, THEN 1 of the images I needed loaded ASAP, then the scripts, leaving out the other 2 images I needed to be downloaded with top priority.

To be noted tho that I’ve placed all my scripts not in the head, they are all placed at the bottom before the closing </body>, and also (as stated on top of my question) I’ve marked my images RIGHT AFTER the opening <body> tag, but only dark-pattern.jpg has been downloaded first, the other 2 were postponed

...
</head>
<body>
<img src="dark-pattern.jpg" style="display:none">
<img src="preloader.jpg" style="display:none">
<img src="xs-style.png" style="display:none">

.. rest of code 
...

I’d like to know a proper way to say, “please have a spot for my pictures, just download the stiles, the script can come later”.

Is it possible to achieve this?

I’ve found some more detail on this matter in here too, but nothing on my specific request apart rel="subresource"

PS. if all this thing has a specific technical name, please let me know so I finally can give the beast a name, thanks 😛

Tags:

2

Answers


  1. 0

    Try this:

    var all = ['img1.jpg','img2.jpg'];
function onAllImagesLoaded() { alert('loaded!'); }
function preload() {
    var i = new Image();
    var src= all.pop();
    if (!src) {
         onAllImagesLoaded();
         return;
    }
    i.src = src; 
    i.onload = preload;
}
preload();

    There are some issues with cached images in IE, sometimes it may omit onload call for cached resources.

    Edit

    You can also use nice plugin designed to track all images loading (but it doesn’t preserve images order, all images are loaded simultaneously):

    http://imagesloaded.desandro.com/

    Login or Signup to reply.
  2. 0

    Loading images using CSS or JS, will be always slower then using HTML. This is due to the fact that CSS and JS is loaded and parsed after HTML. Additionally to that, the browser optimizes this by using a speculative preload parser.

    So if your images are already in HTML, you won’t reorder your img downloads, if you add a preload script for those images.

    Therefore you have basically two options:

    1. Load images as soon as possible by adding them top (either with your hidden img or using link rel="subresource" (Chrome only)
    2. Delay loading all other non-crucial assets using a lazyloader
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search