Tout sur la vitesse de la page du site Web: problèmes, ressources, indicateurs et améliorations

La vitesse de la page est un facteur important pour votre travail de référencement, mais il s’agit d’un sujet complexe, qui a tendance à être très technique. Quelles sont les choses les plus cruciales à comprendre concernant la vitesse de navigation des pages de votre site et comment pouvez-vous améliorer? Dans l'édition de vendredi du tableau blanc, Britney Muller explique ce que vous devez savoir pour commencer.

Cliquez sur l'image du tableau blanc ci-dessus pour ouvrir une version en 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 examinons tout ce qui a trait à la vitesse de la page et nous allons vraiment comprendre pourquoi il est si important pour vous de penser et de travailler pendant que vous travaillez.

Au niveau fondamental, je vais expliquer brièvement comment une page Web est chargée. De cette façon, nous pourrons en quelque sorte comprendre pourquoi tout cela est important.

Comment une page Web est chargée

Un utilisateur accède à un navigateur, insère votre site Web et envoie une requête DNS. Cela pointe sur votre fournisseur de nom de domaine, alors peut-être GoDaddy, et cela pointe sur votre serveur où se trouvent vos fichiers, et c’est là que cela devient intéressant. Le DOM commence donc à charger tout votre code HTML, votre code CSS et votre code JavaScript. Mais très rarement, celui-ci extrait tous les scripts ou le code nécessaires pour afficher ou charger une page Web.

Typiquement, le DOM aura besoin de ressources supplémentaires de votre serveur pour que tout se passe bien, et c'est là que les choses commencent à vraiment ralentir votre site. J'espère que ces connaissances de base nous aideront à trier certaines de ces questions.

Problèmes qui pourraient ralentir votre site

Quels sont les principaux coupables?

1. D'abord et avant tout, les images. Les grandes images sont le principal responsable du chargement lent des pages Web.
2. L'hébergement peut causer des problèmes.
3. Les plug-ins, les applications et les widgets, tout script tiers peut également ralentir le temps de chargement.
4. Votre thème et tous les fichiers volumineux au-delà peuvent également ralentir considérablement les choses.
5. Redirections, le nombre de sauts nécessaires pour accéder à une page Web ralentira le processus.
6. Ensuite, 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 métriques et leur signification, puis quelques-unes des manières dont vous pouvez améliorer la vitesse de votre page aujourd'hui.

Outils et ressources de navigation rapide

Les principales ressources que j'ai énumérées ici sont les outils Google et les suggestions de Google. Je pense que ce qui est vraiment intéressant à propos de ces applications, c’est que nous voyons quelles sont leurs préoccupations en ce qui concerne la vitesse de la page et commençons vraiment à voir le changement qui s’oriente vers l’utilisateur. Nous devrions y penser de toute façon. Mais avant tout, en quoi cela affecte-t-il les internautes qui visitent votre site et, deuxièmement, comment pouvons-nous également bénéficier du double avantage de Google, qui le perçoit comme étant de meilleure qualité?

Nous savons que Google suggère de charger un site Web entre deux et trois secondes. Plus vite, mieux c'est, évidemment. Mais c'est un peu là où se trouve la fourchette. Je vous suggère également fortement d’adopter un point de vue concurrentiel. Mettez vos concurrents dans certains de ces outils et comparez vos objectifs de vitesse avec ce qui est compétitif dans votre secteur. Je pense que c'est une bonne façon de se lancer.

Rapport sur l'expérience utilisateur de Chrome

Il s'agit de statistiques relatives aux utilisateurs réels de Chrome. Malheureusement, il n'est disponible que pour les sites Web les plus grands et les plus populaires, mais vous obtenez de très bonnes données. Il est hébergé sur Big ML, donc quelques connaissances de base en SQL sont nécessaires.

Phare

