Le Site de la Semaine – « Optipaie »

Trois secondes. C’est à peu près le temps qu’un visiteur pressé accorde à une page avant de perdre patience. Une, il attend. Deux, il fronce les sourcils. Trois, il revient en arrière et clique sur le résultat suivant… celui de votre concurrent. La vitesse d’un site ne se voit pas sur une maquette, ne se montre pas en réunion, et pourtant elle décide d’une bonne partie de ce qui se passe ensuite.

Les prospects ont le réflexe de chercher une entreprise sur internet avant de la contacter. D’où l’intérêt d’être visible sur les moteurs de recherche, grâce à un site vitrine et un référencement optimisés. C’est ce que rappelait la première version de cet article, consacré au site responsive réalisé par Graph’in ! pour Optipaie, en ligne à cette adresse : optipaie.fr. Nous reprenons ce projet comme point de départ pour parler de l’ingrédient le plus discret d’un bon référencement : la rapidité. Pourquoi un site lent perd des visiteurs, comment on le mesure, et comment l’équipage de Graph’in ! s’y prend pour livrer des sites qui démarrent au quart de tour.

Pourquoi la vitesse compte autant

Un site lent agace. Ça, tout le monde le sait. Ce que l’on sait moins, c’est que la lenteur coûte deux fois : une fois auprès du visiteur, une fois auprès de Google.

Auprès du visiteur, d’abord. Plus une page met de temps à s’afficher, plus la proportion de visiteurs qui repartent sans rien lire augmente. Sur mobile, avec une connexion 4G moyenne dans un train ou au fond d’un entrepôt, chaque seconde pèse plus lourd encore. Un site vitrine a pour mission de convaincre un prospect de prendre contact ; s’il n’a pas le temps d’apparaître, il ne convainc personne.

Auprès de Google, ensuite. Depuis 2021, le moteur intègre à son classement un ensemble d’indicateurs de performance appelés Core Web Vitals (les « signaux web essentiels »). À contenu égal, une page rapide et stable a un petit avantage sur une page lente et brouillonne. Ce n’est pas le critère principal (la pertinence du contenu reste reine), mais sur des recherches disputées, ce petit avantage peut suffire à passer devant.

Ce que Google mesure, en clair

Les Core Web Vitals sont trois mesures, dont les noms anglais intimident plus que leur sens.

Le temps d’affichage du contenu principal

Le LCP (Largest Contentful Paint) mesure le temps nécessaire pour afficher l’élément le plus grand de la page : souvent la grande image d’accueil ou le titre principal. Google considère qu’un LCP inférieur à 2,5 secondes est bon. Au-delà de 4 secondes, il est jugé médiocre.

La réactivité aux actions

L’INP (Interaction to Next Paint) mesure le délai entre une action du visiteur (un clic, une touche, l’ouverture d’un menu) et la réaction visible de la page. Un bon INP est inférieur à 200 millisecondes. Un site qui charge beaucoup de scripts (chats en ligne, outils de suivi, animations complexes) a tendance à se traîner sur ce critère.

La stabilité de la mise en page

Le CLS (Cumulative Layout Shift) mesure les sauts de mise en page pendant le chargement. Vous connaissez la scène : vous allez toucher un lien, une bannière apparaît au-dessus, tout descend d’un cran et vous cliquez sur autre chose. Un bon CLS est inférieur à 0,1. Les principaux coupables sont les images sans dimensions déclarées, les polices qui se chargent tard et les encarts publicitaires.

Ces mesures se consultent gratuitement avec l’outil PageSpeed Insights de Google et, pour un site déjà en ligne, dans Google Search Console, qui les calcule à partir des visites réelles de vos internautes.

Les poids lourds qui ralentissent un site

Quand nous auditons un site lent, nous retrouvons presque toujours les mêmes passagers clandestins dans la cale.

• Des images trop lourdes. Une photo de plusieurs mégaoctets posée telle quelle dans une page, affichée en vignette de 300 pixels. C’est la cause numéro un, et de loin.
• Trop d’extensions WordPress. Chaque module ajoute ses propres fichiers de style et ses scripts, souvent sur toutes les pages, même celles qui n’en ont pas besoin.
• Des polices de caractères multiples, chargées dans toutes leurs graisses alors que la page n’en utilise que deux.
• Des scripts tiers : outils de statistiques, pixels publicitaires, widgets de réseaux sociaux, chats en ligne. Chacun appelle un serveur extérieur, qui a ses propres lenteurs.
• Un hébergement sous-dimensionné, ou mal configuré, qui met du temps à envoyer la première réponse.
• Un thème trop généreux, qui charge des dizaines de fonctions dont le site n’utilise qu’une petite partie.

La méthode Graph’in ! pour un site qui file

La vitesse ne s’ajoute pas à la fin, comme une couche de vernis. Elle se prépare dès la conception, à chaque décision.

Des images préparées une par une

Chaque image est redimensionnée à la taille où elle sera affichée, puis exportée dans un format moderne et léger (WebP, ou AVIF quand c’est possible). WordPress sert ensuite automatiquement des versions plus petites aux petits écrans. Les images situées plus bas dans la page ne sont chargées qu’au moment où le visiteur s’en approche (le « chargement différé »). Enfin, chaque image a ses dimensions déclarées dans le code, ce qui évite les fameux sauts de mise en page.

