Analyse des performances avec WebPageTest

Un site Web rapide est maintenant un must absolu. À l'ère du mobile et des consommateurs hospitalisés, un site Web lent peut faire la différence entre la prospérité ou l'échec de votre entreprise. Alors, comment testez-vous exactement la vitesse de votre site Web et comment pouvez-vous identifier les problèmes qui pourraient le ralentir ?

Dans cet article, nous allons examiner un outil populaire appelé WebPageTest. Cet outil de mesure fournit une série de statistiques et de données détaillées qui peuvent être utilisées pour identifier les domaines de votre site qui pourraient être améliorés du point de vue des performances. Cependant, le volume d'informations fournies peut être un peu écrasant. Ne vous inquiétez pas… nous allons expliquer comment utiliser WebPageTest étape par étape afin qu'il devienne clair comment tirer le meilleur parti de cet outil gratuit.

Premiers pas avec WebPageTest

Tout d'abord, rendez-vous sur webpagetest.org pour commencer. La mise en page est très claire et vous verrez immédiatement une boîte dans laquelle vous pourrez entrer l'URL de votre site Web.

Vous avez un choix à faire dès le départ… utilisez-vous l'onglet par défaut « Tests avancés » ou dirigez-vous vers l'onglet « Tests simples » ? Eh bien, la fonctionnalité de test simple est idéale pour un aperçu rapide de votre site, mais pour cet article, nous examinerons l'onglet Test avancé.

Paramètres de test avancés

Faites défiler la page et vous verrez un menu déroulant Emplacement de test. C'est assez explicite. L'emplacement que vous souhaitez choisir est celui le plus proche de l'endroit où se trouve votre public cible. S'ils sont basés en Australie, les tests depuis Londres, au Royaume-Uni, n'ont pas beaucoup de sens. Le but de cet exercice est de découvrir comment notre site Web fonctionne pour nos utilisateurs.

Il existe une tonne d'emplacements, mais certains emplacements offrent plus d'options de test que d'autres sous la forme du navigateur utilisé pour les tests. Encore une fois, vous voulez essayer de sélectionner celui qui est susceptible d'être utilisé par votre public cible. Pour afficher certaines statistiques sur les navigateurs à partir desquels votre site Web est visité, vous pouvez utiliser des outils tels que Google Analytics.

D'autres paramètres vraiment sympas que vous pouvez sélectionner sont des choses comme la connexion. Ainsi, ce serait la façon dont l'appareil de l'utilisateur final est connecté à Internet. Cliquez sur le menu déroulant à côté de "Connexion" et vous verrez des options qui incluent une connexion 3G (lente ou rapide). C'est vraiment bien car cela vous donne une idée du monde réel de la façon dont votre public expérimentera votre site.

Un autre paramètre très utile est l'option "Répéter la vue". Cette option, lorsqu'elle est activée, signifie que le site sera retesté après le premier chargement, ce qui aide à montrer l'impact de toute mise en cache que vous avez activée sur votre site.

Il existe une multitude d'options avancées supplémentaires que vous voudrez peut-être explorer. Pour la plupart d'entre nous, à moins que vous ne plongiez vraiment dans le test de votre site, les paramètres décrits ci-dessus suffiront. Pour ceux qui veulent en savoir plus sur les paramètres réels disponibles, consultez les documents WebPageTest.

Notez tous les paramètres que vous avez modifiés. Il est important que pendant la phase de test puis d'optimisation, vous continuiez à tester à nouveau en utilisant les mêmes paramètres, sinon vous fausserez les résultats que vous obtenez. Une fois que vous êtes prêt, appuyez sur le bouton "Démarrer le test", puis asseyez-vous et attendez les résultats (cela prend normalement environ une minute).

Premier écran

Dans cet exemple, nous avons utilisé le site Web d'Apple (apple.com) et l'avons testé sur une connexion 3G rapide depuis Londres, au Royaume-Uni. Les premiers résultats sont présentés ci-dessous :

Jetez un coup d'œil en haut à droite et vous verrez 7 cases colorées qui fournissent un aperçu initial de la performance de la page. Examinons ce que chacun d'eux sont.

Encadré 1 – Score de sécurité