Le phare, l'un de mes favoris, est disponible directement dans Chrome Dev Tools. Si vous vous trouvez sur une page Web et que vous cliquez sur Inspecter un élément et que vous ouvrez Outils de développement Chrome, à l'extrême droite de l'onglet Audit, vous pouvez générer un rapport Phare 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 effectuer. 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 en 3G. J'aime passer à la technologie 3G rapide, car elle permet à Lighthouse d'effectuer une charge réelle. Cela prend un peu plus de temps, mais cela semble un peu plus précis. Bon à savoir.

Page Speed ​​Insights

La page Speed ​​Insights est vraiment intéressante. Ils ont maintenant incorporé le rapport d'expérience utilisateur de Chrome. Mais si vous ne faites pas partie de ces grands sites, la vitesse de votre page ne sera même pas mesurée. Il va regarder comment votre site est configuré et fournir des commentaires en fonction de cela et le marquer. Juste quelque chose de bon à prendre en compte. Il fournit 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 titre. 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 de votre site mobile. Si vous faites défiler l'écran vers le bas, cela le lie directement au retour sur investissement de votre entreprise ou de votre site Web. Nous constatons que Google exploite des indicateurs réels, ce qui le ramène au pourcentage de personnes que vous perdez, car votre site est aussi lent. C'est une manière brillante de nous engager tous et de nous battre pour obtenir certaines de ces améliorations.

Pingdom et GTmetrix ne sont pas des produits Google, ni des outils non Google, mais ils sont également d'une grande utilité.

Mesures de vitesse du site

Quelles sont certaines des mesures?

Première peinture

Nous allons passer à la première peinture, qui est essentiellement la première peinture non vierge sur un écran. Ce pourrait être juste le premier changement de pixel. Ce changement initial est la première peinture.

Première peinture de contenu

La première peinture de contenu est celle du premier contenu. Cela pourrait faire partie de la navigation, de la barre de recherche ou quoi que ce soit d'autre. C'est la première peinture contente.

Première peinture significative

La première peinture significative consiste à rendre visible le contenu principal. Lorsque vous obtenez en quelque sorte cette réaction de "Oh, oui, voici ce pour quoi je suis venu sur cette page", c'est la première peinture significative.

Time to interactive

Time to interactive, c'est lorsqu'il est visuellement utilisable et engageable. Nous sommes donc tous allés sur une page Web et on dirait que c'est fait, mais nous ne pouvons pas encore l'utiliser. C'est là que cette métrique entre en jeu. Alors, quand est-il utilisable par l'utilisateur? Encore une fois, notez à quel point ces indicateurs sont centrés sur l'utilisateur. Vraiment très chouette.

Contenu DOM chargé

Le contenu DOM chargé, c'est à ce moment que le code HTML est complètement chargé et analysé. Donc, il y en a de très bons à surveiller et à prendre en compte 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. Pour ce qui est de savoir dans quelle mesure, vous devez effectuer des recherches et tester.

Preconnect, prefetch, précharge

Preconnect, prefetch et précharge sont vraiment intéressants et importants 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é-extraire certaines des URL de manière à ce qu'il soit plus rapide si vous cliquez sur certains de ces résultats. Vous pouvez également le faire sur votre site. Cela aide à charger et à accélérer ce processus.

Activez la mise en cache et utilisez un réseau de distribution de contenu (CDN)

La mise en cache est si importante. Effectuez vos recherches et assurez-vous que tout est bien 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 configuré correctement.

Compresser les images

Le moyen le plus simple et probablement le plus rapide d'accélérer votre site consiste à compresser ces images. C'est une chose si facile à faire. Il existe toutes sortes d'outils gratuits disponibles pour vous permettre de les compresser. Optimizilla en fait partie. 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 très utile de savoir que la minification le groupement et la compression permettent de tenir certaines de ces conversations plus techniques avec les développeurs ou avec toute autre personne travaillant sur le site.

Il s'agit donc d'un aperçu de haut niveau de la vitesse de la page. Il y en a beaucoup plus à couvrir, mais j'aimerais entendre vos commentaires, vos questions et vos commentaires ci-dessous dans la section commentaires.

J'apprécie beaucoup votre visite de cette édition de Whiteboard Friday et je vous reverrai bientôt. Merci beaucoup. À plus.

Transcription vidéo de Speechpad.com