SEO : Performances de votre site internet

‍

Introduction

‍

Le temps de chargement doit devenir la priorité numéro un !

‍

Le temps de chargement de la page a un impact très important sur les moteurs de recherche et l’expérience utilisateur. moteurs de recherche et l’expérience utilisateur.

• Les moteurs de recherche allouent un temps spécifique à chaque site. Si le chargement des pages du site est trop long, le moteur de recherche n’aura pas le temps de parcourir toutes les pages. De plus, après avoir identifié ce problème de temps de chargement, le moteur va diminuer le temps alloué (budget crawl) lors de sa prochaine visite.
• En ce qui concerne les internautes, des études ont montré qu’une grande partie de quitter un site web lorsque le temps de chargement de ses pages dépasse 3 secondes.

‍

La vitesse est maintenant utilisée comme facteur de classement pour les recherches mobiles Les utilisateurs veulent trouver des réponses à leurs questions rapidement et les données montrent que les gens se soucient vraiment de la vitesse de chargement de leurs pages.

‍

Google a annoncé que la vitesse de page sera également un facteur de classement pour les recherches mobiles à partir de Juillet 2018 et au-delà, Utilisez-vous trop de JavaScript ? Trop d’images ? Les images et JavaScript contribuent le plus au poids de la page, ce qui affecte le temps de chargement.

‍

Pour évaluer la performance, vérifiez :

• PageSpeed Insights, un outil en ligne qui affiche les données de champ de vitesse pour votre champ de vitesse, ainsi que des suggestions d’optimisations communes pour l’améliorer.
• Lighthouse, une exetnsion qui fournit des conseils personnalisés sur la façon d’améliorer votre site Web améliorer votre site en termes de performance, accessibilité, Progressive Web App, SEO et d’autres meilleures pratiques.

‍

Source: https://developers.google.com/web/updates/2018/07/search-ads-speed

‍

Recommandations générales :

• Cacher les ressources statiques (images, css, JavaScript) et fixer une longue date d’expiration pour celles-ci.
• Les images récurrentes (exemple : éléments graphiques de la mise en page) appelées à partir de fichiers CSS externes doivent être combinées en fichiers affichant plusieurs de ces images. Cela permettra de télécharger un nombre réduit de fichiers.
• La compression des ressources HTML et CSS via Gzip réduira considérablement la taille des ressources transférées.
• Nous recommandons fortement que le JavaScript soit exécuté/chargé après que les autres ressources (en particulier CSS) aient été chargées. Le JavaScript peut être exécuté : o lorsque l’utilisateur interagit avec l’objet d’interface concerné par le script, dans le cas d’événements déclenchés par l’utilisateur o asynchrone en utilisant une balise <script async> o Enfin, il est particulièrement important de veiller à ne pas utiliser des URL différentes pour appeler la même ressource.

‍

Gestion des images

‍

Choisir le bon format d’image

‍

En plus des différents algorithmes de compression avec ou sans perte, différents formats d’image prennent en charge différentes fonctionnalités telles que les canaux d’animation et de transparence (alpha). Par conséquent, le choix du "bon format" pour une image particulière est une combinaison de résultats visuels souhaités et d’exigences fonctionnelles.

‍

Il existe deux formats d’image matricielle universellement pris en charge : PNG et JPEG. En plus de ces formats, les navigateurs modernes prennent en charge le nouveau format WebP, qui offre une meilleure compression globale et plus de fonctionnalités.

‍

‍

‍

‍

Alors, quel format devriez-vous utiliser ?

‍

WebP offre généralement une meilleure compression que les formats plus anciens et devrait être utilisé autant que possible. Vous pouvez utiliser WebP avec un autre format d’image comme solution de repli. Pour les anciens formats d’image, considérez ce qui suit :

‍

Avez-vous besoin d’une animation ? Utilisez des éléments <vidéo>.

• Qu’en est-il du GIF ? Le GIF limite la palette de couleurs à un maximum de 256 couleurs et crée des fichiers de tailles bien supérieures aux éléments <vidéo>.

‍

Besoin de préserver les détails avec la plus haute résolution ? Utilisez le format PNG.

• PNG n’applique pas d’algorithmes de compression avec perte au-delà du choix de la taille de la palette de couleurs. Par conséquent, il produira l’image de la plus haute qualité, mais au prix d’une taille de fichier beaucoup plus grande que d’autres formats. Utilisez-le à bon escient.
• Si l’image contient des images composées de formes géométriques, envisagez de la convertir en format vectoriel (SVG) !
• Si l’image contient du texte, réfléchissez à deux fois. Le texte dans les images ne peut pas être sélectionné, recherché ou zoomé. Si vous avez besoin d’un look personnalisé (pour des raisons de marque ou autres), utilisez plutôt une police web.

