Précharge la plus précoce pour une image dans une page HTML

Quelle est la première heure dans une séquence de chargement de page HTML qu'une demande d'image peut être émise?Précharge la plus précoce pour une image dans une page HTML

Un site auquel je suis impliqué passe à l'utilisation de pages d'image-objet. La page d'image-objet est potentiellement très volumineuse et le temps de chargement global de la première page bénéficie grandement de cette demande lancée tôt par le navigateur. Les pages incluent également des charges lourdes CSS et JS et il serait terrible d'initier la charge sprite-page une fois celles-ci terminées. Le temps de chargement global le plus rapide que j'ai trouvé est de créer un fichier CSS ultra-court, appelé au début de la section tête HTML, qui fait référence à l'image dans une classe. Cela lance généralement la demande d'image avant que les autres CSS et JS aient terminé le chargement (nombre de connexions le permettant) dans les navigateurs modernes. D'autres techniques semblent retarder au moins jusqu'à ce que le CSS soit entièrement chargé avant d'initier la demande d'image. Je n'aime pas cette technique, cependant, car elle introduit encore un aller-retour et un fichier de plus que nécessaire, ce qui pourrait ajouter 50ms-100ms au temps de chargement par rapport à une technique qui initie la demande d'image directement à partir de le HTML. Toutefois, en se référant à l'image dans le corps HTML, etc, semblent provoquer la demande d'attendre jusqu'à ce que le CSS principal soit chargé. Et les solutions les plus évidentes - ne pas transpirer, en se référant naturellement dans le CSS principal, y compris comme une image dans le corps - sont tous fortement plus lent d'environ 200ms-300ms dans cette application (gonflée).

Peut-être y a-t-il un bon moyen de référencer une image extrêmement tôt dans une tête HTML qui pourrait provoquer au moins certains navigateurs modernes à la charger très tôt? (Une sorte particulière, étrange de balise de lien, peut-être?

Toute bonne explication en ligne de charge ordre moderne serait également bénéfique (mais pas une réponse à la question).

Nous avons une bonne et robuste test de temps de chargement basé sur des navigateurs sans tête qui nous permet de tester les temps de chargement à une précision de 10ms avec une variété de latences et de largeurs de bande artificielles sur un profil réaliste de nos pages, et ces différences sont statistiquement significatives. Je sais que dans de nombreux cas, les URL de données dans CSS et les icônes comme dingbats dans WOFF sont de meilleures techniques que les sprite-pages, mais c'est n ot vrai dans tous les cas de toutes les images (que nous avons les données à montrer), et cette utilisation de sprite-pages fait partie d'un chemin de migration pour une application complexe].

Source

2015-10-31 Dan Sheppard

Je vous suggère inline cette partie de CSS dans votre code HTML, par exemple:

<head> 
    <title>(...)</title> 
    <style> 
    /* your inline style */ 
    </style> 
    <!-- other link tags, maybe scripts, etc --> 
</head>

Source

2015-10-31 01:19:02 Buzinas

Cela vaut certainement la peine d'essayer. Je vais essayer (avec d'autres réponses s'il y en a) et faire un rapport. Merci! –

Vous pouvez ajouter un script en haut de votre page HTML juste après la balise <title> qui effectuera un asynchrone HTTP demande:

<html> 
<head> 
    <title></title> 
    <script> 
    var xhr = new XMLHttpRequest 
    xhr.open("GET", "http://your-sprite-page", true) 
    xhr.send() 
    </script> 
    ...

Quoi qu'il en soit, selon la mise en œuvre du fournisseur de demandes async, peut-être la meilleure façon est d'inclure une balise <img hidden> dans la partie du corps.

Dev Tools Ligne de temps est votre ami.

Source

2015-10-31 01:44:23 Supersharp

C'est un peu moche, mais si c'est le moyen le plus rapide de le faire, ce n'est pas un problème. Je vais essayer, merci! –

Mise à jour: Veuillez voir les commentaires de Supersharp ci-dessous qui corrigent mon utilisation initiale de rel = "prefetch", suggérant rel = "import" à la place.

De même, this document suggère d'utiliser l'attribut async avec rel = "import" pour empêcher le blocage. Donc, en combinant ces suggestions donnerait

<head> 
... 
<link rel="import" href="/path/to/large-background-image.jpg" async> 
... 
</head>

Bonne chance!

Source

2015-10-31 02:11:14

C'est propre. Je vais essayer, merci! Toujours bon s'il y a une façon standard de faire les choses. –

Je ne pense pas que le téléchargement aura la priorité sur les autres appels de téléchargement ultérieures. Le 'prefetch' peut être lancé seulement quand le navigateur est inactif. – Supersharp

Hey @Supersharp, je pense que vous avez raison, merci d'avoir choisi, j'ai mis à jour ma réponse –

Précharge la plus précoce pour une image dans une page HTML

Répondre

Questions connexes