Optimisation de la vitesse des pages : métriques, outils et comment s’améliorer – Best of
La vitesse des pages a toujours été un élément crucial du travail de référencement, et à mesure que de plus en plus d’entreprises se tournent vers les opérations en ligne, l’optimisation devient plus importante que jamais. Cependant, c’est un sujet complexe qui a tendance à être très technique. Quelles sont les choses les plus cruciales à comprendre concernant la vitesse des pages de votre site, et comment pouvez-vous commencer à vous améliorer ? Pour vous aider à répondre à ces questions, nous partageons cet épisode populaire de Whiteboard Friday (initialement publié en février 2019) où Britney Muller passe en revue ce que vous devez savoir pour commencer.
Cliquez sur l’image du tableau blanc ci-dessus pour ouvrir une version haute résolution dans un nouvel onglet !
Transcription vidéo
Hé, les fans de Moz. Bienvenue dans une autre édition de Whiteboard Friday. Aujourd’hui, nous allons passer en revue tout ce qui concerne la vitesse des pages et comprendre pourquoi il est si important pour vous de réfléchir et de travailler pendant que vous faites votre travail.
Au niveau très fondamental, je vais expliquer brièvement comment une page Web est chargée. De cette façon, nous pouvons en quelque sorte comprendre pourquoi tout cela est important.
Comment une page Web est chargée
Un utilisateur accède à un navigateur, met votre site Web et il y a une requête DNS. Cela pointe vers votre fournisseur de nom de domaine, donc peut-être GoDaddy, et cela pointe vers votre serveur où se trouvent vos fichiers, et c’est là que ça devient intéressant. Ainsi, le DOM commence à charger tout votre HTML, votre CSS et votre JavaScript. Mais très rarement, celui-ci tire tous les scripts nécessaires ou le code nécessaire pour afficher ou charger une page Web.
Généralement, le DOM devra demander des ressources supplémentaires à votre serveur pour que tout se passe, et c’est là que les choses commencent à vraiment ralentir votre site. Avoir ce genre de connaissances de base, je l’espère, nous aidera à trier certaines de ces questions.
Problèmes pouvant ralentir votre site
Quels sont les coupables les plus courants ?
- D’abord et avant tout, ce sont les images. Les grandes images sont le principal responsable du chargement lent des pages Web.
- L’hébergement peut causer des problèmes.
- Les plugins, les applications et les widgets, essentiellement tout script tiers, peuvent également ralentir le temps de chargement.
- Votre thème et tous les fichiers volumineux au-delà peuvent également vraiment ralentir les choses.
- Les redirections, le nombre de sauts nécessaires pour accéder à une page Web ralentiront les choses.
- Ensuite, JavaScript, que nous aborderons dans une seconde.
Mais toutes ces choses peuvent être coupables. Nous allons donc passer en revue certaines ressources, certaines mesures et ce qu’elles signifient, puis quelles sont certaines des façons dont vous pouvez améliorer la vitesse de votre page aujourd’hui.
Outils et ressources de vitesse de page
Les principales ressources que j’ai énumérées ici sont les outils Google et les idées suggérées par Google. Je pense que ce qui est vraiment intéressant à propos de ceux-ci, c’est que nous pouvons voir quelles sont leurs préoccupations en ce qui concerne la vitesse de la page et que nous commençons vraiment à voir le changement vers l’utilisateur. On devrait y penser de toute façon. Mais d’abord et avant tout, comment cela affecte-t-il les personnes qui visitent votre site, et ensuite, comment pouvons-nous également obtenir le double avantage que Google le perçoive comme une qualité supérieure ?
Nous savons que Google suggère un site Web à charger entre deux et trois secondes. Le plus vite sera le mieux, évidemment. Mais c’est en quelque sorte là où se trouve la gamme. Je vous suggère également fortement d’adopter une vision concurrentielle de cela. Mettez vos concurrents dans certains de ces outils et comparez vos objectifs de vitesse à ce qui est concurrentiel dans votre secteur. Je pense que c’est une façon cool d’aborder cela.
Rapport sur l’expérience utilisateur Chrome
Il s’agit des métriques d’utilisateurs réels de Chrome. Malheureusement, il n’est disponible que pour les sites Web plus grands et populaires, mais vous en tirez de très bonnes données. Il est hébergé sur BigQuery*, donc quelques connaissances de base en SQL sont nécessaires.
* Note de l’éditeur : nous avons modifié cette transcription pour plus de précision. Dans la vidéo, Britney a dit “BigML”, mais avait l’intention de dire BigQuery. C’est dur de filmer un tableau blanc vendredi sur un sujet avancé en une seule prise ! 🙂
Phare
Lighthouse, l’un de mes favoris, est disponible directement dans Chrome Dev Tools. Si vous êtes sur une page Web et que vous cliquez sur Inspecter l’élément et que vous ouvrez Chrome Dev Tools, dans l’onglet le plus à droite où il est écrit Audit, vous pouvez exécuter un rapport Lighthouse directement dans votre navigateur.
Ce que j’aime, c’est qu’il vous donne des exemples très spécifiques et des correctifs que vous pouvez faire. Un fait amusant à savoir est qu’il sera automatiquement sur la 3G rapide simulée, et notez qu’ils se concentrent sur les utilisateurs mobiles sur 3G. J’aime passer à la 3G rapide appliquée, car Lighthouse effectue une exécution réelle de cette charge. Cela prend un peu plus de temps, mais cela semble être un peu plus précis. Bon à savoir.
Aperçu de la vitesse des pages
Page Speed Insights est vraiment intéressant. Ils ont maintenant intégré le rapport d’expérience utilisateur Chrome. Mais si vous n’êtes pas l’un de ces grands sites, il ne mesurera même pas la vitesse réelle de votre page. Il va regarder comment votre site est configuré et fournir des commentaires en fonction de cela et le noter. Juste quelque chose de bon à savoir. Il offre toujours une bonne valeur.
Testez la vitesse et les performances de votre site Web mobile
Je ne sais pas quel est le titre de ceci. Si vous le faites, veuillez commenter ci-dessous. Mais il se trouve sur testmysite.thinkwithgoogle.com. Celui-ci est vraiment cool car il teste la vitesse mobile de votre site. Si vous faites défiler vers le bas, cela le lie directement au retour sur investissement de votre entreprise ou de votre site Web. Nous voyons Google exploiter des mesures du monde réel, en les reliant au pourcentage de personnes que vous perdez parce que votre site est si lent. C’est une façon brillante de nous embarquer tous et de nous battre pour certaines de ces améliorations.
Pingdom et GTmetrix sont des produits non Google ou des outils non Google, mais ils sont également très utiles.
Indicateurs de vitesse du site
Alors, quelles sont certaines des mesures ?
Qu’est-ce que la première peinture ?
La première peinture est la première peinture non blanche sur un écran. Ce pourrait être juste le premier changement de pixel. Ce changement initial est considéré comme la première peinture.
Quelle est la première peinture de contenu?
La première peinture de contenu est lorsque le premier contenu apparaît. Cela peut faire partie de la navigation ou de la barre de recherche ou quoi que ce soit. –C’est la première peinture de contenu.
Quelle est la première peinture significative?
La première peinture significative est lorsque le contenu principal est visible. Lorsque vous obtenez en quelque sorte cette réaction de “Oh, ouais, c’est pour ça que je suis venu sur cette page”, c’est la première peinture significative.
Qu’est-ce que le temps d’interactif ?
Le temps de l’interactivité, c’est quand c’est visuellement utilisable et engageable. Nous sommes donc tous allés sur une page Web et il semble que ce soit fait, mais nous ne pouvons pas encore l’utiliser. C’est là que cette métrique entre en jeu. Alors, quand est-elle utilisable pour l’utilisateur ? Encore une fois, notez à quel point même ces mesures sont centrées sur l’utilisateur. Vraiment, vraiment chouette.
Contenu DOM chargé
Le contenu DOM chargé, c’est quand le HTML est complètement chargé et analysé. Il y en a donc de très bons à surveiller et à connaître en général.
Façons d’améliorer la vitesse de votre page
HTTP/2
HTTP/2 peut certainement accélérer les choses. Quant à savoir dans quelle mesure, vous devez faire des recherches et tester.
Préconnecter, prérécupérer, précharger
Préconnecter, prérécupérer et précharger vraiment intéressant et important pour accélérer un site. Nous voyons Google le faire sur leurs SERP. Si vous inspectez un élément, vous pouvez voir Google pré-extraire certaines des URL afin qu’il l’ait plus rapidement pour vous si vous deviez cliquer sur certains de ces résultats. Vous pouvez également le faire sur votre site. Cela aide à charger et à accélérer ce processus.
Activer la mise en cache et utiliser un réseau de diffusion de contenu (CDN)
La mise en cache est tellement, tellement importante. Faites vos recherches et assurez-vous que cela est correctement configuré. Même chose avec les CDN, si précieux pour accélérer un site, mais vous voulez vous assurer que votre CDN est correctement configuré.
Compresser les images
Le moyen le plus simple et probablement le plus rapide pour vous d’accélérer votre site aujourd’hui consiste simplement à compresser ces images. C’est une chose si facile à faire. Il existe toutes sortes d’outils gratuits pour les compresser. Optimizilla en est une. Vous pouvez même utiliser des outils gratuits sur votre ordinateur, enregistrer pour le Web et compresser correctement.
Minimiser les ressources
Vous pouvez également réduire les ressources. Il est donc vraiment bon de savoir ce que font la minification, le regroupement et la compression afin que vous puissiez avoir certaines de ces conversations plus techniques avec les développeurs ou avec toute autre personne travaillant sur le site.
Il s’agit donc d’une sorte d’aperçu de haut niveau de la vitesse de la page. Il y a une tonne de plus à couvrir, mais j’aimerais entendre vos commentaires et vos questions et commentaires ci-dessous dans la section des commentaires.
J’apprécie vraiment que vous consultiez cette édition de Whiteboard Friday, et je vous reverrai tous bientôt. Merci beaucoup. À plus tard.
Transcription vidéo par Speechpad.com