‍

Optimiser une photo, une capture d’écran ou une image similaire ? Utilisez le format JPEG.

• Le format JPEG utilise une combinaison d’optimisation sans perte et avec perte pour réduire la taille du fichier de l’image. Essayez plusieurs niveaux de qualité JPEG pour trouver le meilleur compromis entre la qualité et la taille du fichier pour votre actif.

‍

Enfin, notez que si vous utilisez un WebView pour rendre le contenu dans votre plateforme d’application spécifique, alors vous avez le plein contrôle du client et pouvez utiliser WebP exclusivement! Facebook et beaucoup d’autres utilisent WebP pour livrer toutes leurs images dans leurs applications - les économies en valent la peine.

‍

Pourquoi utiliser WebP?

‍

Les images WebP sont plus petites que leurs homologues JPEG et PNG - généralement une réduction de 25-35% de la taille du fichier. Cela réduit la taille de la page et améliore les performances.

• YouTube a constaté que le passage aux miniatures WebP entraînait des chargements de page 10 % plus rapides.
• Facebook a vu une réduction de 25-35% de la taille des fichiers JPEG et une réduction de 80% de la taille des fichiers PNG lorsqu’ils sont passés à WebP.

‍

WebP est un excellent remplacement pour les images JPEG, PNG et GIF. En outre, WebP offre la compression avec perte et sans perte. Dans la compression sans perte, aucune donnée n’est perdue. La compression avec perte réduit la taille du fichier, mais au prix d’éventuellement réduire la qualité de l’image.

‍

Convertir des images en WebP Lorsque vous convertissez des images au format WebP, vous avez la possibilité de définir une grande variété de paramètres de compression, mais pour la plupart des gens, la seule chose dont vous aurez besoin est le paramètre de qualité.

‍

Vous pouvez spécifier un niveau de qualité de 0 (pire) à 100 (meilleur). Il vaut la peine de jouer avec ce paramètre pour trouver le bon compromis entre la qualité d’image et la taille du fichier pour vos besoins.

‍

Utilisation des images WebP Si votre site ne prend en charge que les navigateurs WebP, vous pouvez arrêter la lecture. Sinon, servez WebP aux navigateurs plus récents et une image de secours aux navigateurs plus anciens :

‍

Avant

<img src="image.jpg" alt="ancre de l’image">

‍

Après

<picture> <source type="image/webp" srcset="image.webp"> <source type="image/jpeg" srcset="image.jpg"> <img src=" image.jpg" alt="ancre de l’image"> </picture

‍

Les balises <picture>, <source> et <img>, y compris leur ordre par rapport aux autres, interagissent toutes pour atteindre ce résultat final.

La balise <image> fournit un emballage pour zéro ou plusieurs balises <source> et une balise <img>.

‍

Source La balise <source> spécifie une ressource multimédia. Le navigateur utilise la première source répertoriée dans un format qu’il prend en charge. Si le navigateur ne prend en charge aucun des formats indiqués dans les balises <source>, il revient au chargement de l’image spécifiée par la balise <img>.

‍

Utiliser des images responsives

‍

Les images pour ordinateur passées aux appareils mobiles peuvent nécessiter 2 à 4 fois plus de données que nécessaire. Au lieu d’adopter une approche unique pour les images, utilisez des images de tailles différentes pour différents appareils.

‍

Combien de versions de l’image devriez-vous créer ? Il n’y a pas de réponse "correcte" à cette question. Cependant, il est courant d’offrir 3 à 5 tailles différentes d’une image. Servir plus de tailles d’image est plus efficace, mais prend plus de place sur vos serveurs et nécessite d’écrire un peu plus de HTML.

‍

Les autres options les services d’image comme Thumbor (open-source) et Cloudinary valent également le détour. Ces services fournissent des images réactives (et des manipulations d’images) sur demande.

‍

Thumbor est configuré en l’installant sur un serveur ; Cloudinary prend soin de ces détails pour vous et ne nécessite aucune configuration de serveur. Les deux sont des moyens faciles de créer des images sensibles.

‍

Servir plusieurs versions d’image Spécifiez plusieurs versions d’image et le navigateur choisira la meilleure à utiliser :

‍

Avant

<img src="image-large.jpg">

‍

Après

<img src="image-large.jpg" srcset=" image-small.jpg 480w, image-large.jpg 1080w" sizes="50vw">

‍

Les attributs "src", "srcset" et "tailles" de la balise <img> interagissent tous pour atteindre ce résultat final.

‍

