Cet article a été rédigé initialement sur le site bee4.fr. Il s’agit d’un article invité, publié ici pour maintenir le contenu.

Google pénalise-t-il des sites trop lents ? Son bot passe-t-il moins de temps sur votre site parce qu’il met trop de temps à s’afficher ? Quel impact SEO pour le rebond de l’internaute qui revient sur le résultat de recherche de Google ? Autant de questions à se poser quand on pense optimisation du référencement naturel.

C’est clair et net que le temps de chargement est un critère de pertinence aux yeux de Google.  Même si son impact sur le SEO est difficilement mesurable, il reste important parmi les critères techniques d’optimisation. Par ailleurs, un article intéressant du Journal du Net à ce sujet, résume bien l’ensemble des enjeux et donne quelques bonnes clefs de lecture.

Nous souhaitons apporter un complément d’infos sous l’angle plus pratique de la mise en œuvre de correctifs et d’éléments d’optimisation.

PageSpeed Insights : dois-je prendre « à la lettre » les conseils de Google ?

L’outil de diagnostic de Google consacré à la performance web donne plusieurs types de recommandations, ainsi qu’un score global. Mais que faire de ces conseils ? Comment les traiter et par quelle priorité ? Dois-je m’inquiéter pour mon référencement si techniquement les modifications recommandées sont trop complexes à intégrer ?

En réalité, Google PageSpeed donne des orientations, des axes d’amélioration mais tout n’est pas à prendre à la lettre. Certaines optimisations sortent du lot et relèvent des bonnes pratiques sans obliger la remise à plat du code source.

Réduire le temps de réponse du serveur : effectivement, il faut s’y pencher !

Le temps de chargement est une des priorités pour PageSpeed aujourd’hui. Le serveur doit répondre en moins de 200ms pour être considéré comme efficace. Ce temps de réponse ne comprend que le calcul de la page HTML par le serveur.
À ce niveau il n’y pas un conseil type à donner, il faut intervenir au niveau du code source du site (PHP par exemple) ou de l’infrastructure pour optimiser :

  • Limiter le nombre d’appel à la base de données ;
  • Utiliser la mise en cache pour ne pas recalculer les données froides à chaque affiche d’une page ;
  • Mettre en cache la page HTML calculée ;
  • Limiter le code exécuté pour générer la page au strict minimum.

En fonction de l’outil (WordPress, Drupal, …) ou framework (Symfony, Laravel, …) utilisé et de la qualité de la base de code, la quantité de travail nécessaire est très variable. Il est important de garder en tête que le premier objectif n’est pas une optimisation complète mais bien qu’il faut travailler sur les points les plus efficaces.

Nous ne parlons pas ici du temps d’affichage au sein du navigateur qui intègre la récupération des ressources CSS, JS, images nécessaires au rendu de la page. Ce deuxième indicateur est tout aussi important (peut être même plus) mais peut être fortement amélioré avec les actions ci-dessous.

Exploiter la mise en cache du navigateur : essentiel, simple et efficace !

Les navigateurs web mettent en cache les fichiers reçus ce qui permet de ne pas télécharger une nouvelle fois le même fichier lorsqu’on recharge la page. C’est vrai pour toutes les ressources (images, javascript, css, …).
On peut définir combien de temps le cache va perdurer en modifiant les en-têtes renvoyés par le serveur avec les fichiers. Pour cela il faut rajouter des lignes dans la configuration du serveur web :

Autoriser la compression des ressources

La compression des fichiers JS et CSS permet de réduire le temps de transit entre le serveur et le navigateur (le serveur compresse et le navigateur décompresse). C’est exactement comme pour la mise en cache, il suffit d’utiliser les bons en-têtes sur les fichiers pour l’autoriser.

Éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison

Un navigateur traite le chargement de la structure HTML instruction par instruction. S’il rencontre un fichier à télécharger, il s’en charge avant de continuer sur le reste. Les fichiers CSS et JS qui sont inclus dans la page, bloquent donc l’affichage du reste du contenu. C’est vrai sur toutes les ressources (images, css, js, svg…).

