Mesurer des sites Web avec des outils d'optimisation MobileFirst

SEO et médias sociaux

Au-delà de la réduction de la conversion, les temps de chargement lents créent des effets secondaires qui diminuent le trafic entrant. Les moteurs de recherche utilisent déjà la vitesse de la page dans leurs algorithmes de classement ce qui fait grimper les sites plus rapidement vers le haut. En outre, Google est spécifiquement factoring vitesse mobile pour les recherches mobiles à partir de Juillet 2018.

Les médias sociaux ont commencé à factoriser la vitesse de la page dans leurs algorithmes. En août 2017, Facebook a annoncé qu'il déploierait des modifications spécifiques à l'algorithme du fil de nouvelles pour les appareils mobiles. Ces changements incluent la vitesse de la page en tant que facteur, ce qui signifie que les sites lents verront un déclin des impressions sur Facebook, et une baisse des visiteurs de cette source.

Les moteurs de recherche et les médias sociaux ne punissent pas les sites lents caprice, ils ont pris une décision calculée pour améliorer l'expérience de leurs utilisateurs. Si deux sites ont effectivement le même contenu, ne préféreriez-vous pas en visiter un qui se charge plus rapidement?

De nombreux sites Web dépendent des moteurs de recherche et des médias sociaux pour une grande partie de leur trafic. Le plus lent de ceux-ci aura un problème exacerbé, avec un nombre réduit de visiteurs venant sur leur site, et plus de la moitié de ces visiteurs abandonneront par la suite.

Si le pronostic semble alarmant, c'est parce qu'il l'est! Mais les bonnes nouvelles sont qu'il existe quelques mesures concrètes que vous pouvez prendre pour améliorer la vitesse de votre page. Même les sites les plus lents peuvent obtenir des "sous-trois secondes" avec une bonne stratégie et un peu de travail.

Outils de profilage et de benchmarking

Avant de commencer l'optimisation, il est conseillé de prendre un instantané des performances de votre site. Avec le profilage, vous pouvez déterminer les progrès que vous aurez besoin de faire. Plus tard, vous pouvez comparer avec ce point de référence pour quantifier les améliorations de vitesse que vous faites.

Il existe un certain nombre d'outils qui évaluent la performance d'un site Web. Mais avant de commencer, il est important de comprendre qu'aucun outil ne fournit une mesure parfaite des performances côté client. Les périphériques, les vitesses de connexion et les navigateurs Web ont tous un impact sur les performances et il est impossible d'analyser toutes les combinaisons. De plus, tout outil fonctionnant sur votre appareil personnel ne peut qu'approcher l'expérience d'un autre périphérique ou d'une autre connexion.

En un sens, l'outil que vous utilisez peut fournir des informations significatives. Tant que vous utilisez le même outil avant et après, la comparaison de chacun devrait fournir un instantané décent des changements de performance. Mais certains outils sont meilleurs que d'autres.

Dans cette section, nous allons parcourir deux outils qui fournissent un profil de la performance de votre site Web dans un environnement mobile.

Note : ] S'il peut être difficile de référencer un site complet, je vous recommande de choisir une ou deux de vos pages les plus importantes pour l'analyse comparative.

Lighthouse

L'un des outils les plus utiles pour profiler les performances mobiles est celui de Google. Phare . C'est un bon point de départ pour l'optimisation, car il analyse non seulement les performances des pages, mais fournit également des informations sur les problèmes de performances spécifiques. De plus, Lighthouse fournit des suggestions de haut niveau pour améliorer la vitesse.

Lighthouse est disponible dans l'onglet Audits des outils de développement Chrome. Pour commencer, ouvrez la page que vous souhaitez optimiser dans Chrome Dev Tools et effectuez un audit. J'effectue généralement toutes les vérifications, mais pour nos besoins, il suffit de cocher la case «Performance»:

