La vitesse des pages a toujours été un élément crucial du travail de référencement, et comme de plus en plus d'entreprises passent aux 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 importantes que vous devez comprendre sur la vitesse de page de votre site et comment vous pouvez commencer à l'améliorer? Pour vous aider à répondre à ces questions, nous partageons cet épisode populaire de Whiteboard Friday (initialement publié en février 2019) dans lequel 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
Bonjour, 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 nous comprenons vraiment pourquoi il est si important pour vous de réfléchir et de travailler tout en faisant votre travail.
Au niveau fondamental, je vais brièvement expliquer comment une page Web se charge. De cette façon, nous pouvons comprendre pourquoi tout cela est important.
Comment charger une page Web
Un utilisateur accède à un navigateur, entre dans son 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, il extrait tous les scripts nécessaires ou le code nécessaire 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. J'espère que cette connaissance préalable nous aidera à évaluer certains de ces problèmes.
Problèmes qui pourraient ralentir votre site
Quels sont les coupables les plus courants?
- La première chose et la plus importante, ce sont les images. Les grandes images sont le principal responsable des pages Web à chargement lent.
- L'adaptation peut causer des problèmes.
- Plugins, applications et widgets, fondamentalement tout script tiers peut également ralentir le temps de chargement.
- Votre thème et tous les fichiers volumineux au-delà peuvent également ralentir les choses.
- Rediriger, la quantité de sauts nécessaires pour accéder à une page Web ralentira les choses.
- Puis JavaScript, que nous aborderons dans une seconde.
Mais toutes ces choses peuvent être coupables. Passons donc 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 pour la vitesse des pages
Les principales ressources que j'ai répertoriées ici sont les outils Google et les suggestions Google. Je pense que la chose vraiment intéressante à ce sujet est que nous pouvons voir quelles sont leurs préoccupations concernant la vitesse des pages et vraiment commencer à voir le changement vers l'utilisateur. Nous devrions de toute façon y penser. Mais, premièrement, comment cela affecte-t-il les personnes qui visitent votre site et, deuxièmement, comment pouvons-nous obtenir le double avantage d'être perçu par Google comme étant de meilleure qualité?
Nous savons que Google suggère qu'un site Web se charge entre deux et trois secondes. Le plus vite sera le mieux, évidemment. Mais c'est là que se trouve la gamme. Je suggère également que vous adoptiez une position concurrentielle à ce sujet. Mettez vos concurrents sur certains de ces outils et comparez vos objectifs de vitesse avec ce qui est compétitif dans votre industrie. Je pense que c'est un excellent moyen d'entrer dans le vif du sujet.
Rapport d'expérience utilisateur Chrome
Il s'agit d'une véritable statistique utilisateur Chrome. Malheureusement, il n'est disponible que pour les sites Web plus grands et plus populaires, mais vous obtenez de très bonnes données. Il est hébergé dans BigQuery *, donc certaines connaissances de base en SQL sont requises.
* Note de l'éditeur: Nous avons modifié cette transcription pour plus de précision. Dans la vidéo, Britney a dit "BigML", mais elle avait l'intention de dire BigQuery. Il est difficile de filmer un tableau de sujets avancé vendredi en un seul coup! : -)
Lighthouse
Lighthouse, l'un de mes favoris, est disponible dans Chrome Dev Tools. Si vous êtes sur une page Web et cliquez sur Inspecter l'élément et ouvrez Chrome Dev Tools, dans l'onglet de 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 offre des exemples et des solutions très spécifiques que vous pouvez faire. Un fait amusant à savoir est qu'il sera automatiquement en 3G rapide simulé, et notez qu'ils se concentrent sur les utilisateurs mobiles 3G. J'aime changer cela en 3G appliqué rapidement, car cela fait que Lighthouse exécute réellement cette charge. Cela prend un peu plus de temps, mais cela semble être un peu plus précis. Bon à savoir.
Page Speed Insights
La page Speed Insights est vraiment intéressante. Maintenant, ils ont incorporé 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. Vous pourrez voir comment votre site est configuré et fournir des commentaires en conséquence et le noter. Juste une bonne chose à garder à l'esprit. 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 . C'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 ROI de votre entreprise ou de votre site Web. Nous constatons que Google tire parti des statistiques du monde réel, le liant au pourcentage de personnes qui perdent en raison de la lenteur de leur site. C'est une manière brillante de nous avoir 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 aussi très utiles.
Mesures de vitesse du site
Quelles sont certaines des mesures?
Quelle est la première peinture?
Le premier tableau est le premier tableau qui n'est pas vierge sur un écran. Ce pourrait être juste le premier changement de pixel. Ce changement initial est considéré comme le premier tableau.
Quelle est la première peinture avec contenu?
La première peinture avec contenu est lorsque le premier contenu apparaît. Cela pourrait faire partie du navigateur ou de la barre de recherche ou autre. – C'est le premier tableau heureux.
Quelle est la première peinture importante?
La première peinture importante est lorsque le contenu principal est visible. Lorsque vous obtenez cette réaction "Oh ouais, c'est pour cela que je suis venu sur cette page", c'est la première peinture importante.
Quel est le temps d'interagir?
Le temps d'interagir, c'est quand il est visuellement utilisable et attrayant. Nous sommes donc tous allés sur une page Web et elle semble être prête, mais nous ne pouvons toujours pas l'utiliser. C'est là que cette métrique entre en jeu. Alors, quand peut-il être utilisé par l'utilisateur? Encore une fois, notez à quel point ces mesures sont centrées sur l'utilisateur. Très, très bien rangé.
Contenu DOM chargé
Contenu DOM chargé, c'est lorsque le HTML est entièrement chargé et analysé. Donc, de très bonnes choses à surveiller et à garder à l'esprit 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 jusqu'où, vous devez rechercher cela et le prouver.
Préconnexion, prélecture, précharge
Préconnexion, préchargement et précharge vraiment intéressants et importants pour accélérer un site. Nous voyons Google faire cela dans leurs SERPs. En inspectant un élément, vous pouvez voir que Google récupère certaines URL afin que vous puissiez les obtenir plus rapidement en cliquant sur certains de ces résultats. De même, vous pouvez 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 très, très importante. Faites vos recherches et assurez-vous qu'il est correctement configuré. La même chose avec CDN, si utile 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 de compresser simplement ces images. C'est tellement facile à faire. Il existe toutes sortes d'outils gratuits à compresser. Optimizilla en est un. Vous pouvez même utiliser des outils gratuits sur votre ordinateur, enregistrer sur 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 font le regroupement et la compression de la minification, afin que vous puissiez avoir certaines de ces conversations plus techniques avec les développeurs ou toute autre personne travaillant sur le site.
Il s'agit donc d'une sorte de résumé de haut niveau de la vitesse des pages. Il y a beaucoup plus à couvrir, mais j'aimerais entendre vos pensées et vos questions et commentaires ci-dessous dans la section des commentaires.
J'apprécie vraiment de jeter un œil à cette édition de Whiteboard Friday, et je vous verrai bientôt. Merci beaucoup. À plus.
Transcription vidéo par Speechpad.com
Obtenez plus d'informations SEO sur MozCon Virtual en juillet
Ne manquez pas les données exclusives, les astuces, les workflows et les astuces de Britney et nos autres haut-parleurs fantastiques au MozCon Virtual de cette année ! Doté du leadership éclairé le plus important de l'industrie du référencement, MozCon sera pour la première fois totalement convivial. C'est comme plus de 20 de vos vendredis préférés de tableau blanc de vitamine 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:
Save My Place at MozCon Virtual!
Nous pouvons & # 39; J'espère te voir là-bas!