L’attribut "src" L’attribut "src" fait fonctionner ce code pour les navigateurs qui ne supportent pas les attributs srcset et sizes. Si un navigateur ne supporte pas ces attributs, il retournera au chargement de la ressource spécifiée par l’attribut "src".

‍

L’attribut " srcset " L’attribut "srcset" est une liste de noms de fichiers image séparés par des virgules et leurs descripteurs de largeur ou de densité. Cet exemple utilise des descripteurs de largeur. "480w" est un descripteur de largeur qui indique au navigateur que "image-small.jpg" est 480px large; "1080w" est un descripteur de largeur qui indique au navigateur que "image-large.jpg" est 1080px large.

‍

Le terme "largeur descripteur" sonne fantaisie, mais c’est simplement une façon de dire au navigateur à quel point une image est large. Cela évite au navigateur d’avoir à télécharger l’image pour déterminer sa taille.

‍

L’attribut "tailles" L’attribut "tailles" indique au navigateur la largeur de l’image lorsqu’elle est affichée. Cependant, l’attribut "tailles" n’a aucun effet sur la taille de l’affichage ; vous devez toujours utiliser CSS pour cela.

‍

Le navigateur utilise ces informations, ainsi que ce qu’il sait sur l’appareil de l’utilisateur (c.-à-d. ses dimensions et sa densité de pixels), pour déterminer quelle image charger.

‍

Si un navigateur ne reconnaît pas l’attribut "tailles", il chargera l’image spécifiée par l’attribut "src". (Les navigateurs ont un support intégré pour les attributs "tailles" et "srcset" en même temps, donc un navigateur supportera les deux attributs ou aucun.)

‍

La largeur peut être spécifiée en différentes unités. Les tailles suivantes sont toutes valables :

• 100px
• 33vw
• 20em
• calc(50vw-10px) La taille suivante n’est pas valide :
• 25% (les pourcentages ne peuvent pas être utilisés avec l’attribut tailles)

‍

Vérifiez avec LightHouse Une fois que vous avez implémenté les images réactives, vous pouvez utiliser Lighthouse pour vous assurer que vous n’avez pas manqué d’images. Lancez l’audit de performance Lighthouse (Lighthouse > Options > Performance) et recherchez les résultats de l’audit "Images de taille appropriée". Ces résultats répertorient les images à redimensionner.

‍

Utiliser des images ayant les bonnes dimensions

‍

Nous avons tous été là : vous avez oublié de réduire une image avant de l’ajouter à la page. L’image est superbe, mais elle gaspille les données des utilisateurs et nuit aux performances des pages.

‍

Identifier les images incorrectement mises à l’échelle Lighthouse facilite l’identification des images de mauvaise taille. Exécutez l’audit de performance (Lighthouse > Options > Performance) et recherchez les résultats de l’audit "Images correctement dimensionnées". L’audit répertorie toutes les images qui doivent être redimensionnées.

‍

Déterminer la taille correcte des images peut être compliqué. C’est pourquoi nous avons fourni deux approches : la "droite" et la "meilleure". Les deux permettront d’améliorer le rendement, mais l’approche « meilleure » pourrait prendre un peu plus de temps à comprendre et à mettre en œuvre. Cependant, il vous récompensera avec de plus grandes améliorations de performance. Le meilleur choix pour vous est celui que vous vous sentez à l’aise avec.

‍

Une note rapide sur les unités CSS Il existe deux types d’unités CSS pour spécifier la taille des éléments HTML, y compris les images :

• Unités absolues : les éléments stylisés utilisant des unités absolues seront toujours affichés à la même taille, quel que soit l’appareil. Exemples d’unités CSS absolues valides : px, cm, mm, in.
• Unités relatives : les éléments stylisés à l’aide d’unités relatives seront affichés à différentes tailles, selon la longueur relative spécifiée. Exemples d’unités CSS relatives valides : %, vw (1vw = 1% de la largeur de la fenêtre d’affichage), em (1,5 em = 1,5 fois la taille de la police).

‍

L’approche "droite" pour les images dont la taille est basée sur :

• Unités relatives : redimensionner l’image à une taille qui fonctionnera sur tous les appareils. Il peut être utile d’examiner vos données analytiques (par exemple, Google Analytics) pour voir quelles tailles d’affichage sont couramment utilisées par vos utilisateurs. Alternativement, screensiz.es fournit des informations d’écran pour de nombreux appareils courants.
• Unités absolues : redimensionner l’image pour qu’elle corresponde à la taille à laquelle elle est affichée. Le panneau DevTools Elements permet de déterminer la taille d’affichage d’une image.

‍

‍

‍

‍

La "meilleure" approche Pour les images dont la taille est basée sur :

• Unités absolues : utilisez les attributs "srcset" et "tailles" pour servir différentes images à différentes densités d’affichage.

