Vous avez probablement entendu parler de la web performance à travers les nombreuses communications de Google. Un site rapide, c'est du trafic à la clé. Vous ne savez pas toujours comment appréhender ce domaine très vaste qui implique aussi bien les designers, les développeurs, les administrateurs réseaux mais aussi l’ensemble des services qui feront vivre votre site au quotidien ?

Pour mieux comprendre les enjeux et mettre en place les bonnes pratiques pour accélérer la vitesse de votre site, je vous propose une synthèse du livre Web Performance in Action de Jeremy Lee Wagner que je vous invite à lire en intégralité. Il y a plein de bonnes astuces. Les optimisations sont principalement orientées pour le protocole HTTP/2. N’oubliez pas, la web performance c’est aussi une histoire de contexte.

1 - Comprendre la web performance
2 - Les outils webperf
3 - Optimiser vos CSS
4 - Comprendre la technique du critical CSS
5 - Rendre vos images responsive
6 - Aller plus loin avec les images
7 - Optimiser vos polices
8 - Garder vos javascripts légers et rapides
9 - Booster votre web performance avec les services workers
10 - Optimiser la vitesse de chargement de vos fichiers
11 - Se tourner vers HTTP/2

1 - Comprendre la web performance

La web performance, côté utilisateur, se mesure par la vitesse avec laquelle vous êtes en mesure d’afficher des éléments au-dessus de la ligne de flottaison et qu’ils soient utilisables. Afficher un site rapidement c’est bien mais encore faut-il que vos utilisateurs puissent interagir avec. La perception du temps dans l’expérience utilisateur est un point incontournable que vous devez améliorer sans cesse. Les métriques principales pour suivre l’impact de vos actions sur l’expérience de vos utilisateurs sont le First Contentful Paint (FCP), le Speed Index mais aussi le Time To Interactive (TTI) et le First Input Delay (FID). Côté back-end, le Time To First Byte constitue un bon indicateur pour suivre la réactivité de votre serveur.

L’objectif de la web performance est simple : réduire la quantité / poids des données transférées (images, scripts etc.) au navigateur et délivrer les ressources critiques en priorité. Plus il y aura de données à transférer et plus le site risque d’être lent à s’afficher. Découvrez sur le site de Mozilla, les étapes qui sont réalisées lorsqu’un internaute consulte une page web. Lorsque le navigateur va récupérer le contenu, il va commencer par parcourir l’ensemble du code pour télécharger l’ensemble des ressources dont il a besoin pour afficher la page : fichiers CSS, JS, images etc. Ce mécanisme est expliqué en détail dans ce billet de blog.

Pour aller plus loin, je vous conseille de dévorer ce post de Tim Kaldec qui vous explique le why de la webperf.

2 - Les outils de la webperf

Nous avons deux grandes catégories d’outils pour la web performance. Ceux qui vont nous permettre d’auditer et identifier les éléments pénalisants d’un site et les services de RUM (real user monitoring) qui nous donnent des informations au quotidien pour être alerté rapidement en cas de variation importante. Très utile pour repérer rapidement un script tiers qui ralentit votre application.

Vous trouverez une liste d’outils pour auditer non exhaustive ci-dessous :

- SpeedCurve qui propose un outil RUM qui remonte toutes les données nécessaires pour comprendre comment votre site est perçu par vos utilisateurs.

