Google PageSpeed, vitesse de chargement des pages et nouveautés HTML 5

Mathieu Chartier Référencement 5 commentaires

Le débat sur la vitesse de chargements des pages web existe depuis des années et l’arrivée du PageSpeed de Google. Les référenceurs ont toujours été partagés à ce sujet et estiment parfois que ce facteur n’est pas réellement pris en compte dans le positionnement des pages. Dans cet article, nous allons penser avant tout à nos utilisateurs et garder en trame de fond l’idée d’un meilleur référencement en voyant quelques innovations futures en HTML 5.

Quelle différence entre PageSpeed et vitesse de chargements des pages ?

Mon objectif n’est pas ici de trancher dans ce débat interminable sur la vitesse de chargement des pages web mais je reste persuadé que Google a créé un listing de facteurs d’optimisation (qu’il a appelé PageSpeed) pour attribuer une note servant à plus ou moins bien positionner les pages web. Je ne fais donc pas partie des gens qui pensent que c’est la vitesse de chargement qui est calculée et qui sert de « ranking signal » (critère de classement) dans l’algorithme de Google. Sans rentrer dans les détails, voici les raisons qui me poussent à penser ainsi :

  • La vitesse de chargement des pages dépend de l’horaire de connexion car la bande passante allouée varie continuellement, il est donc difficile à Google de déterminer une valeur précise à « noter ».
  • Les serveurs sont installés sur des machines physiques de puissances variables qui ont une forte incidence sur le bon chargement des pages, noter ce facteur serait contre-productif et imposerait aux webmasters d’opter pour des serveurs dédiés très chers pour ne pas être mal notés… N’oublions pas non plus les pannes ou surcharges éventuelles qui causent parfois des blocages temporaires, la note serait alors abaissée un peu à défaut, ce ne serait ni juste, ni logique.
  • Les méthodes de calcul varient d’un outil à un autre (faites des tests), il peut parfois y avoir des écarts-types énormes entre les divers outils mais aussi entre les différents tests successifs. Ainsi, il est difficile d’assurer une valeur juste, réaliste et pertinente. À l’heure où Google nous vante sans arrêt l’intérêt de résultats « pertinents », ce serait le comble de se baser sur des approximations...
  • La vitesse de chargement des pages dépend de la connexion Internet utilisée par les robots d’indexation. Bien que Google profite certainement d’une connexion de très haute qualité, cette dernière fluctue aussi et ne permet pas de garantir

Ces quelques idées me font penser qu’il est impossible à Google de calculer une vitesse pure et pertinente de chargement des pages web pour les noter et les positionner, je reste convaincu que c’est plutôt la note du PageSpeed qui peut être utilisée comme petit facteur de positionnement (au faible impact à mon goût) car elle répond à plusieurs facteurs que nous pouvons tous appliquer à arme égale…

Google PageSpeed et vitesse de chargement des pages web

Quoi qu’il en soit, il doit nous importer essentiellement de favoriser des gains de performance dans nos pages web, c’est pourquoi nous allons étudier quelques points qui peuvent être intéressants pour l’avenir avec HTML 5

Nouveautés de l’HTML 5

L’arrivée d’Internet Explorer 11 m’a incité à me renseigner un peu plus sur la dernière version du navigateur de Microsoft. Comme nous sommes souvent moqueurs à son sujet, j’ai voulu savoir s’il était « mauvais » comme certains de ces prédécesseurs ou s’il était meilleur qu’on ne le pensait. Dans les faits, IE11 est un très bon navigateur, ça fait peut-être mal de le dire, mais il faut avouer qu’il a d’indéniables qualités. Lors de mes recherches, je suis tombé sur un article de Microsoft qui évoquait le préchargement et la prédiction des pages web pour gagner en vitesse d’affichage, ce qui m’a bien plu pour être honnête…

Voici donc trois nouvelles valeurs d’attributs HTML 5 pour le classique « rel » qui pourront devenir nos amis dans certains cas précis :

  • Prefetch : permet de précharger totalement une page web avant qu’elle soit « cliquée » par l’utilisateur.
  • Prerender : permet de mettre en cache et dans la mémoire « tampon » du navigateur une autre page afin de l’afficher de manière quasi instantanée une fois que l’utilisateur cliquera sur un lien pointant vers elle.
  • Dns-prefetch : permet de précharger une page web issue d’un site externe.

Actuellement, certaines de ces nouvelles « relations » sont en phase de travail auprès du W3C, un groupe de travail initié par un membre de Google et de Microsoft se penche sur les performances des pages web en HTML 5. Sachez tout de même que le rel="prefetch" semble en voie de confirmation puisqu’il a été déposé dans les recommandations sur les liens hypertextes du W3C du 16 septembre 2014. Pour finir notre tour des avancées du W3C au sujet de la vitesse de chargement des pages web et des performances, sachez que vous pouvez suivre la page de l’organisme suivante : http://www.w3.org/wiki/Web_Performance/Charter.

