Optimisation SEO : temps de chargement des pages de son site

Le temps de chargement des pages est un élément clé dans le succès d’un site internet. Elle influence directement le SEO, l’optimisation du positionnement des pages dans les résultats des moteurs de recherche, et pour les boutiques le nombre de ventes réalisées.
Le temps de chargement d’une page internet est dépendant de nombreux facteurs pouvant être classés en trois catégories: les facteurs liés au serveur physique, les facteurs liés au serveur web et les facteurs liés à la conception du site internet.

Bien choisir le serveur physique

Le serveur physique est la machine sur laquelle est hébergé un site internet. Il s’agit ni plus ni moins d’un ordinateur sans écran. Son matériel est choisi à la fois pour être performant et fiable.

Le serveur doit bénéficier d’une vitesse du port de réseau et d’une bande passante suffisamment importantes pour être en capacité de recevoir de nombreuses requêtes tout en envoyant « rapidement » de nombreuses réponses.

Les performances d’un serveur – qu’il soit dédié, virtualisé ou mutualisé – jouent un rôle primordial dans le temps de chargement d’une page internet. Un site utilisant un système de gestion de contenu (CMS) conçu avec un langage dynamique, comme PHP, et une base de données, comme MySQL, aura besoin d’être exécuté sur un serveur pouvant effectuer les traitements demandés sans saturer. Cette capacité à supporter la charge est dépendante de la consommation du CMS pour générer les pages mais aussi du nombre de requêtes effectuées simultanément. Les sites réalisés avec des systèmes de gestion de contenu tels que WordPress, Prestashop, Drupal ou Joomla indiquent quelle configuration matérielle minimale est nécessaire pour leur bon fonctionnement.

Si chaque site internet a ses propres besoins en terme de matériel, il est cependant conseillé d’opter pour du matériel dit de dernière génération afin de bénéficier des dernières technologies. Aujourd’hui, il est par exemple recommandé de choisir un disque dur SSD dont les performances en terme de temps de lecture et d’écriture sont les meilleures du marché.

Utiliser un CDN

Le temps de chargement d’une page est dépendant des temps de latence, le temps nécessaire aux données pour passer de la source à la destination. Ce temps peut être diminué en utilisant un réseau de diffusion de contenu, plus connu sous son appellation anglaise content delivery network (CDN).

La mise en place d’un CDN équivaut à placer le contenu d’un site internet sur un ensemble de serveurs répartis sur une vaste zone géographique. Les utilisateurs accèdent au contenu du site depuis le serveur le plus proche géographiquement de leur lieu de connexion.

La diminution du temps de transit des données n’est pas le seul bénéfice du CDN. Il améliore également la sécurité d’un site internet. Les attaques par déni de service, qui consistent à envoyer simultanément des milliers de requêtes à un serveur pour le surcharger, sont ainsi réparties entre plusieurs serveurs.

Optimiser le serveur web

Le serveur web est le logiciel en charge de traiter les requêtes effectuées sur un serveur physique. Il a également en charge la transmission des réponses. Les serveurs web les plus utilisés aujourd’hui sont Apache, Nginx et Microsoft-IIS.

Le travail le plus simple d’un serveur web est d’aller chercher un document sur le disque dur du serveur pour ensuite le transmettre. Le serveur web peut également jouer un rôle de chef d’orchestre lorsqu’une requête nécessite l’exécution d’un script, par exemple écrit en PHP.

L’optimisation de la configuration du serveur web, et aussi de l’ensemble des logiciels mis en jeu, permet de traiter les demandes, générer les pages et envoyer les réponses dans le plus petit laps de temps possible.

Si ces logiciels sont dépendants des performances du serveur, il est tout de même possible de mettre en place de nombreuses règles permettant d’accélérer le temps des différentes actions mais aussi de diminuer la charge serveur. Ces optimisations permettent d’entrer dans un cercle vertueux: le serveur gagne en disponibilité et ce dernier dispose de plus de ressources pour travailler efficacement.

L’installation et l’activation de systèmes de cache sont des moyens simples mais très efficaces d’améliorer les performances d’un serveur et in fine d’un site internet.

HTTP/2

Le transfert des pages internet et plus généralement des ressources est effectué avec le protocole de transfert hypertexte, plus connu sous l’abréviation HTTP, de l’anglais HyperText Transfer Protocol.

La version 2 du protocole, dénommée HTTP/2, est sorti en 2015. Il a été développé avec notamment pour objectif de permettre une transmission plus rapide des ressources. Les améliorations les plus notables sont la réduction de la latence grâce à la compression des en-têtes HTTP, données attachées aux ressources lors de leur transmission, et au multiplexage, qui permet de « combiner » plusieurs requêtes en une seule.

Si HTTP/2 est supporté par les versions les plus récentes des serveurs web, elle n’est pas encore proposée par de nombreux hébergeurs pour notamment des raisons de compatibilité entre les systèmes d’exploitation et les serveurs web.

Deux versions de HTTP/2 ont été développées : une première pour les échanges non-chiffrés (http) et une seconde pour les échanges chiffrés (https). Les navigateurs internet ont décidé d’implémenter seulement cette deuxième version. Les sites internet doivent donc installer un certificat SSL pour faire bénéficier leurs utilisateurs des avantages d’HTTP/2.

Optimiser les pages d’un site internet

L’optimisation des performances d’un serveur physique et de ses logiciels ne garantit pas à elle seule la réduction du temps de chargement des page. La conception du site et l’application de règles de bonnes pratiques sont également indispensables.