‍

La "densité d’affichage" fait référence au fait que différents écrans ont différentes densités de pixels. Toutes choses étant égales par ailleurs, un écran à haute densité de pixels sera plus net qu’un écran à faible densité de pixels. Par conséquent, plusieurs versions de l’image sont nécessaires si vous voulez que les utilisateurs bénéficient des images les plus nettes possible, indépendamment de la densité de pixels de leur appareil.

‍

Pour certains sites, cette différence de qualité d’image est importante, pour d’autres elle ne l’est pas. Les techniques d’image réactive rendent cela possible en vous permettant de lister plusieurs versions de l’image et de laisser l’appareil choisir l’image qui lui convient le mieux.

• Unités relatives : Utiliser des images sensibles pour différentes tailles d’affichage. (Voir le chapitre Utiliser des images sensibles).

‍

Une image qui fonctionne sur tous les appareils sera inutilement grande pour les petits appareils. Les techniques d’images sensibles, y compris "srcset" et "tailles", vous permettent de spécifier plusieurs versions de l’image et de laisser l’appareil choisir la taille qui lui convient le mieux.

‍

Utiliser des images ayant les bonnes dimensions

‍

Pourquoi utiliser un CDN d’image ? Les réseaux de diffusion de contenu d’image (CDN) sont excellents pour optimiser les images. Le passage à une image CDN peut réduire la taille des fichiers image de 40 à 80 %. En théorie, il est possible d’obtenir les mêmes résultats en utilisant uniquement des scripts de construction, mais cela est rare en pratique.

‍

Qu’est-ce qu’un CDN d’image ? Les CDN d’image se spécialisent dans la transformation, l’optimisation et la livraison d’image. Vous pouvez également les considérer comme des API pour accéder et manipuler les images utilisées sur votre site.

‍

Pour les images téléchargées à partir d’une image CDN, l’URL de l’image indique non seulement l’image à télécharger, mais aussi des paramètres tels que la taille, le format et la qualité. Cela permet de créer facilement des variations d’une image pour différents cas d’utilisation.

‍

Les CDN d’image sont différents des scripts d’optimisation d’image au moment de la création, car ils créent de nouvelles versions d’images au besoin. Par conséquent, les CDN sont généralement mieux adaptés à la création d’images hautement personnalisées pour chaque client que les scripts de construction.

‍

Comment les CDN d’image utilisent les URL pour indiquer les options d’optimisation Les URL d’image utilisées par les CDN d’image transmettent des informations importantes sur une image et les transformations et optimisations qui doivent lui être appliquées. Les formats d’URL varient selon l’image CDN, mais à un niveau élevé, ils ont tous des caractéristiques similaires. Passons en revue certaines des caractéristiques les plus communes :

‍

‍

‍

‍

Origin An image CDN peut vivre sur votre propre domaine ou sur le domaine de votre image CDN. Les CDN image tiers offrent généralement la possibilité d’utiliser un domaine personnalisé moyennant des frais. L’utilisation de votre propre domaine facilite la modification des CDN d’image à une date ultérieure, car aucun changement d’URL ne sera nécessaire. L’exemple ci-dessus utilise le domaine CDN image ("example-cdn.com") avec un sous-domaine personnalisé, plutôt qu’un domaine personnalisé.

‍

Les CDN d’images peuvent généralement être configurés pour récupérer automatiquement les images de leurs emplacements existants lorsqu’elles sont nécessaires. Cette capacité est souvent obtenue en incluant l’URL complète de l’image existante dans l’URL de l’image générée par le CDN.

‍

Par exemple, vous pouvez voir une URL qui ressemble à ceci : https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto. Cette URL récupère et optimise l’image qui existe à https://flowers.com/daisy.jpg. Une autre méthode couramment utilisée pour télécharger des images sur une image CDN est de les envoyer via une requête HTTP POST vers l’API de l’image CDN.

‍

Clé de sécurité

‍

Une clé de sécurité empêche les autres de créer de nouvelles versions de vos images. Si cette fonctionnalité est activée, chaque nouvelle version d’une image nécessite une clé de sécurité unique.

‍

Si quelqu’un tente de modifier les paramètres de l’URL de l’image mais ne fournit pas de clé de sécurité valide, il ne sera pas en mesure de créer une nouvelle version. Votre image CDN générera et suivra les clés de sécurité pour vous.

‍

Transformations Image CDNs offrent des dizaines, voire des centaines, de transformations d’images différentes. Ces transformations sont spécifiées via la chaîne d’URL, et il n’y a aucune restriction sur l’utilisation de multiples transformations à la fois.

‍