Pour le moment, ces nouveautés HTML 5 ne sont pas encore compatibles avec tous les navigateurs, mais espérons que certaines soient confirmées, comme cela semble être le cas pour « prefetch » :

  • Prefetch : compatible avec Google Chrome, Firefox et Internet Explorer 9 et supérieurs.
  • Prerender : compatible avec Google Chrome et Internet Explorer 11.
  • Dns-prefetch : compatible avec Google Chrome, Firefox et Internet Explorer 10 et 11.

Usage des préchargements HTML 5 pour la SEO

Ces trois petites options s’installent très facilement en HTML 5 en ajoutant dans la section <head>…</head> des balises <link /> adéquates, comme ici :

  • <link rel="prefetch" ref="http://www.site.com/page-prechargee.html">
  • <link rel="prerender" href="http://www.site.com/page-en-cache.html">
  • <link rel="dns-prefetch" href="http://www.site-externe.com">

Ces trois petites fonctionnalités apportent des évolutions sensibles en matière de vitesse de chargement des pages web si elles sont utilisées avec parcimonie et intelligence. En effet, elles prennent toutes trois de la bande passante lors du préchargement donc nous devons absolument bien connaître nos sites web pour économiser notre bande passante et bien répartir les charges.

Prenons un exemple : un site web contient dix liens internes dont un qui recueille souvent les visites des internautes après un passage via la page d’accueil. Il serait opportun dans la page d’accueil d’ajouter un <link rel="prerender" href="page-prechargee.html" /> (ou « prefetch ») vers cette page souvent chargée pour gagner du temps. En revanche, il serait inutile de faire ce même type de procédé pour une page quasiment jamais visitée comme les mentions légales ou le plan du site notamment.

En d’autres termes, nous devons précharger ou mettre en cache uniquement les pages web qui méritent de gagner en vitesse de chargement car nous savons qu’elles risquent d’être visitées par les internautes. En termes de référencement, cela signifie que nous devons soit être très bon dans le teasing pour inciter nos internautes à cliquer plutôt sur certaines pages que sur d’autres ou plus sérieusement que nous avons intérêt à bien analyser les principaux scenarii de navigations.

Pour ce faire, sachez que Google Analytics est un très bon outil puisqu’il dispose de la fonctionnalité « Flux de visiteurs » qui permet en partie de suivre les pages les plus cliquées et visitées en fonction d’une page source précise. Nous pouvons aussi créer des entonnoirs de conversion pour mesurer ce type de données…

Option "flux de visiteurs" de Google Analytics pour suivre le parcours des internautes (scenarii de navigation)

Si nous savons quelles pages sont préférentielles pour nos utilisateurs, il peut être utile de précharger ou mettre en « tampon » les pages web qui suivent en général dans les visites des internautes. Ainsi, nous favorisons les temps de chargement des pages et le PageSpeed par la même occasion. Attention toutefois aux abus, il ne faut pas que les « prefetch » et « prerender » dominent vos pages web…

Pour finir, notons deux points à prendre en compte pour le référencement et Google :

  • La valeur « dns-prefetch » ne semble pas intéressante pour la SEO car le chargement d’une page externe n’est pas recommandé, ce serait se priver de bande passante pour des sites extérieurs indépendants des nôtres.
  • L’usage de « prefetch » ne se limite pas au chargement asynchrone de pages web mais à toutes les ressources. Par exemple, nous pouvons précharger un fichier CSS si nous estimons que cela fera gagner du temps aux visiteurs lors de chargement d’une page web…

« Prerender » utilisé avec l’événement Javascript « visibilitychange » ?

Voici un petit plus pour les plus intéressés d’entre vous… Le W3C a préparé une API appelée « Page Visibility » pour indiquer l’état et le type de chargement des pages web (« fenêtre », « onglet », « page complète », etc.). Ainsi, nous pouvons savoir à tout moment en Javascript dans quel état se trouve nos pages web afin d’interagir à l’aide d’un nouvel événement intitulé « visibilitychange ».

Cet événement est capable de savoir si un onglet est inactif ou si une page est minimisée. Ainsi, nous pourrions jouer avec les valeurs rendues par l’objet Javascript « visibilityState » afin de passer d’un type de « rel » à un autre en fonction des besoins (notamment entre « prefetch » et « prerender » en fonction des compatibilités, etc.).

Je n’en dis pas plus à ce sujet pour le moment car l’API « page visibility » car tout n’est pas encore compatible partout et n’a pas de rapport direct avec la SEO qui nous intéresse ici, mais vous pouvez vous référer à l’excellent article d’Alsacreations à ce sujet.

J’espère que ces nouveautés encore méconnues vous auront convaincu et que vous saurez en tirer profit pour améliorer la vitesse de chargement des pages web et le PageSpeed global de vos sites. En tout cas, il faut suivre cela de prêt car ce sont avec tous ces petits détails que nous pourrons faire de grandes choses… :D