Mais bon, franchement, quel site n’a pas ce problème ? Et surtout, si cela nécessite des correctifs, doit-on remettre à plat tout le code ?

En réalité, on peut traiter ce problème de deux façons :

  • Déplacer vers le bas de la page les fichiers qui ne sont pas directement utiles pour l’affichage (typiquement les JS)
  • Charger de manière asynchrone les ressources lourdes comme Google Maps par exemple. La page se charge et ensuite en récupère en JavaScript le fichier et on l’intègre dans la page.

Dans le premier cas, il suffit “simplement” de déplacer le code d’inclusion. Même si c’est une intervention dans le code HTML du site, elle est très légère.
La deuxième solution est très efficace, surtout pour les énormes librairies externes (comme GoogleMap)… mais, il y a un MAIS : cette technique est un peu plus complexe et coûteuse car elle demande de retravailler la base de code.

Optimiser les images

Les images peuvent toujours être compressées sans pour autant perdre de la qualité. Les logiciels comme Photoshop ou autre intègrent dans les fichiers des tas d’informations inutiles pour une utilisation web, même lorsqu’on « enregistre pour le web ».

Il existe des logiciels pour compresser les images comme ImageOptim, PNGyU. Il y a aussi des services en ligne comme le très récent Imagify.

Pour cela, il suffit de trois étapes :

  • Récupèrer toutes les images (de la bibliothèque de médias du système de gestion de contenu) ;
  • Traiter ces images dans le logiciel ;
  • Remettre la version compressée sur le serveur.

Il est important aussi d’utiliser ces logiciels sur les images décoratives (utilisées dans le CSS) et pas que sur les images de contenus. L’utilisation de ce genre d’outils permet de gagner facilement 30% de poids sur les images.

En complément, nous vous conseillons d’utiliser la technique des « sprites » CSS afin de limiter le nombre de petit fichiers utilisés pour les images décoratives. Une petite alerte SEO et accessibilité, un « sprite » ne doit être utilisé que sur des images de fond non informatives, car on ne peut pas utiliser d’alternative textuelle.

Réduire la taille des ressources JavaScript et CSS

Cette remarque est à voir sous deux angles, soit il y a trop de code utilisé dans la page (avec la nécessité de retravailler la base de code), soit les fichiers sont trop volumineux.

Dans le premier cas, il faut faire attention aux outils utilisés. Par exemple faire attention aux les plugins ajoutés avec jQuery qui incluent souvent une couche énorme de code… Il faut aussi faire attention de n’inclure dans une page que les styles et scripts utiles et pas ceux de tout le site !

Dans le second cas, il faut vérifier si les fichiers sont bien “minifiés », c’est à dire transformés pour ne plus contenir de saut de ligne ni d’espace superflus. Il existe des outils facilement intégrables dans une chaîne de développement pour réaliser cette opération :

Ce n’est pas la même technique que la compression évoquée plus haut, cette « minification » vient en complément.

Ces outils doivent être intégrés dans la chaîne de développement ce qui nécessite une action côté développeur, il ne suffit pas de modifier un petit fichier…

Ça reste complexe, comment je m’y retrouve dans tout ça ?

Ces différentes techniques d’optimisations sont aujourd’hui devenues des standards dans le développement web. Il existe beaucoup de ressources et d’exemples pour en faciliter utilisation. Les agences et les développeurs sont normalement familiarisés avec les configurations nécessaires et les outils à manipuler.

La mise en place de ces règles ne vous fera pas atteindre le score de 100% sur les outils de validation comme Google PageSpeed mais vous améliorerez largement l’expérience de navigation sur votre site, c’est ce qui reste le plus important.
Nous avons listé ici, les actions ayant un meilleur retour sur investissement par rapport au temps passé et à la complexité d’intégration.

Besoin d’un conseil ou d’une vérification ? Contactez-nous !

Stéphane Hulard & Teodor Dachev