Si on se r\u00e9f\u00e8re \u00e0 l’outil PageSpeed Insights<\/a> pour analyser la vitesse de chargement et l’aspect technique d’un site, l’outil met en avant 4 crit\u00e8res : la performance, l’accessibilit\u00e9, les bonnes pratiques <\/strong>et le SEO<\/strong>. Tous ces crit\u00e8res vont former un score de qualit\u00e9 qui va servir au classement dans les r\u00e9sultats de recherche. Il se peut qu’un site moins optimis\u00e9 apparaisse avant un autre s’il poss\u00e8de beaucoup de backlinks. L’outil PageSpeed Insights mesure un score diff\u00e9rent entre un support mobile ou desktop. Cet article va tenter d’amener des \u00e9l\u00e9ments de r\u00e9ponse pour comprendre l’optimisation technique.<\/p>\n\n\n\n Am\u00e9liorer la performance va permettre d’acc\u00e9l\u00e9rer le chargement et la rapidit\u00e9 du rendu dans le navigateur du client.<\/p>\n\n\n\n Le temps de r\u00e9ponse du serveur TTFP (Time to First Byte)<\/strong> correspond au d\u00e9lai d’attente entre la demande du navigateur et le premier octet renvoy\u00e9. Ce d\u00e9lai est influenc\u00e9 par de nombreux crit\u00e8res aussi bien mat\u00e9riels que logiciels. Pour r\u00e9duire ce d\u00e9lai, il faut investir sur un h\u00e9bergement avec un bon processeur, de la RAM et de la bande passante. Au niveau logiciel il faut v\u00e9rifier de bien \u00eatre sur les derni\u00e8res versions des langages de programmation et d’avoir un syst\u00e8me de cache<\/strong> pour \u00e9viter de recharger toutes les sections. Sur WordPress on peut installer WP Super Cache <\/strong>ou WP-Rocket<\/strong> qui vont mettre en cache les pages pour am\u00e9liorer le chargement du site.<\/p>\n\n\n\n Une fois que le serveur a r\u00e9pondu, le navigateur doit construire le rendu visuel. Le d\u00e9lai d’apparition des premiers \u00e9l\u00e9ments se nomme le FCP (First Contentful Paint)<\/strong> et celui des \u00e9l\u00e9ments les plus grands le LCP (Largest Contentful Paint)<\/strong>. Ces 2 d\u00e9lais peuvent s’am\u00e9liorer en \u00e9vitant de bloquer le rendu en chargeant le JavaScript et le CSS non essentiel d’une fa\u00e7on 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\u00e9able 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\u00e9l\u00e9rer le chargement global du site Internet.<\/p>\n\n\n\n Le temps d’interactivit\u00e9 TTI (Time to Interactive)<\/strong> est une m\u00e9trique qui d\u00e9finit le d\u00e9lai ou l’utilisateur va pouvoir pleinement interagir avec le contenu. Une fois que les premiers rendus visuels sont affich\u00e9s et qu’une interaction JavaScript r\u00e9pond en moins de 50 ms, la page est consid\u00e9r\u00e9e comme \u00e9tant utilisable pour le visiteur. Pour r\u00e9duire ce d\u00e9lai, il faut all\u00e9ger le rendu au niveau du CSS et du JavaScript. On peut r\u00e9duire la profondeur du nombre de balises dans le code HTML ou optimiser les s\u00e9lecteurs CSS<\/a>. Au niveau du JS il faut all\u00e9ger l’initialisation des scripts qui se lancent au chargement et privil\u00e9gier l’initiation d’un module quand l’utilisateur va interagir avec ce dernier ou quand la page est compl\u00e9tement charg\u00e9e.<\/p>\n\n\n\n L’accessibilit\u00e9 r\u00e9pond au besoin d’offrir un code bien construit pour aider les personnes mal voyantes utilisant un syst\u00e8me de lecture d’\u00e9cran.<\/p>\n\n\n\n Les attributs ALT<\/strong> situ\u00e9es au niveau des images servent \u00e0 renseigner une description. Elle vont \u00eatre utilis\u00e9es aussi bien pour les lecteurs d’\u00e9cran que pour les moteurs de recherche. Toutes les images dans le code HTML doivent contenir cet attribut ce qui va am\u00e9liorer le r\u00e9f\u00e9rencement. Les attributs TITLE<\/strong> sont utilis\u00e9s quant \u00e0 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.<\/p>\n\n\n\n Un des crit\u00e8res d’accessibilit\u00e9 importants est de faciliter la lecture du contenu de la page web. Certains moteurs de recherche prennent en compte le contraste <\/strong>entre la couleur du texte et celle du fond. La taille de la police doit \u00eatre configur\u00e9e de fa\u00e7on lisible pour l’internaute. Que ce soit sur un site Internet ou m\u00eame en PAO, il faut privil\u00e9gier la lisibilit\u00e9 du contenu \u00e0 l’aspect graphique dans le design g\u00e9n\u00e9ral.<\/p>\n\n\n\n ARIA (Accessible Rich Internet Applications)<\/strong> est un standard du W3C permettant d’enrichir le code HTML d’attributs pour aider les assistants de lecture. Les frameworks comme Bootstrap impl\u00e9mentent d\u00e9j\u00e0 ARIA dans leurs codes ce qui demande moins de travail pour optimiser une page. HTML 5 en natif<\/strong> utilise d\u00e9j\u00e0 des balises comme main, header ou nav donc il n’est pas n\u00e9cessaire de les surcharger avec ARIA si on les utilise d\u00e9j\u00e0. L’attribut ROLE<\/strong> permet d’expliquer le r\u00f4le d’une balise \u00e7a peut \u00eatre par exemple un paragraphe contenant une note donc on ajoutera role=’note’ \u00e0 la balise p ou un message d’alerte dans un div avec role=’alert’ sur ce dernier.<\/p>\n\n\n\n Les bonnes pratiques sont un ensemble de recommandations reconnues pour am\u00e9liorer la qualit\u00e9 et la s\u00e9curit\u00e9 d’un site.<\/p>\n\n\n\n Le mode HTTPS<\/strong> est un standard par d\u00e9faut depuis quelques ann\u00e9es. Un site doit \u00eatre accessible en HTTPS pour s\u00e9curiser la navigation. Il est recommand\u00e9 de faire une redirection de http:\/\/domaine.com vers https:\/\/domaine.com pour s\u00e9curiser la connexion de l’utilisateur. Sans cela, tous les formulaires envoy\u00e9s depuis une page peuvent \u00eatre lisibles par une personne malveillante qui analyse les requ\u00eates. Aujourd’hui la plupart des h\u00e9bergeurs proposent d’utiliser gratuitement le certificat Let’s Encrypt. Il suffit de l’activer au niveau de l’interface d’administration pour s\u00e9curiser la connexion \u00e0 son site Internet.<\/p>\n\n\n\n Au chargement d’une page web, de nombreux sites proposent d’activer certaines fonctionnalit\u00e9s du navigateur comme la g\u00e9olocalisation<\/strong> ou les notifications<\/strong>. Ces demandes d’autorisation ne sont pas du tout pertinentes au premier chargement et vont mettre le visiteur dans un \u00e9tat de m\u00e9fiance. Il sera donc plus difficile de les rassurer et de leur proposer une meilleure exp\u00e9rience utilisateur. Ces demandes d’autorisations doivent se faire apr\u00e8s une interaction du visiteur pour que la demande d’autorisation provienne de sa volont\u00e9. Par exemple, il est mieux de demander d’activer la g\u00e9olocalisation apr\u00e8s l’affichage de la carte au niveau de la page contact.<\/p>\n\n\n\n Il est possible d’ajouter plusieurs sources sur une m\u00eame balise image pour d\u00e9finir plusieurs tailles qui s’afficheront selon la r\u00e9solution du support de l’utilisateur. Pour cela, il faut cr\u00e9er les diff\u00e9rentes images et utiliser les attributs SRCSET<\/strong> et SIZES<\/strong> pour les d\u00e9finir. De nombreux exemples sont disponibles sur les sites sp\u00e9cialis\u00e9s ou les blogs et forums. Les balises FIGURE<\/strong> et FIGCAPTION<\/strong> quant \u00e0 elles permettent d’ajouter une l\u00e9gende \u00e0 l’image dont le style peut \u00eatre personnalis\u00e9. Ces l\u00e9gendes ajoutent des mots cl\u00e9s dans le contenu s\u00e9mantique de la page de fa\u00e7on simple.<\/p>\n\n\n\n Pour faciliter l’indexation du contenu d’une page par les moteurs de recherche, on peut utiliser les donn\u00e9es structur\u00e9es<\/strong>. Sur le site schema.org<\/a> on retrouve l’ensemble des objets d\u00e9finis dans la sp\u00e9cification. Il est aussi possible de valider un sch\u00e9ma avec l’outil d\u00e9di\u00e9 sur le site. Les donn\u00e9es peuvent \u00eatre ajout\u00e9es sur une page HTML de diff\u00e9rentes fa\u00e7ons. On peut les mettre \u00e0 partir d’un JavaScript ou directement dans le code HTML de la page au niveau de chaque balise avec les Microdata<\/strong>. Ainsi un moteur est capable de mieux comprendre les diff\u00e9rentes sections d’une page ce qui am\u00e9liore le contenu s\u00e9mantique.<\/p>\n\n\n\n Les balises META<\/strong> se renseignent au niveau du header de la page. Elles d\u00e9finissent les m\u00e9tadonn\u00e9es du document<\/strong> et servent \u00e0 diff\u00e9rents usages. Certaines balises sont plus importantes que d’autres. On retrouve par exemple le charset qui repr\u00e9sente le type d’encodage, la description, le title, le viewport ou la m\u00e9ta robots qui va d\u00e9finir comment un moteur doit analyser la page, etc. Toutes ces balises vont permettre d’am\u00e9liorer l’indexation du site et son affichage dans les SERP.<\/p>\n\n\n\n Pour aider les moteurs \u00e0 analyser la structure du site et d\u00e9finir des r\u00e8gles d’indexation, on peut utiliser les fichiers robots.txt<\/strong> et sitemap.xml<\/strong> qui se placent directement sur le serveur ou qui se g\u00e9n\u00e8rent avec un plugin comme Yoast SEO<\/strong> par exemple sur WordPress. Le fichier robots.txt peut contenir le lien vers le sitemap pour faciliter sa d\u00e9tection. Une fois renseign\u00e9s, il est possible de les envoyer sur Google Search Console<\/a> ou Bing Webmaster Tools<\/a> afin de suivre l’indexation du site web sur ces plateformes.<\/p>\n\n\n\n Cet article propose une initiation et quelques conseils sur l’aspect technique des sites. Mais de nombreux autres points non abord\u00e9s dans cet article sont importants \u00e0 prendre en compte. En travaillant l’optimisation technique<\/strong> \u00e7a am\u00e9liore la vitesse de chargement, le rendu dans le navigateur et l’exp\u00e9rience utilisateur. Un site agr\u00e9able \u00e0 utiliser et se chargeant rapidement fid\u00e9lisera les visiteurs et fera gagner des positions dans les SERP. Une optimisation coupl\u00e9e \u00e0 une strat\u00e9gie s\u00e9mantique et de backlinks sont la cl\u00e9 du r\u00e9f\u00e9rencement naturel.<\/p>\n\n\n\n\n![\"\"](\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/02\/illustration_performance-site.png\")
Le score de performance<\/h2>\n\n\n\n
Le temps de r\u00e9ponse du site Internet<\/h3>\n\n\n\n
L’affichage du premier et dernier \u00e9l\u00e9ment<\/h3>\n\n\n\n
Le temps d’interactivit\u00e9<\/h3>\n\n\n\n
\n\n\n\nLe score d’accessibilit\u00e9<\/h2>\n\n\n\n
D\u00e9finir les attributs alt et title<\/h3>\n\n\n\n
<!-- L'attribut TITLE -->\n<a href=\"\/lien\/vers\/page\" title=\"Description de la page\">\n Nom de la page\n<\/a>\n\n<!-- L'attribut ALT -->\n<img src=\"logo-entreprise.png\" alt=\"D\u00e9nomination sociale\"><\/code><\/pre>\n\n\n\nLe contraste visuel et la lisibilit\u00e9<\/h3>\n\n\n\n
Les attributs aria et HTML 5<\/h3>\n\n\n\n
<!-- L'attribut ROLE -->\n<div class=\"alert alert-success\" role=\"alert\">\n Message personnalis\u00e9\n<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\nLe score des bonnes pratiques<\/h2>\n\n\n\n
Activer HTTPS<\/h3>\n\n\n\n
Les autorisations du navigateur<\/h3>\n\n\n\n
Les images adaptatives et la l\u00e9gende<\/h3>\n\n\n\n
<!-- Les attributs SRCSET et SIZES -->\n<img srcset=\"image-480w.jpg 480w, image-800w.jpg 800w\"\n sizes=\"(max-width: 600px) 480px, 800px\"\n src=\"image-800w.jpg\"\n alt=\"Description de l'image\">\n\n<!-- Les balises FIGURE et FIGCAPTION -->\n<figure>\n <img src=\"\/assets\/img\/image.jpg\" alt=\"Description de l'image\">\n <figcaption>L\u00e9gende de l'image<\/figcaption>\n<\/figure><\/code><\/pre>\n\n\n\n
\n\n\n\nLe score SEO<\/h2>\n\n\n\n
Les donn\u00e9es structur\u00e9es<\/h3>\n\n\n\n
<!-- Microdata -->\n<div itemscope itemtype=\"https:\/\/schema.org\/Corporation\">\n <div>\n <h1 itemprop=\"name\">D\u00e9nomination sociale<\/h1>\n <p itemprop=\"description\">Description de l'entreprise.<\/p>\n <p>Horaires: <span itemprop=\"openingHours\" content=\"Mo-Fr 08:00-18:00\">Lundi-Vendredi de 8h-18h<\/span><\/p>\n <p>T\u00e9l\u00e9phone: <span itemprop=\"telephone\" content=\"+33506070809\">05 06 07 08 09<\/span><\/p>\n <\/div>\n<\/div><\/code><\/pre>\n\n\n\nLes balises META<\/h3>\n\n\n\n
<!-- Metadonn\u00e9es -->\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"robots\" content=\"index, follow\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1\">\n <title>Titre de la page | D\u00e9nomination sociale<\/title>\n <meta name=\"description\" content=\"Description de la page d'environ 150 caract\u00e8res\">\n <meta name=\"author\" content=\"Identit\u00e9 de l'auteur du document\">\n <link rel=\"canonical\" href=\"https:\/\/domaine.fr\/url\/page\">\n ...\n<\/head><\/code><\/pre>\n\n\n\nLes fichiers robots.txt et sitemap.xml<\/h3>\n\n\n\n
Conclusion<\/h2>\n\n\n\n