Optimisation de la vitesse des pages: mesures, outils et améliorations – Meilleur du tableau blanc vendredi

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 sur 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. version haute résolution dans un nouvel onglet!

Transcription vidéo

Salut les fans de Moz. Bienvenue dans une autre édition de Whiteboard Friday. Aujourd'hui, nous allons au-delà de la vitesse de toutes les choses et allons vraiment au fond des raisons pour lesquelles il est si important pour vous de penser 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 comment 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 demande DNS. Cela pointe vers votre fournisseur de nom de domaine, alors peut-être GoDaddy, et cela pointe vers votre serveur où se trouvent vos fichiers, et c'est là que cela devient intéressant. Ainsi, le DOM commence à charger tout votre HTML, votre CSS et votre JavaScript. Mais très rarement, celui-ci extrait tous les scripts ou le code nécessaires pour rendre ou charger une page Web.

En règle générale, 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. Ayant ce genre de connaissances de base, j'espère que cela nous aidera à trier certains de ces problèmes.

Problèmes qui pourraient ralentir votre site

Quels sont les coupables les plus courants?

1. Les images sont d'abord et avant tout. Les grandes images sont le principal responsable des pages Web à chargement lent.
2. L'hébergement peut provoquer des problèmes.
3. Les plugins, les applications et les widgets, essentiellement tout script tiers, peuvent également ralentir le temps de chargement.
4. Votre thème et tous les fichiers volumineux au-delà peuvent également ralentir les choses.
5. Redirection, le nombre de sauts nécessaires pour accéder à une page Web ralentira les choses.
6. Puis JavaScript, dans lequel nous entrerons dans une seconde.

Mais toutes ces choses peuvent être un coupable. Nous allons donc passer en revue certaines ressources, certaines des mesures et leur signification, puis quelles sont les façons d'améliorer la vitesse de votre page aujourd'hui.

Outils et ressources de vitesse de page

Les principales ressources que j'ai répertoriées ici sont les outils Google et les suggestions de Google. Je pense que ce qui est vraiment intéressant à ce sujet, c'est que nous voyons 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. Nous devrions de toute façon y penser. Mais d'abord et avant tout, comment cela affecte-t-il les personnes qui viennent sur votre site, et ensuite, comment pouvons-nous également obtenir le double avantage de Google le percevant comme de meilleure qualité?

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 situe la plage. Je vous suggère également fortement d’avoir une vision concurrentielle de cela. Mettez vos concurrents dans certains de ces outils et comparez vos objectifs de vitesse par rapport à ce qui est compétitif dans votre industrie. Je pense que c'est une façon sympa de s'y plonger.

Rapport sur l'expérience utilisateur de Chrome

Il s'agit des statistiques de l'utilisateur réel de Chrome. Malheureusement, il n'est disponible que pour les sites Web plus importants et populaires, mais vous obtenez de très bonnes données. Il est hébergé sur BigQuery *, donc certaines 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. Il est difficile de filmer un tableau blanc sur un sujet avancé vendredi en une seule prise! : -)

Lighthouse

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 à l'extrême 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 précis et des correctifs que vous pouvez faire. Un fait amusant à savoir est que ce sera automatiquement sur la 3G rapide simulée, et notez qu'ils sont concentrés sur les utilisateurs mobiles sur la 3G. J'aime passer à la 3G rapide appliquée, car Lighthouse exécute réellement cette charge. Cela prend un peu plus de temps, mais il semble être un peu plus précis. Bon à savoir.

Page Speed ​​Insights

La page Speed ​​Insights est vraiment intéressante. Ils ont désormais intégré le rapport d'expérience utilisateur Chrome. Mais si vous ne faites pas partie de ces grands sites, cela ne va même pas mesurer 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 ce document. 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, il est directement lié au retour sur investissement pour votre entreprise ou votre site Web. Nous voyons Google tirer parti des statistiques du monde réel, le rattachant au pourcentage de personnes que vous perdez parce que votre site est si lent. C'est une manière brillante de nous mettre tous à bord et de nous battre pour certaines de ces améliorations.

Pingdom et GTmetrix sont des produits non Google ou des outils non Google, mais très utiles également.

Mesures de vitesse du site

Quelles sont donc certaines des mesures?

Qu'est-ce que la première peinture?

La première peinture est la première peinture non vierge sur un écran. Ce pourrait être juste le premier changement de pixel. Ce changement initial est considéré comme la première peinture.

Qu'est-ce que la première peinture contentive?

La première peinture contentful 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 contentieuse.

Qu'est-ce que 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, oui, c'est pour cela que je suis venu sur cette page», c'est la première peinture significative.

Qu'est-ce que le temps d'interaction?

Le temps d'interaction, c'est quand il est visuellement utilisable et engageant. Nous sommes donc tous allés sur une page Web et il semble que ce soit fait, mais nous ne pouvons pas encore vraiment 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 ces mesures sont centrées sur l'utilisateur. Vraiment, vraiment bien.

Contenu DOM chargé

Le contenu DOM chargé, c'est lorsque 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 définitivement accélérer les choses. Quant à savoir dans quelle mesure, vous devez trier cela et le tester.

Preconnect, prefetch, preload

Preconnect, prefetch et preload vraiment intéressant et important pour accélérer un site. Nous voyons Google faire cela sur leurs SERPs. Si vous inspectez un élément, vous pouvez voir Google prélire certaines des URL afin qu'il les ait plus rapidement pour vous si vous deviez cliquer sur certains de ces résultats. Vous pouvez également le faire sur votre site. Il permet de charger et d'accélérer ce processus.

Activer la mise en cache et utiliser un réseau de distribution de contenu (CDN)

La mise en cache est tellement importante. Faites vos recherches et assurez-vous que tout 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é.

Compression d'images

Le moyen le plus simple et probablement le plus rapide pour accélérer votre site aujourd'hui est vraiment de compresser ces images. C'est tellement facile à faire. Il existe toutes sortes d'outils gratuits pour vous de les compresser. Optimizilla en est un. Vous pouvez même utiliser des outils gratuits sur votre ordinateur, enregistrer pour le Web et compresser correctement.

Réduire les ressources

Vous pouvez également réduire les ressources. Il est donc vraiment bon de savoir ce que la minification le regroupement et la compression permettent de faire de ces conversations plus techniques avec les développeurs ou avec toute autre personne travaillant sur le site.

Il s'agit donc en quelque sorte d'un aperçu de haut niveau de la vitesse des pages. 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 ayez lu cette édition de Whiteboard Friday, et je vous reverrai bientôt. Merci beaucoup. À plus.

Transcription vidéo par Speechpad.com

Obtenez davantage d'informations SEO sur MozCon Virtual en juillet

Ne manquez pas les données exclusives, les astuces, les workflows et les conseils de Britney et nos autres haut-parleurs fantastiques à cette année MozCon Virtual ! Chock regorge des meilleurs leaders d'opinion de l'industrie du référencement, pour la première fois MozCon sera totalement accessible à distance. C'est comme plus de 20 de vos vendredis du tableau blanc préférés sur les vitamines et doublé de taille, ainsi que des questions et réponses interactives, un réseau virtuel et un accès complet au pack vidéo:

Enregistrez ma place sur MozCon Virtual!

Nous pouvons ' t attends de vous voir là-bas!