Dans le contexte des performances web, les transformations d’image les plus importantes sont la taille, la densité de pixel, le format et la compression. Ces transformations sont la raison pour laquelle le passage à une image CDN entraîne généralement une réduction significative de la taille de l’image.

‍

Il n’y a généralement pas de réglage objectivement optimal pour les transformations de performance, donc certains CDN d’image offrent un mode "automatique" pour ces transformations. Par exemple, au lieu de spécifier que les images doivent être transformées en format WebP, vous pouvez permettre au CDN de sélectionner automatiquement et de servir le format optimal.

‍

Les signaux qu’une image CDN peut utiliser pour déterminer la meilleure façon de transformer une image comprennent :

• Indications du client (par exemple, largeur de la fenêtre de visualisation, DPR et largeur de l’image).
• L’en-tête Save-Data
• En-tête de requête User-Agent
• L’API d’information réseau Par exemple, l’image CDN peut servir JPEG XR à un navigateur Edge, WebP à un navigateur Chrome, et JPEG à un navigateur très ancien. Les réglages automatiques sont populaires car ils vous permettent de tirer parti de l’expertise significative en optimisation d’image des CDN d’image sans avoir à modifier le code pour adopter de nouvelles technologies une fois qu’elles sont prises en charge par le CDN d’image.

‍

Utiliser le chargement différé pour améliorer la vitesse de chargement

‍

Les images et les vidéos peuvent constituer une partie importante de la charge utile d’un site Web typique. Malheureusement, les intervenants du projet peuvent être réticents à retirer des ressources médiatiques de leurs applications existantes.

‍

De telles impasses sont frustrantes, surtout lorsque toutes les parties concernées veulent améliorer la performance du site, mais ne peuvent pas s’entendre sur la façon de le faire. Heureusement, le chargement paresseux est une solution qui peut réduire la charge utile initiale et le temps de chargement de la page sans négliger le contenu.

‍

Qu’est-ce que le chargement différé ? Le chargement différé est une technique qui retarde le chargement de ressources non critiques au moment du chargement de la page. Au lieu de cela, ces ressources non-critiques sont chargées quand elles sont nécessaires.

‍

Quand il s’agit d’images, "non-critique" est souvent synonyme de "hors écran". Si vous avez utilisé Lighthouse et examiné certaines possibilités d’amélioration, vous avez peut-être vu des conseils dans ce domaine sous la forme d’une vérification des images hors écran :

‍

‍

‍

‍

💡 L’un des audits de performance de Lighthouse est d’identifier les images hors écran, qui sont des candidats pour le chargement paresseux.

‍

Vous avez probablement déjà vu lazy-loading en action, et il va comme ceci :

• Vous arrivez à une page et commencez à faire défiler le contenu.
• À un moment donné, vous faites défiler jusqu’à une image de remplacement dans la fenêtre de visualisation.
• L’image de remplacement est soudainement remplacée par l’image finale. Un exemple de chargement d’image paresseux peut être trouvé sur la plate-forme de publication populaire Medium, qui charge des images légères sur le chargement de page et les remplace par des images paresseuses chargées à mesure qu’elles défilent dans la fenêtre de visualisation.

‍

‍

‍

‍

💡 Un exemple de chargement d’image différé en action. Une image de remplacement est chargée lorsque la page se charge (à gauche), et lorsque défile dans la fenêtre, l’image finale se charge au moment souhaité.

‍

Si vous n’êtes pas familier avec lazy-loading, vous vous demandez peut-être de quoi il s’agit et quels sont ses avantages.

‍

Pourquoi charger des images ou des vidéos au lieu de simplement les télécharger ? Parce que vous pouvez charger des éléments que l’utilisateur ne verra jamais. Cela est problématique pour plusieurs raisons :

• Il gaspille les données. Sur les connexions non mesurées, ce n’est pas la pire chose qui puisse arriver (bien que vous puissiez utiliser cette précieuse bande passante pour télécharger d’autres ressources qui seront effectivement vues par l’utilisateur).
• Il gaspille le temps de traitement, la batterie et d’autres ressources du système. Après avoir téléchargé une ressource multimédia, le navigateur doit la décoder et afficher son contenu dans la fenêtre de visualisation. Le chargement paresseux des images et des vidéos réduit le temps de chargement initial de la page, le poids initial de la page et l’utilisation des ressources du système, ce qui a un impact positif sur les performances.

‍

Mise en place du chargement différé

‍

Il existe plusieurs façons de mettre en œuvre le chargement différé. Le choix de la solution doit tenir compte des navigateurs que vous prenez en charge, ainsi que de ce que vous essayez de mettre en place.

‍