Lighthouse se concentre sur les mobiles, donc lorsque vous lancez l'audit, Lighthouse affiche votre page dans la visionneuse réactive de l'inspecteur et étrangle la connexion pour simuler une expérience mobile

Lighthouse Reports

On verra un score de performance global, une chronologie de la façon dont la page a été rendue au fil du temps, ainsi qu'une variété de métriques:

Il y a beaucoup d'informations, mais un rapport à souligner est la première peinture significative car cela influence directement les taux de rebond des utilisateurs. Vous remarquerez peut-être que l'outil n'indique même pas le temps de chargement total, et c'est parce que cela importe rarement pour l'utilisateur.

Les utilisateurs mobiles s'attendent à une première vue de la page très rapidement. au contenu inférieur. Dans la chronologie ci-dessus, la première peinture se produit rapidement à 1,3 secondes, puis une peinture de contenu au-dessus de la ligne de flottaison se produit à 3,9 secondes. L'utilisateur peut maintenant utiliser le contenu au-dessus de la ligne de flottaison, et tout chargement au-dessous de la ligne de chargement peut prendre quelques secondes de plus.

La première peinture significative de Lighthouse est une excellente métrique pour l'analyse comparative. la section des opportunités. Cette liste permet d'identifier les zones de problèmes clés de votre site. Gardez ces recommandations sur votre radar, car elles peuvent apporter vos plus grandes améliorations.

Les mises en garde sur les phares

Bien que Lighthouse offre de bonnes perspectives, il ne faut pas oublier qu'il simule seulement une expérience mobile. L'appareil est simulé dans Chrome et une connexion mobile est simulée avec un étranglement. Les expériences réelles peuvent varier.

En outre, vous pouvez remarquer que si vous exécutez l'audit plusieurs fois, vous obtiendrez des rapports différents. C'est encore une fois parce qu'il simule l'expérience, et les variances dans votre appareil, la connexion et le serveur auront un impact sur les résultats. Cela dit, vous pouvez toujours utiliser Lighthouse pour l'analyse comparative, mais il est important que vous l'exécutiez plusieurs fois. WebPageTest

Pour vous faire une idée de la vitesse de chargement de votre page sur un périphérique mobile, utilisez WebPageTest. Une des bonnes choses à propos de WebPageTest est qu'il teste sur une variété de vrais appareils . De plus, il effectuera le test un certain nombre de fois et prendra la moyenne pour fournir un benchmark plus précis.

Pour commencer, naviguez jusqu'à WebPageTest.org entrez l'URL de la page que vous voulez tester, puis sélectionnez l'appareil mobile que vous souhaitez utiliser pour tester. Ouvrez également les paramètres avancés et modifiez la vitesse de connexion. Je préfère tester Fast 3G, car même lorsque les utilisateurs sont connectés à LTE, la vitesse de connexion est rarement LTE (#sad):

