Chrome 50 charge les données importantes en priorité

Nicolas Furno |

Chrome 50 est désormais disponible en bêta et cette mise à jour devrait sortir pour tout le monde dans les prochaines semaines. Comme d’habitude, Google a glissé plusieurs nouveautés dans son navigateur, comme un nouveau moteur JavaScript plus rapide et des notifications revues, avec la possibilité d’y placer des images. Mais ce qui nous intéresse ici, c’est l’intégration d’une nouvelle balise preload qui permet de charger en priorité des ressources.

On utilise ici la balise preload pour dire au navigateur de charger en priorité une image affichée en haut de l’article.
On utilise ici la balise preload pour dire au navigateur de charger en priorité une image affichée en haut de l’article.

Quand un navigateur charge une page web, il commence par récupérer le fichier HTML pour l’analyser et déterminer tout ce qui est nécessaire pour créer la page web. Il va ensuite télécharger les ressources, en essayant de récupérer en premier le plus important. Le contenu d’un article, par exemple, sera chargé avant une barre latérale ou des commentaires. Par ailleurs, le texte est affiché avant même que la police soit récupérée, pour que l’information soit disponible au plus vite.

C’est une bonne approche, mais les navigateurs ne sont pas encore très intelligents et se trompent souvent dans la priorité à accorder à chaque élément. Pour prendre un exemple très concret : une image utilisée à l’arrière-plan sera chargée en dernier, même si c’est la première chose que l’on voit. La logique étant que les images utilisées en arrière-plan sont moins importantes, mais c’est un problème quand ce n’est pas le cas, et que ce que l’on devrait voir immédiatement n'est chargé qu'en dernier, après le contenu masqué au lancement.

Chrome 49 charge l’image en arrière-plan quasiment à la fin (encadré), alors que c’est elle que l’on voit en premier. Les trois autres images (barres violet) sont chargées avant. — Cliquer pour agrandir
Chrome 49 charge l’image en arrière-plan quasiment à la fin (encadré), alors que c’est elle que l’on voit en premier. Les trois autres images (barres violet) sont chargées avant. — Cliquer pour agrandir

En utilisant cette nouvelle balise preload dans l’en-tête d’une page, le créateur du site indique au navigateur que la ressource est suffisamment importante pour la charger en priorité. Pour reprendre notre exemple (voir le code correspondant), on peut utiliser cette nouvelle option pour charger l’image utilisée en arrière-plan très rapidement et ainsi l’avoir avant le reste du contenu. Et à l’usage, la différence est visible : Chrome 50 charge en priorité l’image de fond, avant les autres images, et on la voit nettement plus rapidement.

Avec Chrome 50 et la commande preload, la même image en arrière-plan est chargée beaucoup plus tôt (encadré) et elle s’affiche aussi plus rapidement. Les trois autres images (barres violettes) sont chargées plus tard. — Cliquer pour agrandir
Avec Chrome 50 et la commande preload, la même image en arrière-plan est chargée beaucoup plus tôt (encadré) et elle s’affiche aussi plus rapidement. Les trois autres images (barres violettes) sont chargées plus tard. — Cliquer pour agrandir

Les navigateurs vont probablement devenir plus intelligents pour analyser une page web et charger en priorité ce qui est vraiment important. C’est d’ailleurs l’objet de Polaris, un nouvel outil développé par le MIT qui cartographie les pages pour guider le navigateur (lire : Le MIT propose de cartographier les pages web pour les charger plus vite).

En attendant, la balise preload est un excellent moyen pour les créateurs de sites internet d’aider les navigateurs. Grâce à elle, on peut charger plus tôt une image, mais aussi une feuille de style, un script ou encore une police. Au-delà de la priorité, cette nouveauté ouvre aussi d’autres perspectives pour les sites, en particulier pour les versions mobiles, puisque l’on peut introduire des conditions en fonction de la largeur de la fenêtre. Pour en savoir plus à son sujet, cet article fait figure de référence aujourd’hui.

Le problème à ce stade, c’est qu’elle n’est prise en charge que par Chrome 50, qui n’est même pas une version finalisée. Il va falloir du temps pour que tous les navigateurs en fassent autant, mais vous pouvez l’exploiter dès aujourd’hui sans problème, à condition de ne pas compter exclusivement dessus. D’après nos essais, on peut implémenter la balise en parallèle des méthodes traditionnelles de chargement. Selon les cas, le navigateur récupérera les ressources avec l’ancienne méthode ou avec la nouvelle, sans le faire deux fois.

Chrome 50 nécessite OS X 10.9 au minimum pour fonctionner.

avatar adamB | 

