Visitez le site web de JAKALA

FFW fait maintenant partie du groupe JAKALA.

Sandwich

Royaume-Uni.

Copenhague

Odense

Danemark.

Berlin

Hambourg

Düsseldorf

Allemagne.

Paris

Strasbourg

France.

Dniepre

Mykolaïv

Ukraine.

Chisinau

Moldavie.

Sofia

Veliko Tarnovo

Gabrovo

Plovdiv

Bulgarie.

Hanoï

Vietnam.

Boise

New Jersey

USA.

Bucarest

Roumanie.

Vienne

Autriche.

Accueil

À propos

Projets

Services

Ressources

Contactez-nous

English

Dansk

Français

Deutsch

English UK

À qui s'adresse cet article et à quand est-il pertinent ?
Cet article est destiné aux développeurs web qui s'occupent de l'optimisation des sites web. Il explore les meilleures pratiques et les conseils pour optimiser vos performances et se concentre sur le frontend.
Il est toujours d'actualité car il contient des conseils détaillés et actuels. Ce document fournit des conseils et des astuces spécifiques qui aident les sites web à atteindre un score de performance de 100 % sur Google Lighthouse avec Drupal, ce qui permet d'être mieux classé dans les moteurs de recherche et d'améliorer l'expérience utilisateur.
Il est possible et recommandé d'obtenir un score parfait sur Google Lighthouse avec Drupal, dela démontre une meilleure expérience utilisateur et augmente la visibilité sur les moteurs de recherche.
Nous allons vous présenter cinq conseils qui nous ont permis d'obtenir un score de 100% pour le site web de la campagne d'Intermarché. Intermarché souhaitait un site web pour annoncer sa période de réduction, ses points bonus et ses cadeaux disponibles. Si vous êtes intéressé par l’étude de cas et par une plongée en profondeur dans les optimisations axées sur le contenu, <a href="/home/projets/case-study/obtenir-un-score-google-lighthouse-parfait-pour-intermarche-et-mastrad/" title="Obtenir un score Google Lighthouse parfait pour Intermarché et Mastrad">veuillez trouver notre étude de cas ici.</a>
Alors, comment optimiser son site web, d'un point de vue technique, pour obtenir un score performant sur Google Lighthouse ?
 
Conseil n° 1 : réduire la taille des pages
La réduction de la taille des pages est l'un des facteurs clés de la rapidité d'un site web. Cependant, il faut plus cela pour garantir un site web rapide, car d'autres facteurs tels que les images peuvent également affecter la vitesse du site.
 
Conseil n° 2 : rester simple et suivre les meilleures pratiques
Vous remarquerez que le site de la campagne Intermarché est simple : un en-tête, un pied de page et six paragraphes sur la page d'accueil. Nous avons gardé HTML, CSS et JS aussi petits et simples que possible. Le HTML statique est rapide et sûr. La première étape essentielle pour obtenir d'excellents résultats est de ne pas exécuter de rendu ou d'autres opérations sur le serveur afin d’obtenir un temps de réponse rapide. Le HTML est pré-généré par Tome, puis servi et mis en cache à partir d'un CDN, ce qui explique sa rapidité. 
 
Seuls quelques modules sont utilisés en plus des modules de base :
<ul>
<li style="font-weight: 400;" aria-level="1">Tome pour la génération de sites statiques ;</li>
<li style="font-weight: 400;" aria-level="1">Image réactive (core) ;</li>
<li style="font-weight: 400;" aria-level="1">Single Directory Components (core experimental) ;</li>
<li style="font-weight: 400;" aria-level="1">Paragraphes pour la construction de contenu ;</li>
<li style="font-weight: 400;" aria-level="1">Module Nomarkup pour supprimer le HTML Drupal inutile.</li>
</ul>
 
