Récolte & analyse des données de webperf, mise en place du monitoring et du budget performance
Sélection des gabarits clé à analyser dans l’audit de performance (qui seront représentatifs et qui mettront en exergue les principaux soucis de webperf de votre site) et mesure de poids des pages.
Récolte & analyse de données de webperf : note Yellowlab, waterfall via webpagetest en first view et repeat view, pour identifier les logiques de chargement des ressources (JavaScript, feuille de style, images, police, etc.), score de performance lighthouse et pagespeed insights.
Mise en place de la surveillance du Speed Index, du Time To First Byte, du poids des pages, et du poids des JavaScript.
Identification des services tiers appelés et de leur impact sur la webperf.
Co-création du budget webperf (sélection des KPIs “limite” : score, poids, mesures à ne pas dépasser sur une page, sur le site) : https://www.performancebudget.io/
Mise en place du système d’alerting de SpeedCurve pour suivre le Budget performance.
Contrôle de la configuration du cache navigateur (expires, etags)
Élaboration de recommandations correctives en vue de diminuer le nombre de requêtes front ou les optimiser
Actions correctives simples ou avancées d’optimisation de la performance de sites e-commerce existants, toutes plateformes CMS e-commerce confondues :
Gestion des CSS par page, mise en place d’un critical CSS, suppression des librairies JS trop lourdes, chargement des JS en fin de page (defer / async), compression, minification et concaténation des fichiers JS et CSS entre eux; linting de code.
Chargement des fonts sur le serveur et preload de la font principale; allègement et limitation des formats et nombres de fonts au strict nécessaire; repasse sur tous les icons mono-couleur en font et multi couleur en svg,optimisation des tracés des svg et nettoyage en masse des paramètres des svg via SVGO.
Première passe d’optimisation du poids des visuels; mise en place du preloading de l’image la plus large (LCP) : la première image du slider de la home par exemple. Mise en place du lazyload pour les visuels ATF ou non visibles (autres images du slider de la home par exemple); contrôle de la présence des width et height sur toutes les balises img et mise en place de placeholders pour toutes les images lazyloadées pour éviter l’effet de “reflow” de la page; mise en place d’un timestamp.
Ces dernières années , des solutions “middleware” sont apparues sur le marché pour traiter spécifiquement du sujet des médias (images et vidéos), comme TwicPics ou Cloudimage :
Mise en cache et delivery via CDN
Ces solutions sont partenaires d’un ou plusieurs CDNs : Bénéficiez de leur infrastructure et de leur cache pour héberger vos images et limiter les requêtes sur votre domaine principal.
Conversion et compression
Fini la multiple génération chronophage de formats d’image par vos équipes digitales. Vos médias sont optimisés sans dégradation de leur qualité (compression intelligente) et convertis aux formats d’image next-gen si le contexte de l’utilisateur le permet.
Responsive & transformation
Ces outils identifient les contraintes et le contexte de navigation de vos utilisateurs pour s’y adapter (navigateur utilisé, largeur de l’écran, appareil utilisé, bande passante, etc) et leur servir pile-poil la bonne image.