Ce qui se charge en premier c'est les pub !! :D

avatar C1rc3@0rc | 

Helas!

Le fait de mettre un attribut "preload" est une enorme connerie!
On parle ici même de dénaturer le standard HTML au meme niveau que l'a fait Microsoft avec le sinistre Internet Explorer.

Pour rappel il y a deja tous les moyens appropriés pour accélérer et rendre prioritaire le chargement d'une page WEB dans la definition du HTML.
Un element aussi important pour accélérer un site Web c'est d'utiliser un maximum de ressources locales, d'eviter les balises a la con du type:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></scrip>
<script src="https://another.com/ajax/libs/machin.js"><script>
<script src="https://monsite.com/ajax/libs/malibrairie.js"></script>
=> Mieux vaut regrouper tous les JS dans un seul fichier et le compresser et le charger a la fin du code HTML...

D'un autre coté ça va pas etre difficile a contourner, suffira qu' Ad Blockplus filtre en priorité la balise et le probleme sera resolu. Bref cela ne va faire que renforcer l'utilité de ces bloqueurs.

Sinon, il faut rappeler qu'il y a un outil simple pour juger de la qualité d'un site Web: Lynx
et ça se trouve sur le site officiel
Sur Mac ça s'installe avec
Macport en tapant dans le terminal sudo port install lynx
homebrew en tapant brew install lynx

Si le site Web est utilisable avec ça, alors cela veut dire que le Web master travaille bien, qu'il est compétent et que le site sera utilisable sur tout, partout et pour des années. Ca permet aussi de verifier si le site sera indexable de maniere efficace par les moteurs de recherche!

Dans le cas contraire, le Web Master n'en a que le nom mais pas les compétences!

avatar karayuschij | 

Donc il faudrait perdre du temps à vérifier qu'une page est construite correctement avant de l'utiliser… et ne pas l'utiliser dans le cas contraire.

lol

avatar C1rc3@0rc | 

Pour info, si une page n'est pas valide au niveau HTML, le navigateur va perdre du temps a tenter de la reparer, ce qui mettra un délai de plus AVANT de commencer a afficher quoi que ce soit!

Donc verifier la conception et la realisation d'un site avant de le mettre en ligne c'est un minimum vital!

Ta reaction c'est un peu comme si tu disais qu'il est inutile de debugguer un soft avant de le vendre...

De toute facon c'est simple, si le site est lent et s'affiche mal, les utilisateurs vont gueuler et iront voir ailleurs.

avatar ErGo_404 | 

Si ton XML ou HTML est mal formé on est d'accord, c'est naze, d'autant qu'un outil de travail moderne t'empêchera de faire un code mal formé. Par contre si ton code ne respecte pas la norme à 100% le navigateur n'en a rien à faire, il arrivera en général à le parser sans soucis et sans avoir à réparer quoi que ce soit. C'est par exemple le cas de la page d'accueil de Google, qui est complètement dégueulasse niveau respect des normes, mais qui s'affiche correctement partout.

avatar ErGo_404 | 

Tes astuces ne sont que ça : des astuces. Certes, c'est le niveau 0 de l'optimisation (encore que dans ton exemple, c'est faux. Il vaut mieux mettre les libs JS via des liens sur des CDN reconnus pour que ces libs restent en cache si elles ont déjà été chargées sur un autre site), mais le niveau suivant consiste à s'assurer que tout s'affiche correctement et dans le bon ordre. Cette balise sera très pratique, et ne dénature pas le HTML, bien au contraire.
De plus en plus les balise servent à décrire la sémantique de la page, pour que les outils automatiques puissent facilement les analyser. Cette balise est un outil de plus dans ce sens.

Quand à tester son site sur Lynx ... Qui fait encore ça ? Un site bien codé c'est un site qui s'affiche correctement et rapidement sur les navigateurs les plus utilisés, y compris dans des conditions de réseau pourri. On s'en fout complètement de Lynx.

avatar pierrot99 (non vérifié) | 

@ErGo_404

Mettre ses ressources sur CDN est mieux ... c'est vraiment ce que voudrait nous faire croire Google et tous les fournisseurs de CDN car ils veulent que nous y mettions tout pour un jour nous annoncer que c'est 1$/mo. Moi mon expérience objective c'est que chaque fois qu'un site cale en cours de chargement c'est qu'il est en train d'attendre les Google Fonts ou tout autre chose stockée sur un CDN, donc pour l'instant j'évite les CDN autant que faire se peut.

Et étant donné qu'il ne s'agit pas d'une balise mais de la valeur d'un attribut de la balise link, le raisonnement sur la sémantique de la chose ne tient plus aussi bien ...

avatar mp_ | 

J'ai arrêté de lire à la seconde ligne. (je parle du post initial de C1rc3@0rc, le système de quote de MacG n'est pas très lisible)