Les navigateurs modernes mettent en œuvre le chargement paresseux au niveau du navigateur, qui peut être activé en utilisant l'attribut "loading" sur les images et les iframes. Pour assurer la compatibilité avec les navigateurs plus anciens ou pour effectuer le lazy-loading sur des éléments sans lazy-loading intégré, vous pouvez mettre en œuvre une solution avec votre propre JavaScript.

‍

Il existe également un certain nombre de bibliothèques pour vous aider dans cette tâche :

• chargement différé d’images
• chargement différé de vidéos

‍

Conclusion à utiliser avec précaution, les images et vidéos à chargement différé peuvent réduire de manière significative le temps de chargement initial et le chargement de la page de votre site. Les utilisateurs n'auront pas à supporter une activité réseau et des coûts de traitement inutiles pour des éléments multimédias qu'ils ne verront peut-être jamais, mais ils pourront toujours les visionner s'ils le souhaitent.

‍

En ce qui concerne les techniques d'amélioration des performances, le lazy-loading est relativement peu controversé. Si vous avez beaucoup d'images en ligne sur votre site, c'est un excellent moyen de réduire les téléchargements inutiles. Les utilisateurs de votre site et les parties prenantes du projet apprécieront !

‍

Optimisations techniques

‍

Éliminer les ressources qui bloquent le rendu

‍

La section Opportunités de votre rapport Lighthouse répertorie toutes les URL qui bloquent la première vue (première peinture) de votre page.

‍

Envisagez de publier les feuilles JS/CSS essentielles en ligne et de différer la publication de toutes les feuilles JS/style non essentielles.

‍

L'objectif est de réduire l'impact de ces urls bloquant le rendu en mettant en ligne les éléments essentiels, en reportant les éléments non essentiels et en supprimant tout ce qui n'est pas utilisé.

‍

‍

‍

‍

💡 Capture d'écran de l'audit de Lighthouse sur la suppression des ressources bloquant le rendu.

‍

Quelles URL sont signalées comme des ressources bloquant le rendu ? Lighthouse signale deux types d'URL qui bloquent le rendu : les scripts et les feuilles de style.

‍

Une balise <script> qui :

• se trouve dans l'en-tête (<head>) du document.
• Ne possède pas d'attribut "defer".
• N'a pas d'attribut "async".

‍

Une balise <link rel="stylesheet"> qui :

• Ne possède pas d'attribut "disabled". Lorsque cet attribut est présent, le navigateur ne télécharge pas la feuille de style.
• n'a pas d'attribut "media" correspondant spécifiquement à l'appareil de l'utilisateur. "Media="all" est considéré comme un bloc de rendu.

‍

Comment identifier les ressources critiques ? La première étape pour réduire l'impact des ressources bloquant le rendu est d'identifier ce qui est critique et ce qui ne l'est pas.

‍

Utilisez l'onglet Couverture dans Chrome DevTools pour identifier les feuilles de style CSS et JS non critiques. Lorsque vous chargez ou exécutez une page, l'onglet vous indique la quantité de code utilisée par rapport à la quantité chargée :

‍

‍

‍

‍

💡 Chrome DevTools : Onglet Couverture

‍

Vous pouvez réduire la taille de vos pages en n'envoyant que le code et les styles dont vous avez besoin. Cliquez sur une URL pour inspecter ce fichier dans le panneau Sources.

‍

Les styles dans les fichiers CSS et le code dans les fichiers JavaScript sont marqués de deux couleurs :

• Vert (critique) : Styles nécessaires au premier affichage ; code essentiel à la fonctionnalité de base de la page.
• Rouge (non critique) : Styles qui s'appliquent au contenu qui n'est pas immédiatement visible ; code qui n'est pas utilisé dans la fonctionnalité de base de la page.

‍

Comment supprimer les scripts qui bloquent le rendu ? Une fois que vous avez identifié le code critique, déplacez ce code de l'URL bloquant le rendu vers une balise "script" en ligne dans votre page HTML. Lorsque la page se chargera, elle disposera de ce dont elle a besoin pour gérer les fonctionnalités de base de la page.

‍

Si le code d'une URL qui bloque le rendu n'est pas critique, vous pouvez le conserver dans l'URL et marquer l'URL avec les attributs async ou defer. Le code qui n'est pas du tout utilisé doit être supprimé.

‍

Comment éliminer les feuilles de style qui bloquent le rendu ? Comme pour l'insertion de code dans une balise <script>, insérez les styles critiques requis pour le premier affichage dans un bloc <style> en haut de la page HTML. Chargez ensuite le reste des styles de manière asynchrone à l'aide du lien de préchargement (voir Report des feuilles de style CSS inutilisées).

‍