Graph’in ! étant aussi un studio photo, nous avons l’avantage de maîtriser la chaîne de bout en bout : de la prise de vue à l’export web, la photo est pensée pour le site qui va l’accueillir.

Moins d’extensions, et des extensions maison

Nous limitons le nombre d’extensions au strict nécessaire. Pour les fonctions que l’on retrouve sur presque tous les sites (sécurité, bandeau de consentement aux cookies, référencement), le studio a développé ses propres extensions WordPress. Elles ne font que ce dont nos sites ont besoin, sans options superflues ni publicités dans l’administration, et sans abonnement annuel. Un module conçu pour mille usages pèse forcément plus lourd qu’un module conçu pour un seul.

Le cache et la compression

Un site WordPress fabrique ses pages à la demande, en interrogeant sa base de données. Le cache consiste à garder en réserve une version toute prête de chaque page, envoyée instantanément aux visiteurs suivants. Ajoutez la compression des fichiers envoyés et la minification des feuilles de style et des scripts (on retire les espaces et les commentaires inutiles), et la page arrive allégée. Ces réglages se font au cas par cas, selon l’hébergement et les fonctions du site : un cache mal configuré peut afficher une ancienne version d’une page, ou casser un formulaire.

Les scripts tiers sous surveillance

Chaque outil extérieur (statistiques, publicité, vidéo intégrée) est examiné : est-il vraiment utile ? Peut-il être chargé plus tard, après l’affichage de la page ? Une vidéo YouTube, par exemple, peut n’apparaître qu’au clic du visiteur, avec une simple image à la place en attendant. Le bandeau cookies participe aussi à cet effort : les outils qui demandent un consentement ne se chargent qu’une fois ce consentement donné, ce qui allège la première visite… et respecte la loi.

Les polices, ces passagères gourmandes

Une identité visuelle repose souvent sur une ou deux polices de caractères bien choisies. Sur le web, chaque police (et chaque graisse : maigre, normale, grasse, italique) est un fichier à télécharger. Nous chargeons uniquement les graisses réellement utilisées, nous hébergeons les fichiers sur le serveur du site plutôt que chez un service extérieur (ce qui évite un appel supplémentaire et règle au passage une question de données personnelles), et nous demandons au navigateur d’afficher le texte tout de suite avec une police de secours, en attendant la police définitive. Le visiteur lit dès la première seconde, au lieu de contempler une page blanche.

Un hébergement à la bonne taille

Le meilleur site du monde reste lent sur un serveur poussif. Nous vérifions la version de PHP, la mémoire disponible, la localisation du serveur (en Europe pour une clientèle française) et la présence d’un cache côté serveur. Pour les sites de nos clients, nous conseillons des hébergements dont nous connaissons le comportement, plutôt que l’offre la moins chère du moment.

Rapide sur ordinateur, rapide sur téléphone

Un site responsive, comme celui d’Optipaie, adapte sa mise en page à chaque écran. Mais adapter la mise en page ne suffit pas : il faut aussi adapter le poids. Un téléphone a souvent une connexion moins stable et un processeur moins puissant qu’un ordinateur de bureau. Google évalue d’ailleurs les sites d’abord dans leur version mobile.

Nous testons donc la vitesse sur mobile en priorité, avec une connexion bridée pour simuler un réseau moyen. Ce qui passe bien sur la fibre du studio peut se révéler laborieux dans une zone mal couverte. La conception pensée pour le téléphone est l’angle de notre article sur le site de La P’tite Diablotine.

Garder la vitesse dans la durée

Un site rapide le jour de sa livraison peut ralentir au fil des mois. On ajoute une page avec une photo non optimisée, on installe une extension pour un besoin ponctuel, on intègre un nouvel outil de suivi. Petit à petit, la coque se charge de coquillages.

La maintenance que nous proposons inclut une surveillance régulière des performances. Les rapports de Google Search Console signalent les pages qui se dégradent ; nous intervenons avant que le classement n’en pâtisse. Nous formons aussi nos clients à quelques bons réflexes, comme redimensionner une photo avant de l’ajouter à un article. La vie d’un site après sa mise en ligne (mises à jour, sauvegardes, sécurité) est détaillée dans l’article consacré au site de Theoxis.

Ne pas courir après le score parfait

Un mot de prudence pour finir : la note de PageSpeed Insights n’est pas une fin en soi. Un score de 100 sur 100 obtenu en supprimant toutes les photos et toutes les fonctions utiles serait une victoire à la Pyrrhus. L’objectif est un site agréable pour le visiteur réel, qui reste dans les seuils recommandés par Google. Entre un site léger mais vide et un site riche mais poussif, il existe un juste milieu, et c’est là que nous mettons le cap.

Votre site se traîne ? Hissons les voiles

Si votre site met plus de quelques secondes à s’afficher sur un téléphone, vos prospects le remarquent avant vous. Graph’in ! conçoit des sites rapides dès leur construction et peut aussi auditer et accélérer un site existant, à Nantes, à Ancenis et à distance partout en France. Découvrez notre offre Web & réseaux sociaux, parcourez nos réalisations, puis contactez-nous pour faire le point.

Levez l’encre !

Vos questions, nos réponses