- Webpagetest, créé par Patrick Meenan (la référence dans le domaine de la web performance), (https://www.webpagetest.org/) vous permettra d’analyser très précisément votre waterfall. Patrick est également le fondateur de SpeedCurve (https://speedcurve.com/), un service de RUM.

- Dareboost qui vous propose un rapport de performance de votre site. En prime vous aurez également quelques astuces concernant l’accessibilité web, la sécurité et le référencement naturel.

- Yellow Lab Tools qui a été développé par Gaël Métais et qui permet de tester une page Web et détecter les problèmes de performances et de qualité du code front-end.

- Google PageSpeed Insights, un outil made in Google qui vous donne une note et quelques indications pour optimiser cette note. Cet outil vous donne La vision que Google a de votre site en terme de webperf. Vous pouvez également glaner quelques informations utiles sur Google Analytics depuis l’onglet comportement > vitesse du site. Vous pourrez depuis l’onglet suggestion relative à la vitesse trier vos pages les plus vues et vérifier la note Page Speed Insight et agir en conséquence. Enfin, vous avez la Google Search Console qui vous donne des métriques sur la vitesse à laquelle Google crawl votre site. Intéressant pour suivre votre webperf côté back-end. Et le petit dernier web.dev made by Google.

N’hésitez pas à vous servir de votre navigateur. Chrome / Firefox / Safari proposent des fonctionnalités pour visualiser la waterfall, loguer un script JS pour mesurer sa performance mais aussi donnent des informations sur les requêtes… et une galerie de plugin plus ou moins utiles. Vous trouverez la documentation complète pour Chrome, Firefox et Safari. Pour terminer, vous pouvez également utiliser votre terminal de commande avec des librairies comme httpie, CURL et pwmetrics.

Il existe un nombre important d’outils que vous pouvez utiliser. Voici un article de KeyCdn qui recense quelques outils complémentaires.

3 - Optimiser vos CSS

Rentrons dans le vif du sujet ! Comment optimiser votre site. Commençons par vos feuilles de styles, un élément important, qui va être utilisé par le navigateur pour afficher votre page à l’écran. Voici quelques critères à respecter pour vos CSS :

- Etre DRY !

- Utiliser les raccourcis CSS.

- Segmenter vos CSS par famille de template. Si vous embarquez l’ensemble de vos CSS dans un fichier et que seul 10% du code est utilisé pour la page d’accueil… posez les bonnes questions.

- Développer votre site en adoptant la « mobile first attitude » En pensant mobile vous allez élaborer des designs plus fluides et moins chargés car vous n’avez tout simplement pas la place de mettre autant d’informations que sur un écran desktop. En adoptant cette philosophie de développement vous réduirez la production de code CSS superflux.

- Supprimer la balise @import qui pénalise fortement la performance de rendu car les fichiers vont se charger les uns après les autres. Lisez cet article de Steeve Souders pour bien comprendre l’impact de cette balise.

- Utiliser les bons sélecteurs CSS permet d’accélérer le rendu de la page. Le livre propose une étude que vous pouvez consulter ici. L’utilisation de flexbox va accélérer également de manière très importante le rendu de votre site. Vous pouvez en juger par vous même. Impressionnant ! Même combat pour les animations que vous proposez, évitez au maximum au profit des propriétés CSS.

4 - La technique des critical CSS

Afin de mieux comprendre l’intérêt d’utiliser les critical CSS, nous allons nous intéresser à notre navigateur. Comment fonctionne-t-il lorsqu’un utilisateur demande une page sur internet ? Je vous invite à lire cette explication sur le site de Google :

- Une requête est réalisée par un utilisateur

- Le navigateur interroge le serveur pour récupérer le document

- Le navigateur va parser le document, créer le DOM et suivre les liens présents dans le document pour charger les ressources associées

- Le navigateur va charger les ressources prioritaires, notamment les CSS

- Le navigateur va créer le CSSOM, c’est à ce moment là qu’il va pouvoir afficher les premier éléments dans la page.

La web performance, c’est mettre à disposition, le plus rapidement possible, les éléments dont il a besoin pour afficher la page. Vous l’avez compris le navigateur a besoin en priorité du document et des CSS associés pour afficher les éléments de votre page. La technique des criticals CSS consiste à embarquer les CSS dans le document pour éviter d’attendre que votre navigateur ne réalise une ou plusieurs requêtes pour récupérer vos fichiers CSS. Vous trouverez ci-dessous les grandes étapes pour mettre en place cette méthode qui vous fera gagner de précieuses millisecondes :

- Identifier la taille des éléments qui s’affichent au-dessus de la ligne de flottaison. Vous pouvez vous appuyer sur Google Analytics pour repérer les supports avec lesquelles votre site est consulté et vérifier la taille à l’aide de cet outil  développé par Raphaël, Rodolphe, Laurène, Olivier from alsacreations.

- Identifier les CSS qui sont appelés au-dessus de la ligne de flottaison. Vos pouvez le faire manuellement si vous avez un site de taille moyenne ou utiliser des tâches GULPS spécialement développées pour ce type de travail

- Compiler vos CSS et les intégrer directement dans votre document. Une technique qu’explique Jeremy consiste à compiler vos ressources dans un fichier CSS externe comme pour vos autres ressources et l’appeler vis un file_get_content en PHP dans votre page. Plutôt pratique pour ne pas intervenir continuellement dans le code de vos pages.

- Vos CSS sont chargés ensuite en asynchrone pour éviter que le navigateur ne bloque le rendu de la page.

- Admirer le résultat en consultant depuis la console Chrome, onglet performance > event log et en cochant uniquement le painting. Vous devrez normalement avoir avec un temps de painting plus rapide.

5 - Rendre vos images responsive

L’intégration des images est un sujet majeur dans la web performance. Vous trouverez dans cet article les bases necessaires pour mieux appréhender le sujet ( https://developers.google.com/web/fundamentals/design-and-ux/responsive/images ). Dans un premier temps, posez-vous toujours la question avant d’ajouter une image : est-ce qu’elle apporte de la valeur à mon contenu ?

La multiplication des supports de diffusion mobile, tablette mais aussi les montres connectées, ont apporté de nouvelles problématiques à résoudre pour la web performance. Comment proposer la meilleure image en fonction du support ? Comment proposer la taille parfaite dans un contexte responsive où les écrans sont désormais en haute résolution pour permettre au navigateur d’afficher l’image rapidement ? Est-ce vraiment possible :-) Le W3C et les principaux navigateurs ont développé de nouvelles propriétés pour répondre au mieux à cette problématique. Cependant, comme souvent il faudra adresser les anciens navigateurs avec des polyfills. Prêtez attention également à des techniques qui étaient pertinentes avec HTTP/1 et qui ne le sont plus avec HTTP/2 comme par exemple l’inlining des images. Vous trouverez ci-dessous des conseils pour adresser au mieux vos images responsives :

- L’assurance tout risque avec la propriété CSS max-with:100% qui permet de redimensionner l’image au maximum de la taille de son conteneur.

- Utiliser les media queries pour délivrer des images en CSS en fonction de la taille et de la densité de l’écran.

- Utiliser l’attribut srcset et la balise picture pour proposer vos images dans le code HTML. Vous retrouverez les informations necessaires pour mettre en oeuvre cette technique ici à compléter avec la mise en place d’un polyfill car picture n’est pas supporté par les anciens navigateurs.

6 - Aller plus loin avec les images

Rendre vos images responsive, c’est bien mais ce n’est qu’une première étape ! Il y a d’autres optimisations qui peuvent être mises en place pour gagner de précieuses millisecondes. Les optimisations se situent principalement sur deux aspects : réduire le poids de vos ressources en les compressant et réduire le nombre de requêtes vers vos images au strict nécessaire :

- Utiliser la technique des sprites pour les images utilisées pour vos templates. En général des PNG ou SVG. Cette méthode ne date pas d’aujourd’hui mais peut-être utilisée si votre site utilise le protocole HTTP/1. mais celle-ci sera contre productive si votre site est en HTTP/2.

- Vous pouvez également inliner vos petites images et les intégrer directement dans le code source de la page pour réduire le nombre de requêtes.  est une bonne solution pour convertir vos images

- Mettre en place le lazy loading pour appeler uniquement les images qui se trouvent sur l’écran de l’utilisateur. Cette technique est très efficace pour accélérer vos sites surtout dans le cas d’un site qui utilise beaucoup d’images dans la page. Vous pouvez récupérer les sources le Lazyloader du Filament group pour l’implémenter sur votre propre site

- Pour terminer utiliser des algorithmes de compression pour réduire au maximum le poids de vos ressources images. Vous pouvez également mettre en place le format webp qui est plutôt performant.

7 - Optimiser vos polices

Les polices sont devenues en quelques années un élément essentiel de l’identité d’un site. Cependant, il faut savoir les utiliser avec parcimonie et bien les intégrer pour éviter de ralentir votre site et de provoquer des effets de flickering. Voici quelques éléments à prendre en compte :

- Utiliser les webfonts avec parcimonie et charger uniquement les variantes des polices que vous utilisez

- Optimiser votre appel CSS @font-face en ciblant les fonts localement installés

- Utiliser le subsetting, méthode qui consiste à ne charger que les caractères utiles pour réduire le poids des fonts.

- Contrôler l’affichage de vos fonts avec la propriété font-display

Voici un article qui détaille la méthodologie pour bien intégrer vos fonts

8 - Garder vos javascripts légers et rapides

Le javascript, c’est le point noir des sites internet aujourd’hui avec le développement des scripts third party qui sont l’une des causes récurrentes de ralentissement du web. Le coût du javascript est bien souvent sous-estimé par les concepteurs de sites et ceux qui les administrent au quotidien. Voici quelques conseils pour garder le contrôle et éviter les SPOF (Single Point of Failure) qui sont responsables de sites hors service :

- Garder toujours en tête, qu’un script javascript peut ralentir l’affichage de la page. En effet, tant que le navigateur n’aura pas parsé votre fichier JS la page ne sera pas rendue. Pour éviter ce type de comportement, utilisez la balise async et defer quand c’est possible et surtout pour les script externes.

- Jquery, c’est pratique et facile d’utilisation cependant en terme de performance c’est très moyen. Utilisez des alternatifs avec des librairies plus légères comme zepto.

- Apprendre à coder en javascript natif. La majorité des fonctionnalités pour un site ne sont pas très compliquées et les gains en terme de performance sont majeures.

9 - Les services workers

Les services workers constituent un nouvel Eldorado pour la web performance. Ils permettent d’explorer des techniques innovantes pour cacher vos contenus avec des gains significatifs en terme de chargement des pages. Seul petit bémol, la technologie n’est pas encore supportée par tous les navigateurs.

- Les services workers sont du JS qui est exécuté séparément du thread principal

- Initialiser un service workers est très simple. Il faut tester l’existence de l’objet servicWorker. S’il n’existe pas, la page continue de s’exécuter

- Vos applications ne doivent pas dépendre des SW. Les SW doivent être considérés comme une solution pour améliorer l’expérience s’il est supporté par le navigateur.

- Les SW fonctionne uniquement en HTTPS

- Le CacheStorage et l’événement fetch event permet de mettre en place des stratégies de cache efficace afin de proposer votre site offline

- Les services workers permettent la mise en place de nouvelles stratégies : Off line first, critical CSS avec SW, test A/B

- Les SW sont un pilier pour développer les Progressive Web App PWA

10 - Optimiser la vitesse de chargement de vos fichiers

Vous avez fait le travail nécessaire pour optimiser vos ressources, il est temps de mettre en place des solutions pour optimiser leur délivrabilité. Compression, stratégie de cache, CDN… Retrouvez quelques bonnes pratiques à mettre en place pour accélérer le chargement de vos ressources afin de proposer un site réactif à vos utilisateurs :

- Compresser vos ressources avec GZIP et Brotli, le nouvel algorithme de compression. BR pour les intimes propose, à ce jour, les meilleurs performances en terme de compression.

- Mettre en place une stratégie pour cacher vos ressources sur le navigateur du client avec le header cache-control. En parallèle, n’oubliez de mettre en place les éléments pour invalider votre cache (timestamp, md5 du fichier en paramètre… plusieurs solutions s’offrent à vous.

- Si votre audience est mondiale, opter pour un CDN afin de proposer votre site au plus près de l’utilisateur.

- User mais ne pas abuser pas des balises preconnect, preload et autre prerender pour piloter le chargement de ressources critiques pour votre site.

11 - Se tourner vers HTTP/2

Le protocole HTTP/2 a entraîné des évolutions majeures dans la manière de mettre en place des optimisations en terme de web performance. Pour commencer, je vous propose de lire cet article qui présente de manière ludique le HTTP/2. Adieu la concaténation, l’inlining et le sharding technique qui consistait à héberger les ressources médias, CSS / JS sur un sous-domaine pour permettre d’exécuter plusieurs requêtes en parallèle. Bienvenue au multiplexing introduit avec le protocole HTTP/2 qui permet en théorie d’exécuter une centaine de requêtes en parallèle. Cette évolution permet de revoir les stratégies en terme de web performance :

- Découper vos fichiers CSS par type de template pour charger uniquement ce qui est nécessaire pour afficher votre contenu
Rapatrier vos ressources sur votre serveur d’origin (unsharding) pour éliminer des résolutions DNS
- La possibilité d’envoyer les ressources avant même qu’elles n’aient été demandées avec le serveur push
- Les ressources peuvent désormais être accompagnées d’un poids allant de 1 à 256 qui aident le serveur à savoir ce qu’il doit traiter en premier - HTTP/2 utilise HPACK pour compresser les en-têtes ce qui réduit leur taille et améliore donc les temps de chargement.

Mais attention ce nouveau protocole introduit de nouveaux défis à surmonter ! Par exemple, dans cet article, il est expliqué que le multiplexing peut entraîner un retardement du chargement des ressources critiques car la bande passante est saturée

Côté hébergement vous pouvez mettre en place un CDN pour mettre en cache vos ressources. Les critères à prendre en compte sont les pops disponibles dans les pays où vous êtes présents et le support proposé. Ce type de solution vous permettra d'accélérer la vitesse de chargement de vos pages dans le monde entier !

un site rapide vous permettra probablement d'accroitre votre trafic. En effet, la rapidité de votre site est plus que jamais un critère important pour Google.

Vous l’aurez compris, la web performance est un sujet complexe qui fait intervenir des compétences multiples.

Si vous deviez retenir un mantra : La requête la plus rapide, c’est celle qu’on ne fait pas !

‍