YellowLabTools est intelligemment découpé par catégories, et attribue une note sur 100 avec un système de criticité adapté point par point. Après avoir saisie l’URL à tester, et choisi le type de device à émuler entre desktop, tablette, mobile et desktop HD (comme un écran retina), le test sera lancé sur votre page.
Après plus d’un an à utiliser l’outil lors d’audits web performance, il est pour moi un essentiel dès lors que je réalise un audit de web performance pour un de mes clients.
YellowLabTools permet également une configuration plus avancée, comme la gestion d’une identification par htaccess, la possibilité de définir des cookies, ou même de bloquer les requêtes vers un ou plusieurs domaines externes.
Le poids de la page
Le critère le plus important pour charger une page web plus rapidement est l’optimisation son poids. L’outil va se révéler très utile pour détecter des problèmes sur vos images (poids et taille), mais aussi sur la compression employée ainsi que la correcte minification des fichiers de votre page.
Au clic sur la ligne de poids de page, il est possible de retrouver la répartition du poids de la page par type de contenu (HTML, JS, CSS, images, vidéos, webfont, …)
Les requêtes internes et externes
YellowLabTools audite également la totalité des requêtes effectuées par la page web testée. Il va donner vous indiquer le nombre de requêtes, mais aussi le nombre de domaines différents appelés (pour rappel, chaque découverte d’un nouveau nom de domaine peut ralentir le chargement d’une ressource de 50 à 150ms).
Dans cette même partie, YLT va vous indiquer si des images pourraient être lazy-loadées, en vous indiquant précisant leur URL, ou si des images sont chargées sans être affichées à l’écran.
En terme d’audit de qualité, l’outil va également vous indiquer toute requête vers une ressource répondant une erreur 404 (not found), ou un contenu identique entre 2 ressources.
La complexité du DOM
Le nombre de noeuds du DOM ou sa profondeur sont souvent générateurs de lenteurs de rendu de la page web. En plus d’indiquer les noeuds les plus complexes pour le navigateur, YellowLabTools indique le nombre d’iFrames présentes sur la page, ainsi que tout attribut ID dupliqué entre plusieurs éléments, qui pourrait conduire à une erreur Javascript lors de l’utilisation d’un getElementById.
La complexité du code Javascript
Le Javascript est l’origine des temps de freeze sur des pages (souvent constatables sur des articles de sites bourrés de pubs avec des titres aguicheurs).
Pour permettre une fluidité de navigation à vos utilisateurs, Yellow Lab Tools indique mesure également la complexité de votre code Javascript en fonction de son temps d’exécution, le nombre d’accès au DOM ainsi que le nombre d’écouteurs sur l’évènement scroll (pour rappel, il est recommandé de ne créer qu'un scroll listener pour éviter les freezes au scroll).
Les problèmes d’exécution Javascript
Comme pour le CSS, il est possible que vous ayiez des problèmes d’exécution du code JS. YellowLab enregistre les erreurs JS rencontrées lors du chargement de la page, mais aussi d’autres mauvaises pratiques courantes en Javascript.
L’utilisation de jQuery
Nous ne débattrons pas ici de l’utilisation de jQuery bien qu'elle soit discutable quand on sait que même Bootstrap a supprimé l’utilisation de la librairie en Juin 2020.
Wordpress embarque toujours nativement jQuery, la majorité des thèmes s'appuient encore sur ses fonctionnalités. En plus de ça, certains plugins ou thèmes vont même charger une autre version de la librarie. YellowLabTools peut encore une fois s'avérer utile dans ce cas en vous indiquant si plusieurs mêmes importations de jQuery sont effecutées sur la page testée.
La compléxité du code CSS
Indispensable pour afficher le contenu de vos pages et les rendre utilisables, un code CSS trop lourd est trop complexe peut être un frein très important pour le rendu de votre page.
L’outil ne s'arrête pas au poids du CSS, il vous indiquera également tous les points négatifs du code téléchargé sur la page concernant les compléxités des sélecteurs utilisés, mais aussi en vérifiant les couleurs employées et si certaines pouvaient être mutualisées.
Les problèmes de CSS
C’est un des plus gros points de l’outil, dans cette partie il vous détaille les principaux problèmes du code source CSS de votre site web.
Yellow Lab Tools vérifie l’emploi de @import (une très mauvaise pratique en web performance), mais vous informera aussi de tout sélecteurs dupliqués ou redondants. Pour gagner davantage de poids sur vos ressources, YLT remonte également les sélecteurs IE ou d’autres anciens navigateurs, inutiles pour l’écrasante majorité des utilisateurs aujourd’hui.
Pour la qualité web, il est également indiqué le nombre d’utilisations de la règle !important, ou les erreurs de syntaxe CSS.
Les polices d’écriture
La fonte ou police d’écrite est un sujet important en web performance : un fichier typographie mal optimisé peut retarder l’affichage du texte du site et allourdit inutilement le poids de vos pages. Yellow Lab Tools propose en un coup d’oeil de faire l’état des polices utilisées sur vos pages web.
Très utile sur Wordpress où certaines extensions importent des fichiers de polices (généralement peu ou pas optimisés), YLT va vous indiquer le nombre de polices utilisés (1 graisse = 1 fichier), mais aussi le nombre de glyphes ou si le format de police est optimisé (WOFF2).
La configuration serveur
Même s'il est difficile en scannant la page avec un navigateur headless, Yellow Lab Tools est capable de détecter des temps de cache trop courts ou inexistants ainsi que des problèmes de certificat SSL.
YellowLabTools : l’outil ultime en web performance et qualité ?
Pour moi, l’outil est un must-use pour tout audit de web performance, il permet d’identifier très rapidement des quick wins en web performance sur le site.
Une fois toutes les optimisations de performance suggérées mises en place, le site chargera bien plus rapidement. Un site rapide n'a pas besoin d’avoir un score de 100/100, il s'agit uniquement d’indicateurs en fonction de caractères objectifs sans prendre en compte les contraintes techniques de votre environnement ou de votre marque.
Un expert web performance ne se contente pas que d’ouvrir un outil comme YellowLab ou Google Pagespeed, nous instrumentalisons le code Javascript, creusons des possibilités de preload des ressources sur le site, et travaillons avec vos équipes de développeurs pour optimiser les temps de réponse serveurs (back-end). si vous avez besoin d’aide pour obtenir un site rapide !