Demander la mise en cache dans le navigateur du visiteur

Un site internet peut demander au navigateur de l’utilisateur la mise en cache des ressources. Les pages, les images et plus généralement tous les fichiers transmis peuvent être conservés dans le cache du navigateur afin d’accélérer le temps de chargement d’une seconde page utilisant ces mêmes ressources.

Par exemple, le logo d’un site internet, présent sur toutes les pages, peut ainsi être téléchargé une seule fois et ensuite chargé depuis le disque dur de l’appareil de l’utilisateur. Cette pratique présente les avantages suivants: la ressource est plus rapidement chargée, la connexion de l’utilisateur n’est pas sollicitée et la charge du serveur diminue.

Utiliser des images adaptées au web

Les sites internet sont de plus en plus consultés avec des appareils mobiles aux connexions limitées. L’ouverte d’une page web sur ces terminaux peut être très lente, d’autant plus si les ressources sont trop lourdes.

Les images sont les ressources les plus utilisées dans les pages internet. L’intégration d’images non-adaptées aux contraintes du web ralentissent incroyablement le temps de chargement. L’utilisation dans les pages internet d’images sous forme compressées est obligatoire. Pour réduire le poids des images, le dimensionnement de ces dernières est également essentielle. Un photographe ne peut pas par exemple afficher sur une même page toutes les photos de son book dans leurs meilleures résolutions.

Si les images ont été pendant longtemps une problématique quasi-insoluble, HTML5 a apporté une solution très attendue. L’attribut srcset de la balise image (img) permet de définir plusieurs sources pour une même image. Le fichier à utiliser est sélectionné en fonction de la taille de l’écran et de la densité de pixels de l’appareil de l’utilisateur.

Minimiser le poids des fichiers Javascript et CSS

Les fichiers Javascript et CSS sont souvent nécessaires pour l’affichage d’une page internet. Ces ressources sont transmises sous forme de fichier texte. Pour réduire leur temps de chargement, il est possible d’optimiser leur poids avec la « minification ». Ce mot anglais désigne l’opération consistant à éliminer tous les caractères superflus, comme des espaces ou des tabulations, et les caractères insignifiants, comme les commentaires.

Cette « minification » peut être accompagnée d’une concaténation. Cette opération consiste à fusionner tous les fichiers texte de même type en un seul. Le Javascript et le CSS sont les cibles de cette technique. Ces regroupements ont pour intérêt de transmettre une seule fois les informations attachées au fichier, les en-têtes, mais aussi de limiter le nombre de requêtes. Un navigateur ne peut pas demander simultanément une infinité de ressources à un même nom de domaine.

Compresser les ressources transmises

Le temps de chargement peut également être réduit avec la transmission de ressources compressées. Le format utilisé est gz. Il est supporté par les navigateurs depuis déjà 15 ans.

Mise en cache: générer les pages une seule fois

Un site internet peut transmettre des ressources statiques mais aussi des ressources demandant une génération. Il est possible dans de nombreuses situations de mettre en cache l’élément créé, généralement une page. De nombreux systèmes de gestion de contenu proposent des solutions natives ou via l’installation d’une extension.

Cette technique permet non seulement de réduire drastiquement le temps de chargement d’une page internet mais aussi de préserver les ressources du serveur.

Différer le chargement de certaines ressources

Une page internet peut intégrer de nombreuses ressources comme des fichiers Javascript, des fichiers CSS, des images ou encore des vidéos.

Le chargement de ces fichiers peut bloquer l’affichage de la page internet. Il est possible par exemple pour les fichiers Javascript de demander leur chargement différé. Attention, cette technique est réalisable uniquement lorsque les ressources ne sont pas nécessaires à la consultation d’une page.

Google recommande aujourd’hui de différer le chargement de la feuille de style en l’intégrant à la fin du code HTML. Pour mettre en place cette « astuce », il est nécessaire d’intégrer au début du code HTML un minimum de règles de style. Sans ce code, la page ne sera pas mise en forme.

Proposer des pages sans erreur de code

Les erreurs dans le code HTML, mais aussi dans le code CSS et Javascript, peuvent ralentir le temps d’affichage d’une page internet. Les navigateurs internet utilisent des moteurs de rendu et l’interprétation de code comportant des erreurs ralentit leur travail. Les validateurs du W3C, l’organisme de standardisation de nombreux langages internet, peuvent être utilisés pour s’assurer de la qualité du code HTML et CSS.

Proposer une version adaptée au terminal de l’utilisateur

Le développement d’une version mobile d’un site internet permet de proposer des pages aux contenus « allégés » et donc plus rapidement chargées par les utilisateurs aux connexions limitées. Si cette solution est très efficace, elle a un coût : tout d’abord sa conception puis ensuite sa maintenance.

Google demande depuis plusieurs mois déjà aux sites internet de proposer une version AMP de leur site. AMP, Accelerated Mobile Pages, est un format destiné à créer des pages internet optimisés pour un rendu ultra-rapide.

Mesurer les performances des pages d’un site internet

Les performances de chargement des pages d’un site internet peuvent être mesurées avec de nombreux outils comme GTMetrix ou Pingdom. Cependant, s’il fallait réaliser un seul test, il est vivement conseillé d’utiliser Google Page Speed Insight. Comme son nom l’indique, cet outil a été développé par Google. Il fournit deux notes sur 100, une première pour le chargement sur mobile et une seconde pour le chargement sur PC. Avec ces évaluations, Google Page Speed Insight fournit une une liste des améliorations possibles.