Envisagez d'automatiser le processus d'extraction et d'insertion des feuilles de style CSS "Above the Fold" à l'aide de l'outil Critical. Une autre approche pour éliminer les styles qui bloquent le rendu consiste à diviser ces styles en différents fichiers, organisés par demande de média. Ajoutez ensuite un attribut media à chaque lien de feuille de style.

‍

Lorsqu'une page se charge, le navigateur ne bloque que le premier rendu pour récupérer les feuilles de style qui correspondent à l'appareil de l'utilisateur (voir le code CSS qui empêche l'affichage). Enfin, vous devrez minifier votre CSS pour supprimer tout espace blanc ou caractère supplémentaire (voir Minifier CSS). De cette manière, vous êtes sûr d'envoyer le plus petit paquet possible à vos utilisateurs.

‍

Conseil Drupal : Envisagez d'utiliser un module pour intégrer les CSS et JavaScript essentiels, ou éventuellement charger des ressources de manière asynchrone via JavaScript, comme le module Advanced CSS/JS Aggregation.

‍

Dimensionner correctement les images

‍

La section Opportunités de votre rapport Lighthouse répertorie toutes les images de votre page dont la taille n'est pas appropriée, ainsi que les économies potentielles en kilo-octets (Ko). Redimensionnez ces images pour économiser des données et améliorer le temps de chargement des pages :

‍

‍

‍

‍

Comment Lighthouse calcule-t-il les images surdimensionnées ? Pour chaque image de la page, Lighthouse compare la taille de l'image rendue à la taille de l'image réelle. La taille rendue tient également compte du ratio de pixels de l'appareil. Si la taille rendue est inférieure d'au moins 4KiB à la taille réelle, l'image échoue à l'audit.

‍

Quelles sont les stratégies pour dimensionner correctement les images ? Idéalement, votre page ne devrait jamais afficher d'images plus grandes que la version rendue sur l'écran de l'utilisateur. Toute image plus grande gaspille des octets et ralentit le chargement de la page.

‍

La principale stratégie pour fournir des images de taille appropriée est appelée "images réactives". Avec les images réactives, vous générez plusieurs versions de chaque image, puis vous spécifiez la version à utiliser dans votre code HTML ou CSS à l'aide de requêtes média, de dimensions d'affichage, etc.

‍

Les CDN d'images constituent une autre stratégie importante pour servir des images de taille appropriée. Vous pouvez considérer les CDN d'images comme des API de services web pour la transformation d'images. Une autre stratégie consiste à utiliser des formats d'image vectoriels, tels que SVG. Avec une quantité limitée de code, une image SVG peut être mise à l'échelle à n'importe quelle taille.

‍

Voir Remplacer des icônes complexes par des images SVG pour plus d'informations. Des outils tels que gulp-responsive ou responsive-images-generator peuvent aider à automatiser le processus de conversion d'une image en plusieurs formats. Il existe également des CDN d'images qui vous permettent de générer plusieurs versions, soit lorsque vous téléchargez une image, soit lorsque vous la demandez sur votre page.

‍

Conseil Drupal : Utilisez la fonction intégrée Responsive Image Styles (disponible dans Drupal 8 et les versions ultérieures) pour le rendu des champs d'image dans les modes d'affichage, les vues ou les images téléchargées via l'éditeur WYSIWYG.

‍

Transfert d'images hors écran

‍

La section Opportunités de votre rapport Lighthouse répertorie toutes les images hors écran ou cachées de votre page, ainsi que les économies potentielles en kilo-octets (Ko). Envisagez de charger ces images en différé après le chargement de toutes les ressources essentielles afin de réduire le temps d'interaction :

‍

‍

‍

‍

Conseil Drupal : Installez un module Drupal capable de faire du lazy-loading. De tels modules permettent de différer toute image hors écran afin d'améliorer les performances.

‍

Minify CSS

‍

La section Opportunités de votre rapport Lighthouse répertorie tous les fichiers CSS non minifiés, ainsi que les économies potentielles en kilo-octets (Ko) lorsque ces fichiers sont minifiés :

‍

‍

‍

‍

Comment la réduction des fichiers CSS peut-elle améliorer les performances ? La réduction des fichiers CSS peut améliorer les performances de chargement de vos pages. Les fichiers CSS sont souvent plus volumineux qu'ils ne devraient l'être. Par exemple, les fichiers CSS sont souvent plus volumineux qu'ils ne devraient l'être :

‍

‍

‍

‍

peut être réduit à :

‍

‍

‍

‍

qui peut aussi être réduit à :

‍

‍

‍

‍

Certains minifieurs utilisent d'autres astuces pour minimiser les octets. Par exemple, la valeur de couleur #000000 peut être réduite à #000, qui est son équivalent abrégé.

‍