Conseil 3 : images réactives et lazy loaded 
Nous utilisons le module Drupal responsive image pour redimensionner les images en fonction de leur résolution. Il est essentiel d'utiliser le lazy loading (chargement paresseux). Les navigateurs prennent désormais en charge le lazy loading natif avec l'attribut loading="lazy". Pour les images situées au-dessus de la ligne de flottaison, il est important de définir l'attribut loading sur "eager". Si l'image est chargée de manière lazy, cela aura un impact négatif sur le score de la page.
Nous vous recommandons de convertir vos images au format webp ou à un autre format offrant une meilleure compression que png ou jpeg. Si vous ne le faites pas, Google Lighthouse peut signaler une erreur. L'objectif est de réduire la taille du fichier image. Envisagez d'utiliser le format AVIF, qui devrait offrir une compression encore meilleure que le format webp.
La conversion de vos images est également utile pour la métrique Largest Contentful Paint (LCP). LCP mesure le temps de rendu du plus large élément dans la fenêtre de visualisation. Nous recommandons d'améliorer le temps de rendu en spécifiant la largeur et la hauteur de vos images afin que le navigateur puisse réserver leur mise en page en avance. Cela permet également de répondre aux critères du décalage cumulatif de la mise en page (Cumulative Layout Shift).
 
Conseil n° 4 : profitez des bibliothèques Drupal pour éliminer les CSS et JS inutilisés
Veillez à utiliser l'agrégation CSS et JS de Drupal. Utilisez les bibliothèques de Drupal Asset et ne chargez que les bibliothèques nécessaires pour chaque composant afin d'éviter tout CSS et JS inutilisé. De cette manière, Drupal n'agrégera que les CSS et JS nécessaires par page. Pour le style, nous suggérons d'utiliser Tailwind CSS. Il est facile à utiliser avec les classes utilitaires, car il a une petite taille CSS, et permet la réutilisation des classes sans aucun problème de spécificité ou de cascade. Par conséquent, le navigateur peut traiter le CSS rapidement, ce qui améliore le score.
Téléchargez les polices localement. Nous recommandons d'utiliser "font-display : swap" dans la déclaration font-face en CSS pour éviter les erreurs de décalage de la mise en page et le flash de texte invisible (FOIT) dans Lighthouse. Si vous utilisez Google Fonts, il est préférable de diviser les fichiers de police par plage Unicode, comme le fait l'API de Google Fonts. Cela permet de réduire la taille des fichiers de polices.
 
Conseil n° 5 : gardez vos balises propres, petites et cohérentes
Nous recommandons le module Drupal Single Directory Components, qui est actuellement expérimental, mais qui est un excellent module pour la thématisation basée sur les composants. Ce module vous permet de spécifier et de réutiliser des composants frontaux dans tous les modèles Drupal, ce qui garantit un balisage cohérent et propre et réduit même la quantité de CSS et de JS utilisée sur le site.
Le module nomarkup est un ajout bénéfique au module SDC. Il vous permet de supprimer sans effort toutes les balises inutiles de Drupal et de les remplacer par les vôtres. Cela vous donne un contrôle total sur le HTML, ce qui est particulièrement important lorsque vous utilisez Tailwind. En outre, un HTML plus propre et plus petit permet d'améliorer les performances, sans le surplus inutile que Drupal ajoute parfois.
En outre, après avoir généré des fichiers HTML statiques avec Tome, nous les plaçons sur le serveur et utilisons la mise en cache fournie par CloudFront. Il est essentiel de vider le cache CDN à chaque fois que vous publiez.
Ces conseils et astuces ont été testés et éprouvés, et nous vous recommandons vivement de les appliquer pour optimiser les performances de votre site web. Bon codage, et n'oubliez pas de prendre en compte les critères de performance dès le début, et non à la fin ; il s'agit d'un processus, et non d'un travail ponctuel !
 
Vous souhaitez en savoir plus sur l'optimisation de votre site web ou discuter d'un projet avec nous ? <a href="/home/contactez-nous/" title="Contactez-nous">Contactez-nous.</a>

5 conseils pour obtenir un score de 100% sur Google Lighthouse avec Drupal

Thought

4 tendances clés qui influencent la prise de décision technique

Soutenir la prochaine génération de tech

L'accessibilité web et la reconnaissance de marque

Dynamique sans limites : 2022 Next.js

Prix Women in Drupal 2022

L'importance de la découverte pour votre refonte: 3 raisons

Approche multi-sites : Économies, expansion et fidélisation

Que signifie la personnalisation?

Décrypter le jargon technique

Rencontrez-nous à DrupalCon Lille 2023

Acquia Engage Awards 2023

FFW présente le prix Women in Drupal 2023 

FFW et ses clients célèbrent les trois victoires d'Acquia Engage

Les décisions techniques clés dans un monde de plateformes numériques complexes

JAKALA fête 24 ans d'excellence

5 conseils pour obtenir un score de 100% sur Google Lighthouse avec Drupal

26 février 2024