Définition des critères de performance
Un site web se doit d’être optimisé pour améliorer son classement dans les résultats de recherche. Mis à part les requêtes concernant un nom de marque ou de société sur lesquelles le site officiel va apparaitre en premier, toutes les autres requêtes seront plus difficiles à positionner en référencement naturel. En effet, les moteurs de recherche comme Google analysent le code source d’un site Internet pour mettre en avant certains résultats en plus du sémantique et de la popularité. L’objectif principal est d’améliorer l’expérience utilisateur ce qui peut conduire le visiteur à partager le site Internet ou à le revisiter.
Si on se réfère à l’outil PageSpeed Insights pour analyser la vitesse de chargement et l’aspect technique d’un site, l’outil met en avant 4 critères : la performance, l’accessibilité, les bonnes pratiques et le SEO. Tous ces critères vont former un score de qualité qui va servir au classement dans les résultats de recherche. Il se peut qu’un site moins optimisé apparaisse avant un autre s’il possède beaucoup de backlinks. L’outil PageSpeed Insights mesure un score différent entre un support mobile ou desktop. Cet article va tenter d’amener des éléments de réponse pour comprendre l’optimisation technique.
Le score de performance
Améliorer la performance va permettre d’accélérer le chargement et la rapidité du rendu dans le navigateur du client.
Le temps de réponse du site Internet
Le temps de réponse du serveur TTFP (Time to First Byte) correspond au délai d’attente entre la demande du navigateur et le premier octet renvoyé. Ce délai est influencé par de nombreux critères aussi bien matériels que logiciels. Pour réduire ce délai, il faut investir sur un hébergement avec un bon processeur, de la RAM et de la bande passante. Au niveau logiciel il faut vérifier de bien être sur les dernières versions des langages de programmation et d’avoir un système de cache pour éviter de recharger toutes les sections. Sur WordPress on peut installer WP Super Cache ou WP-Rocket qui vont mettre en cache les pages pour améliorer le chargement du site.
L’affichage du premier et dernier élément
Une fois que le serveur a répondu, le navigateur doit construire le rendu visuel. Le délai d’apparition des premiers éléments se nomme le FCP (First Contentful Paint) et celui des éléments les plus grands le LCP (Largest Contentful Paint). Ces 2 délais peuvent s’améliorer en évitant de bloquer le rendu en chargeant le JavaScript et le CSS non essentiel d’une façon asynchrone. Cela va permettre au navigateur de se concentrer sur le rendu initial du texte et des images. On peut mettre les appels aux feuilles de styles CSS et JS en bas de son code HTML juste avant la fermeture du body et ajouter les attributs defer ou async sur les balises script. Attention de ne pas afficher un contenu sans style CSS au tout premier rendu ce qui n’est pas agréable pour le visiteur. Aussi il est possible de compresser l’HTML, les assets et les images au niveau du serveur en utilisant gzip ce qui va accélérer le chargement global du site Internet.
Le temps d’interactivité
Le temps d’interactivité TTI (Time to Interactive) est une métrique qui définit le délai ou l’utilisateur va pouvoir pleinement interagir avec le contenu. Une fois que les premiers rendus visuels sont affichés et qu’une interaction JavaScript répond en moins de 50 ms, la page est considérée comme étant utilisable pour le visiteur. Pour réduire ce délai, il faut alléger le rendu au niveau du CSS et du JavaScript. On peut réduire la profondeur du nombre de balises dans le code HTML ou optimiser les sélecteurs CSS. Au niveau du JS il faut alléger l’initialisation des scripts qui se lancent au chargement et privilégier l’initiation d’un module quand l’utilisateur va interagir avec ce dernier ou quand la page est complétement chargée.
Le score d’accessibilité
L’accessibilité répond au besoin d’offrir un code bien construit pour aider les personnes mal voyantes utilisant un système de lecture d’écran.
Définir les attributs alt et title
Les attributs ALT situées au niveau des images servent à renseigner une description. Elle vont être utilisées aussi bien pour les lecteurs d’écran que pour les moteurs de recherche. Toutes les images dans le code HTML doivent contenir cet attribut ce qui va améliorer le référencement. Les attributs TITLE sont utilisés quant à eux au niveau des liens pour renseigner un titre qui va s’afficher au survol de la souris. Ces attributs permettent d’ajouter du contenu non visible dans la page mais qui est pris en compte par les robots des moteurs de recherche. Il est donc doublement efficace de les renseigner pour les visiteurs mal voyants et le SEO.
<!-- L'attribut TITLE -->
<a href="/lien/vers/page" title="Description de la page">
Nom de la page
</a>
<!-- L'attribut ALT -->
<img src="logo-entreprise.png" alt="Dénomination sociale">Le contraste visuel et la lisibilité
Un des critères d’accessibilité importants est de faciliter la lecture du contenu de la page web. Certains moteurs de recherche prennent en compte le contraste entre la couleur du texte et celle du fond. La taille de la police doit être configurée de façon lisible pour l’internaute. Que ce soit sur un site Internet ou même en PAO, il faut privilégier la lisibilité du contenu à l’aspect graphique dans le design général.
Les attributs aria et HTML 5
ARIA (Accessible Rich Internet Applications) est un standard du W3C permettant d’enrichir le code HTML d’attributs pour aider les assistants de lecture. Les frameworks comme Bootstrap implémentent déjà ARIA dans leurs codes ce qui demande moins de travail pour optimiser une page. HTML 5 en natif utilise déjà des balises comme main, header ou nav donc il n’est pas nécessaire de les surcharger avec ARIA si on les utilise déjà. L’attribut ROLE permet d’expliquer le rôle d’une balise ça peut être par exemple un paragraphe contenant une note donc on ajoutera role=’note’ à la balise p ou un message d’alerte dans un div avec role=’alert’ sur ce dernier.
<!-- L'attribut ROLE -->
<div class="alert alert-success" role="alert">
Message personnalisé
</div>Le score des bonnes pratiques
Les bonnes pratiques sont un ensemble de recommandations reconnues pour améliorer la qualité et la sécurité d’un site.
Activer HTTPS
Le mode HTTPS est un standard par défaut depuis quelques années. Un site doit être accessible en HTTPS pour sécuriser la navigation. Il est recommandé de faire une redirection de http://domaine.com vers https://domaine.com pour sécuriser la connexion de l’utilisateur. Sans cela, tous les formulaires envoyés depuis une page peuvent être lisibles par une personne malveillante qui analyse les requêtes. Aujourd’hui la plupart des hébergeurs proposent d’utiliser gratuitement le certificat Let’s Encrypt. Il suffit de l’activer au niveau de l’interface d’administration pour sécuriser la connexion à son site Internet.
Les autorisations du navigateur
Au chargement d’une page web, de nombreux sites proposent d’activer certaines fonctionnalités du navigateur comme la géolocalisation ou les notifications. Ces demandes d’autorisation ne sont pas du tout pertinentes au premier chargement et vont mettre le visiteur dans un état de méfiance. Il sera donc plus difficile de les rassurer et de leur proposer une meilleure expérience utilisateur. Ces demandes d’autorisations doivent se faire après une interaction du visiteur pour que la demande d’autorisation provienne de sa volonté. Par exemple, il est mieux de demander d’activer la géolocalisation après l’affichage de la carte au niveau de la page contact.
Les images adaptatives et la légende
Il est possible d’ajouter plusieurs sources sur une même balise image pour définir plusieurs tailles qui s’afficheront selon la résolution du support de l’utilisateur. Pour cela, il faut créer les différentes images et utiliser les attributs SRCSET et SIZES pour les définir. De nombreux exemples sont disponibles sur les sites spécialisés ou les blogs et forums. Les balises FIGURE et FIGCAPTION quant à elles permettent d’ajouter une légende à l’image dont le style peut être personnalisé. Ces légendes ajoutent des mots clés dans le contenu sémantique de la page de façon simple.
<!-- Les attributs SRCSET et SIZES -->
<img srcset="image-480w.jpg 480w, image-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="image-800w.jpg"
alt="Description de l'image">
<!-- Les balises FIGURE et FIGCAPTION -->
<figure>
<img src="/assets/img/image.jpg" alt="Description de l'image">
<figcaption>Légende de l'image</figcaption>
</figure>Le score SEO
Les données structurées
Pour faciliter l’indexation du contenu d’une page par les moteurs de recherche, on peut utiliser les données structurées. Sur le site schema.org on retrouve l’ensemble des objets définis dans la spécification. Il est aussi possible de valider un schéma avec l’outil dédié sur le site. Les données peuvent être ajoutées sur une page HTML de différentes façons. On peut les mettre à partir d’un JavaScript ou directement dans le code HTML de la page au niveau de chaque balise avec les Microdata. Ainsi un moteur est capable de mieux comprendre les différentes sections d’une page ce qui améliore le contenu sémantique.
<!-- Microdata -->
<div itemscope itemtype="https://schema.org/Corporation">
<div>
<h1 itemprop="name">Dénomination sociale</h1>
<p itemprop="description">Description de l'entreprise.</p>
<p>Horaires: <span itemprop="openingHours" content="Mo-Fr 08:00-18:00">Lundi-Vendredi de 8h-18h</span></p>
<p>Téléphone: <span itemprop="telephone" content="+33506070809">05 06 07 08 09</span></p>
</div>
</div>Les balises META
Les balises META se renseignent au niveau du header de la page. Elles définissent les métadonnées du document et servent à différents usages. Certaines balises sont plus importantes que d’autres. On retrouve par exemple le charset qui représente le type d’encodage, la description, le title, le viewport ou la méta robots qui va définir comment un moteur doit analyser la page, etc. Toutes ces balises vont permettre d’améliorer l’indexation du site et son affichage dans les SERP.
<!-- Metadonnées -->
<head>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Titre de la page | Dénomination sociale</title>
<meta name="description" content="Description de la page d'environ 150 caractères">
<meta name="author" content="Identité de l'auteur du document">
<link rel="canonical" href="https://domaine.fr/url/page">
...
</head>Les fichiers robots.txt et sitemap.xml
Pour aider les moteurs à analyser la structure du site et définir des règles d’indexation, on peut utiliser les fichiers robots.txt et sitemap.xml qui se placent directement sur le serveur ou qui se génèrent avec un plugin comme Yoast SEO par exemple sur WordPress. Le fichier robots.txt peut contenir le lien vers le sitemap pour faciliter sa détection. Une fois renseignés, il est possible de les envoyer sur Google Search Console ou Bing Webmaster Tools afin de suivre l’indexation du site web sur ces plateformes.
Conclusion
Cet article propose une initiation et quelques conseils sur l’aspect technique des sites. Mais de nombreux autres points non abordés dans cet article sont importants à prendre en compte. En travaillant l’optimisation technique ça améliore la vitesse de chargement, le rendu dans le navigateur et l’expérience utilisateur. Un site agréable à utiliser et se chargeant rapidement fidélisera les visiteurs et fera gagner des positions dans les SERP. Une optimisation couplée à une stratégie sémantique et de backlinks sont la clé du référencement naturel.