Blog

Comment obtenir un score de 100/100 sur Google Lighthouse ? Cas Nord Sud CTI

Le 2021-04-06, par   Guillaume Le Gales

Nous avons réalisé pour Nord Sud CTI un comparateur de prix pour le fret aérien et maritime. Les informations sur le cas client sont disponibles ici.

Comme il s’agit d’une plateforme grand public, nous la souhaitions la plus ergonomique et performante possible. Cela peut sembler évident, mais il apparaît que les comparateurs de prix ne sont pas toujours les leaders en matière de score qualité.

Quelques exemples :

Image du comparateur SEARATES


Image du comparateur KAYAK

Pour le comparateur Nord Sud SCTI, nous avons choisi comme indicateur de qualité Google Lighthouse et sommes parvenus à un score de 100/100.

Voici comment.

Image du moteur cotation NSCTI

1/ Un stack minimaliste pour l’interface utilisateur, avec Tailwind CSS et Alpine.js

Tailwind CSS est le nouveau framework pour les interfaces graphiques, il est ergonomique et performant pour les utilisateurs et agréable à utiliser pour les développeurs. Sans trop rentrer dans la technique, le CSS pour l’ensemble de la plateforme ne pèse que 7.5kB. Le navigateur est naturellement très rapide dans le téléchargement et l'interprétation du design.

Alpine.js est le compagnon recommandé de Tailwind CSS, orienté performance et simplicité d’utilisation pour les développeurs. La librairie Alpine ne pèse que 9.1kB, et le javascript est directement inclus dans le HTML. Ici aussi, téléchargement et interprétation sont hyper optimisés.

2/ Aucun tracker ni javascript de sites tiers (Google Analytics), la plateforme dispose de ses propres outils d’analytics ne nécessitant pas de consentement RGPD

Ici, aucun tracker Google Analytics ou autre, les analytics sont calculés par la plateforme et ne collectent aucune donnée personnelle.

  • Le chargement des pages n’est pas ralenti par le chargement de javascript tiers, Google vous en remercie.
  • Pour les utilisateurs, ils (re)découvrent le confort de naviguer sur un site ne nécessitant pas de bannière de consentement RGPD.

3/ La mise en place des bonnes pratiques en matière de performance sur le serveur, principalement Opcache et Gzip

Nous le rappelons si besoin, quelques lignes sur PHP.ini et Nginx.conf vous feront gagner considérablement sur vos temps de réponses.

Ces réglages seront nécessaires si vous souhaitez un score de qualité de 100%

Bilan et comparaison avec la concurrence

Dans son baromètre des sites de comparateurs de solutions d'expéditions disponible ici, Supervisable vous propose un comparatif plus large des sites de comparateurs de solutions d'expéditions en matière de score qualité Google Lighthouse.

Le comparateur Nord Sud CTI y prend la première place :

Classement-supervisable

Nous ferons un suivi de cet article ultérieurement pour faire un bilan de l'impact de cette approche sur le SEO.

Vous avez des questions sur l'optimisation de vos performances ? Contactez nous pour en discuter !

Recevez nos actualités business et technologiques


Inscrivez-vous pour recevoir notre newsletter et en savoir plus sur le lancement rapide d’applications web

Newsletter

Découvrez les succès de nos clients

Application Deafiline
Plateforme Banque de Profil
Extranet M-Gestion
Voir tous les cas client