Lighthouse fournit une estimation des économies potentielles sur la base des commentaires et des caractères d'espacement qu'il trouve dans votre CSS. Il s'agit d'une estimation prudente. Comme indiqué précédemment, les minifieurs peuvent effectuer des optimisations astucieuses (telles que la réduction de #000000 à #000) afin de réduire davantage la taille de votre fichier.

‍

Ainsi, si vous utilisez un minificateur, vous pouvez réaliser des économies plus importantes que celles indiquées par Lighthouse.

‍

Utiliser un minificateur CSS pour réduire votre code CSS ? Pour les petits sites que vous ne mettez pas souvent à jour, vous pouvez probablement utiliser un service en ligne pour réduire manuellement la taille de votre fichier.

‍

Vous collez votre code CSS dans l'interface utilisateur du service, qui vous renvoie une version réduite du code. Pour les développeurs professionnels, vous voudrez probablement mettre en place un flux de travail automatisé qui réduira automatiquement votre CSS avant de déployer votre code mis à jour. Cela se fait généralement à l'aide d'un outil de construction comme Gulp ou Webpack.

‍

Astuce Drupal : Activez l'agrégation des fichiers CSS dans Administration > Configuration > Développement. Vous pouvez également configurer des options d'agrégation plus avancées via des modules complémentaires pour accélérer votre site en concaténant, réduisant et compressant vos styles CSS.

‍

Minifier JavaScript

‍

La minimisation consiste à supprimer les espaces blancs et tout code inutile, afin de créer un fichier de code plus petit et parfaitement valide. La minimisation des fichiers JavaScript peut réduire la taille de la charge utile et le temps d'analyse des scripts.

‍

La section Opportunités de votre rapport Lighthouse répertorie tous les fichiers JavaScript non réduits et les économies potentielles en kilo-octets (Ko) lorsque ces fichiers sont réduits :

‍

‍

‍

‍

Comment réduire vos fichiers JavaScript ? Terser est un outil populaire de compression de JavaScript. webpack v4 inclut par défaut un plugin pour cette bibliothèque afin de créer des fichiers minifiés.

‍

Astuce Drupal : Assurez-vous que l'option d'agrégation des fichiers JavaScript est activée dans la page Administration > Configuration > Développement. Vous pouvez également configurer des options d'agrégation plus avancées par le biais de modules complémentaires afin d'accélérer votre site en concaténant, minifiant et compressant vos ressources JavaScript.

‍

Supprimer les css inutilisés

‍

La section Opportunités de votre rapport Lighthouse répertorie toutes les feuilles de style contenant des feuilles de style CSS inutilisées, avec une économie potentielle de 2 KiB ou plus.

‍

Supprimez les feuilles de style CSS non utilisées pour réduire le nombre d'octets inutiles consommés par l'activité du réseau :

‍

‍

‍

‍

💡 Capture d'écran de l'audit "Remove unused CSS" de Lighthouse.

‍

Comment les feuilles de style CSS inutilisées ralentissent-elles les performances ? L'utilisation d'une balise <link> est un moyen courant d'ajouter des styles à une page :

‍

‍

‍

‍

Le fichier main.css que le navigateur télécharge est appelé feuille de style externe, car il est stocké séparément du code HTML qui l'utilise.

‍

Par défaut, un navigateur doit télécharger, analyser et traiter toutes les feuilles de style externes qu'il rencontre avant de pouvoir afficher ou rendre un contenu sur l'écran de l'utilisateur. Il serait absurde qu'un navigateur tente d'afficher un contenu avant que les feuilles de style n'aient été traitées, car celles-ci peuvent contenir des règles qui affectent le style de la page.

‍

Chaque feuille de style externe doit être téléchargée à partir du réseau. Ce déplacement supplémentaire sur le réseau peut augmenter de manière significative le temps d'attente des utilisateurs avant qu'ils ne voient le contenu sur leur écran.

‍

Les feuilles de style CSS inutilisées ralentissent également la construction de l'arbre de rendu par le navigateur. L'arbre de rendu est similaire à l'arbre DOM, sauf qu'il comprend également les styles de chaque nœud.

‍

Pour construire l'arbre de rendu, un navigateur doit parcourir l'ensemble de l'arbre DOM et vérifier quelles règles CSS s'appliquent à chaque nœud. Plus il y a de feuilles de style CSS inutilisées, plus le navigateur doit potentiellement passer de temps à calculer les styles pour chaque nœud.

‍

Comment détecter les feuilles de style CSS inutilisées ? L'onglet Couverture dans Chrome DevTools peut vous aider à découvrir les feuilles de style CSS critiques et non critiques. Voir Afficher les feuilles de style CSS utilisées et non utilisées à l'aide de l'onglet Couverture.

‍

‍