Après avoir soumis le test (et attendu toute file d'attente), vous obtiendrez un rapport sur la vitesse de la page:

La vue récapitulative consiste en une courte liste de métriques et de liens vers des chronologies. Encore une fois, la valeur du rendu de début est plus importante que le temps de chargement. Le premier octet est utile pour analyser la vitesse de réponse du serveur.

Benchmarking

Maintenant que vous avez profilé votre page dans Lighthouse et WebPageTest, il est temps d'enregistrer les valeurs. Ces benchmarks vous fourniront une comparaison utile lorsque vous optimiserez votre page. Si les statistiques s'améliorent, vos modifications en valent la peine. Si elles restent statiques (ou pire déclin), vous devrez repenser votre stratégie.

Les résultats du phare sont simulés, ce qui le rend moins utile pour l'analyse comparative et plus utile pour les rapports détaillés et les suggestions d'optimisation. Cependant, le score de performance de Lighthouse et la première peinture significative sont de bons benchmarks, alors faites la médiane pour chacun d'entre eux.

Les valeurs de WebPageTest sont plus fiables pour les benchmarks car elles testent les vrais périphériques. Notez la valeur du premier octet, du début du rendu et du temps de chargement global.

Réduction des ballonnements

Maintenant que vous avez évalué les performances de votre site, jetons un coup d'œil à un outil qui peut aider à réduire la taille. de vos fichiers. Cet outil peut identifier des morceaux de code inutiles qui gonflent vos fichiers et font en sorte que les ressources soient plus importantes qu'elles ne le devraient.

Dans un monde parfait, les utilisateurs ne téléchargeraient que le code dont ils ont réellement besoin. Mais le processus de production et de maintenance peut conduire à des artefacts inutilisés dans la base de code. Même les développeurs les plus assidus peuvent oublier d'enlever des morceaux de CSS et de JavaScript en faisant des changements. Au fil du temps, ces bits de code mort s'accumulent et deviennent inutiles.

De plus, certaines ressources sont destinées à être mises en cache puis utilisées sur plusieurs pages, comme une feuille de style à l'échelle du site. Les ressources à l'échelle du site ont souvent du sens, mais comment savoir quand une feuille de style est généralement sous-utilisée?

L'onglet Couverture

Heureusement, Chrome Developer Tools dispose d'un outil qui permet d'évaluer le gonflement des fichiers: onglet . L'onglet Couverture analyse la couverture du code lorsque vous naviguez sur votre site. Il fournit une interface qui indique la quantité de code utilisée dans un fichier CSS ou JS.

Pour accéder à l'onglet Couverture, ouvrez Chrome Developer Tools et cliquez sur les trois points en haut à droite. Accédez à «Autres outils» → «Couverture».

Ensuite, commencez à instrumentaliser la couverture en cliquant sur le bouton de rechargement à droite. Cela rechargera la page et commencera l'analyse de couverture de code. Il présente un rapport similaire à celui-ci:

Prêtez attention aux octets non utilisés:

Cette interface affiche la quantité de code actuellement inutilisée, colorée en rouge. Dans cette page particulière, le premier fichier affiché est 73% de ballonnement. Vous pouvez voir une météorisation significative au début, mais cela ne représente que le rendu actuel . Changez la taille de votre écran et vous devriez voir la couverture CSS augmenter à mesure que les requêtes médias sont appliquées. Ouvrez tous les éléments interactifs comme les modaux et les bascules, et cela devrait aller plus loin.

Une fois que vous avez activé chaque vue, vous aurez une idée de la quantité de code que vous utilisez réellement. Ensuite, vous pouvez aller plus loin dans le rapport pour savoir quels morceaux de code sont inutilisés, cliquez simplement sur l'une des ressources et regardez dans la fenêtre principale:

Dans ce fichier CSS, regardez les surbrillances à gauche de chaque jeu de règles; vert indique un code utilisé et rouge indique un ballonnement. Si vous créez une application d'une seule page ou si vous utilisez des ressources spécialisées pour cette page en particulier, vous pouvez être amené à supprimer cette corbeille. Mais ne sois pas trop précipité. Vous devriez définitivement supprimer le code mort, mais veillez à vous assurer que vous n'avez pas manqué un point d'arrêt ou un élément interactif.

Next Steps

Dans cet article, nous avons montré les avantages quantitatifs de l'optimisation de la vitesse de la page. J'espère que vous êtes convaincu et que vous avez les outils dont vous avez besoin pour convaincre les autres. Nous avons également défini un objectif minimum pour la vitesse de la page mobile: moins de trois secondes.

Pour atteindre cet objectif, il est important de prioriser en premier les optimisations d'impact les plus élevées. Il y a beaucoup de ressources en ligne qui peuvent aider à définir cette feuille de route, comme cette liste de contrôle . Lighthouse peut également être un excellent outil pour identifier des problèmes spécifiques dans votre base de code, je vous encourage donc à vous attaquer à ces goulots d'étranglement en premier. Parfois, les plus petites optimisations peuvent avoir l'impact le plus important.

(da, lf, ra, yk, il)