Il s'agit d'une fonctionnalité récente fournie par WebPageTest qui est en fait une intégration avec Snyk et donne un aperçu de la sécurité d'un site Web. Si vous cliquez sur la case colorée, vous serez redirigé vers le site Web synk.io qui contient une analyse détaillée du site Web en question du point de vue de la sécurité. Il convient de noter en particulier les en-têtes de sécurité HTTP qui sont échangés entre un client et un serveur pour définir les détails de sécurité de la communication. Les plus importants sont Strict-Transport-Security, Content-Security-Policy, X-Frame-Options.

Hébergez votre site web avec Pressidium

GARANTIE DE REMBOURSEMENT DE 60 JOURS

VOIR NOS FORFAITS

Si un en-tête de sécurité vital manque sur votre site, vous en serez informé sur le site Web de Synk.

Encadré 2 – Temps du premier octet

La deuxième case fournit le First Byte Time (autrement connu sous le nom de Time to First Byte ou TTFB). Il s'agit du temps nécessaire pour que le serveur réponde avec le premier octet de données à la demande du client. Idéalement, vous visez un chiffre inférieur à 300 ms. Cette valeur est davantage liée au serveur et n'a aucun rapport avec le temps nécessaire au rendu des fichiers de votre site Web. Il peut être affecté par un serveur DNS lent par exemple ou une mise en cache insuffisante.

À ce stade, il est important de noter que si vous avez activé le cache, vous devez réexécuter le test de votre page Web afin que le contenu mis en cache soit mesuré. En fait, il est recommandé d'exécuter le test au moins 3 fois pour s'assurer que les résultats reflètent pleinement le contenu mis en cache sur votre site.

Le First Byte Time est la somme de trois valeurs : le temps nécessaire à l'envoi de la requête HTTP, le temps de traitement par le serveur et le temps nécessaire au serveur pour renvoyer le premier octet au client. Vous pouvez plus de détails à ce sujet en cliquant sur la case :

Comme nous pouvons le voir, le site Web d'Apple n'a pas très bien réussi dans cette partie particulière du test.

Une fois cette connexion établie, les ressources peuvent commencer à être livrées. Les raisons les plus courantes d'un TTFB lent sont les problèmes de mise en réseau, la configuration du serveur Web, les éventuelles E/S du disque du serveur et les problèmes de RAM.

Encadré 3 – Garder en vie

La case 'Keep-alive Enabled' affiche l'état de l'en-tête HTTP keep-alive. Lorsque cet en-tête est activé, les données seront transférées en utilisant la même connexion, sinon une nouvelle connexion doit être créée pour chaque fichier à transférer. Keep-alive est activé par défaut dans la plupart des cas et est généralement un paramètre côté serveur. si vous avez besoin de l'activer vous-même, vous pouvez modifier votre fichier .htaccess et insérer le code ci-dessous

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Encadré 4 – Transfert compressé

La valeur Compress Transfer représente l'état de la compression Gzip. Il s'agit d'une technique utilisée pour compresser puis décompresser vos fichiers statiques en temps réel. De cette façon, le temps de transfert est réduit car la taille du fichier est réduite. Si votre fournisseur de serveur n'applique pas cette technologie par défaut vous pouvez le faire vous-même en spécifiant la règle correspondante pour chaque type de fichier comme ceci :

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

Encore une fois, en cliquant sur la case de couleur appropriée, vous accéderez à une section de présentation détaillée afin que vous puissiez voir exactement ce qui se passe sur votre site Web.

Encadré 5 – Compresser les images

La boîte Compresser les images est assez explicite. Cliquez dessus et il vous montrera quelles images pourraient être mieux compressées.

Dans ce cas, WebPageTest a identifié trois images qui, selon lui, pourraient être compressées avec succès, économisant ainsi 54 Ko de données qui n'ont pas besoin d'être transférées. Cela peut sembler peu, mais sur un mobile, chaque Ko que vous pouvez enregistrer fait une différence.

Les images sont l'aspect le plus consommateur d'espace de votre contenu statique. Les compresser est un must absolu. L'analyse WebPageTest permet d'identifier facilement les images susceptibles de ralentir votre site et nécessitant donc votre attention.

Encadré 6 – Contenu statique du cache

Si vous cochez la case "Mettre en cache le contenu statique", vous serez redirigé vers une section détaillée intitulée "Leverage browser caching of static assets".