Au contraire de ce qu'a pu faire IE en faisant sa tambouille dans son coin, Preload est un draft W3 au moment où j'écris ces lignes, et a donc toutes ses chances de devenir un standard sous peu.

https://www.w3.org/TR/preload/

avatar Domsware | 

@C1rc3@0rc :
Ah ! Entièrement d'accord avec toi !
Je faisais comme cela à l'époque. Et puis c'est très bon pour le SEO.

avatar protos | 

@C1rc3@0rc

JQuery est bourré de fonctions Javascript et c'est Justement en Javascript qu'Internet Explorer est TRES TRES TRES MAUVAIS !
Donc ta solution ne convient pas !

J'utilise WEBDEV de PC-SOFT. Les sites créés avec WEBDEV sont fluides dans tous les navigateurs sauf dans Internet Explorer à cause PRECISEMENT du Javascript qu'il a ENORMEMENT de mal à exécuter.

C'est flagrant avec le champ TABLE de WEBDEV qu'il faut systématiquement remplacer par un champ zone répétée pour Internet Explorer !

Le problème ce n'est pas tant Chrome mais Internet Explorer. Il faudrait que chez Microsoft ils arrêtent d'utiliser leur moteur Trident qui est POURRI de chez POURRI !!!!!

avatar Shralldam | 

@pigeon_voyageur :
Connaissez-vous la méthode .toLowerCase() ?

Elle vous serait bien utile :-)

avatar protos | 

@Shralldam

Il y en a qui s'intéressent au fond des choses, et d'autres comme toi à la forme !

Tout dépend du niveau de compréhension que l'on a des choses...

avatar protos | 

@Shralldam

Je connais Majuscule() en WLangage...

:-)

avatar macfredx | 

Je te rejoins.
En attendant, la balise preload est un excellent moyen pour les créateurs de sites internet d’aider les navigateurs. Grâce à elle, on peut charger plus tôt une image, mais aussi une feuille de style, un script ou encore une police.
Ou les pubs...

avatar dumas75 | 

preload PUB preload PUB preload PUB
Adblock a de l'avenir ;)

avatar madmak | 

Google serait le premier à introduire une fonctionnalité pour promouvoir la pub ? Malheureusement, c'est aussi la première chose à laquelle j'ai pensée.

avatar ssssteffff | 

Je sens que toutes les ressources vont passer en "preload" sur certains sites :x

avatar mulet_from_space | 

"En attendant, la balise preload est un excellent moyen pour les créateurs de sites internet d’aider les navigateurs."

@macge, je veux pas vous embêter (il y suffisement de râleurs ici ;-) ) mais je crois qu'il s'agit plus d'un "attribut" que d'une "balise" , non ?

avatar tekikou | 

C'est même une valeur de l'attribut "rel".

avatar mulet_from_space | 

oui

avatar cvergne | 

Même si c'est un exemple facile à comprendre, c'en est un mauvais vouloir charger l'image de fond avant. C'est au contraire une bonne attitude du navigateur qui privilégie le contenu de la page avant son design (c'est pas un joli site vide qui nous intéresse, soyons honnêtes).

Mais l'exemple de la première image de contenu est bonne. Un logo par exemple est souvent en balise img plutôt qu'en CSS, et pourtant on s'en fout un peu contrairement à l'image de l'article.
C'est une bonne balise, mais espérons qu'elle va être utilisée correctement (même si malheureusement non).

avatar Nicolas Furno | 

@cvergne :
En théorie, je suis d'accord. En pratique, je n'ai pas le choix si je veux la présentation que j'ai sur le blog, j'ai besoin d'une image en arrière-plan.

Ou alors, je ne sais pas faire autrement et je suis ouvert à toutes les suggestions…

avatar Domsware | 

@cvergne :
Toutes les images de forme devraient être chargées via les CSS. Et les images de fond (contenu) via la balise adéquate.

avatar cvergne | 

@nicolasf
là en l'occurrence je parlais surtout de l'article, il peut y avoir des exceptions. étant sur l'iPhone il m'est difficile de jeter un œil là, mais dès que possible je regarderais plus en détail, ça m'intéresse ;) (et si j'ai une suggestion à faire, je la ferais ^^)

avatar Shralldam | 

Petit souci au niveau de la terminologie dans l'article. Preload n'est pas une balise, mais une valeur d'attribut ou un attribut (comme dans la balise video par exemple).

CONNEXION UTILISATEUR