La mise en cache du navigateur peut être exploitée par votre développeur ou administrateur en indiquant au navigateur Web quand mettre en cache une ressource, quand ne pas le faire et pendant combien de temps avec l'utilisation des en-têtes HTTP appropriés. Vous pouvez trouver des informations plus détaillées sur la mise en cache du navigateur dans notre article 'Comment fonctionne le cache du navigateur ?'. Vous pouvez également découvrir comment Pressidium implémente la mise en cache du navigateur ici.

Encadré 7 – Utilisation efficace du CDN

Un CDN (ou Content Delivery Network) vaut la peine d'être utilisé si vous avez une base d'utilisateurs dispersée géographiquement. Si, par exemple, tous vos clients sont basés à Londres et que votre serveur hôte est également situé à Londres, il n'y a probablement pas beaucoup d'intérêt à utiliser un CDN. Si toutefois, vos utilisateurs sont plus diversifiés géographiquement, un CDN peut faire une énorme différence dans les performances de votre site pour ces utilisateurs en plaçant une copie de votre site Web sur un serveur situé plus près d'eux.

Si vous utilisez un CDN, WebPageTest examinera son efficacité.

Résultats de performances

Continuons et examinons quelques données supplémentaires en commençant par les résultats de performance que vous verrez en haut de l'onglet Résumé.

Dans les résultats de performance, nous pouvons voir les aperçus les plus importants pour des choses comme le temps du premier octet, l'indice de vitesse qui est le temps moyen auquel les parties visibles de la page sont affichées, le décalage de mise en page cumulé (CLS) pour mesurer la stabilité visuelle, le temps consommé jusqu'à ce que le document soit entièrement chargé et plus encore.

Vue sur la cascade

Juste en dessous des résultats de performance, nous pouvons voir la vue en cascade pour chacune de vos courses. Si vous cliquez sur l'un d'entre eux, vous serez dirigé vers la page qui contient tous les détails de la course au format cascade.

Vous recevrez toutes les statistiques de performance pour chaque actif individuel de votre site Web. Ceux-ci sont de couleurs différentes, ce qui facilite la distinction entre eux. Si vous cliquez sur l'un de ces éléments, une fenêtre contextuelle s'ouvre et fournit encore plus de détails.

La vue en cascade est une représentation visuelle de la page et de la manière dont le composant Reach se charge. Cela nous permet d'identifier facilement tous les composants qui pourraient ralentir les choses. Il est très utile de pouvoir voir où se trouvent les goulots d'étranglement et cela signifie que nous pouvons résoudre les problèmes avec une précision extrême plutôt que d'avoir à deviner.

Vue de connexion

Le tableau Connection View est également une fonctionnalité très utile car il permet d'identifier très facilement les problèmes de performances Web en résumant visuellement les mesures des connexions entre le navigateur et le serveur.

Vous pouvez voir l'état de la connexion depuis le DNS, la connexion initiale, la négociation SSL jusqu'à des éléments tels que les ressources vidéo. En dessous, il y a aussi un graphique illustrant l'utilisation du processeur sur l'appareil qui charge le site Web. Il existe également un indicateur de bande passante indiquant les niveaux utilisés lors du rendu des données.

Détails des demandes

Enfin, sous la vue Connexion, vous disposez de deux tableaux d'analyse supplémentaires - Détails de la demande et En-têtes de demande.

Le tableau des détails de la demande est très utile et répertorie toutes les ressources demandées ainsi que les données pertinentes pour cette demande, telles que le type de contenu, l'heure de début de la demande, le nombre d'octets téléchargés et bien plus encore. Ce tableau est en fait triable… il suffit de cliquer sur les en-têtes de colonne pour trier par cette colonne particulière.

Le tableau des en-têtes de demande fournit (oui, vous l'avez deviné) la liste des ressources de demande ainsi que les informations d'en-tête. Cliquez sur chacun pour plus de détails.

Conclusion

Si vous avez besoin d'une analyse approfondie de l'activité de votre site Web, WebPageTest est un outil fantastique à utiliser. Même si vous ne plongez pas dans les informations qu'il fournit, vous pouvez avoir une idée rapide du bon fonctionnement de votre site et de la nécessité d'examiner de plus près ses performances. Et le meilleur de tous, c'est gratuit!