Vitesse de la page et pourquoi c'est important

Personne n'aime un site Web à chargement lent. Nous voulons du contenu aussi vite que possible. Si vous êtes comme moi, lorsque vous effectuez une recherche dans Google et que le chargement du site Web prend une éternité, vous appuyez sur le bouton de retour et vous trouvez un autre résultat.

Google voit et comprend ce comportement.

Si votre site est lent à charger, il est temps d'évaluer comment vous pouvez améliorer vos performances et avoir de meilleures chances de fidéliser les visiteurs et les classements.

Jetez un œil aux statistiques

La dernière étude de Google indique que le temps moyen de chargement d'une page sur un appareil mobile est de 15 secondes. La bonne nouvelle est que ce nombre est en baisse par rapport à l'année précédente.

Cependant, 53 % des mobinautes quittent la page si elle met plus de 3 secondes à se charger. Avec plus de la moitié du trafic sur le Web provenant du mobile, il serait sage de s'assurer que votre page se charge en moins de 3 secondes.

Non seulement la vitesse de la page est importante pour l'expérience utilisateur, mais elle doit également être considérée du point de vue du classement organique.

Lorsque la vitesse de la page augmente, le taux de rebond augmente également. Lorsque la vitesse de la page passe de 1 seconde à 3 secondes, le taux de rebond moyen augmente de 32 %. Et lorsque le chargement de la page est plus proche de 10 secondes, le taux de rebond peut atteindre 123 %.

Accélérons ce site

Vous avez maintenant lu les statistiques sur les temps de chargement. Cela vous fait-il vous inquiéter de la vitesse de votre propre site ? Vous souhaitez faire plaisir à vos utilisateurs pour qu'ils restent sur votre site et effectuent un achat ? Voulez-vous que votre page soit mieux classée ?

Google a publiquement déclaré que la vitesse des pages était un facteur de classement sur ordinateur en 2010. En juillet 2018, ils ont annoncé que la vitesse des pages serait un facteur de classement pour les recherches mobiles.

Si vous souhaitez classer votre site en 2019, votre page doit être rapide.

Tout le monde aime un site rapide : vos visiteurs, les référenceurs, les développeurs Web et Google. Vous devez faire tout ce que vous pouvez pour que votre site se charge incroyablement rapidement.

Tout d'abord, vérifiez la vitesse de votre page sur l'outil de test PageSpeed ​​Insights de Google et consultez les rapports détaillés et les suggestions sur la façon dont vous pouvez vous améliorer. Ceci est une bonne première vérification et devrait vous donner des informations précieuses sur où commencer.

Une fois que vous avez entré votre URL dans l'entrée, un score de vitesse total vous est présenté en haut. Il s'agit d'un score pondéré de toutes les mesures de synchronisation.

Après le score de vitesse, une vue plus détaillée des différents chronométrages vous est présentée. Certains d'entre eux peuvent devenir assez techniques, mais nous les passerons en revue ci-dessous.

Avec PageSpeed ​​Insights, vous devez exécuter les rapports manuellement et conserver un enregistrement. Un outil appelé SpeedMonitor.io automatise ce processus et vérifie votre site Web par rapport à l'API PageSpeed ​​Insights tous les soirs. Vous pouvez ensuite voir une tendance historique des performances de vitesse de votre site Web au fil du temps.

Mesures de performance de vitesse

Jetons un coup d'œil à certaines des mesures de performance de vitesse que ces outils vous montreront :

Temps d'interactivité

C'est le temps pendant lequel la page est interactive pour l'utilisateur. Une fois que vous avez chargé des images et du texte sur une page, vous vous attendez à pouvoir interagir avec la page. Cependant, si d'autres scripts, polices ou styles sont encore en cours de chargement, il peut être difficile pour l'utilisateur de faire défiler et d'interagir.

Pour améliorer votre Time to Interactive, vous devez prendre en compte certains des éléments suivants :

- Chargement paresseux des images lorsque l'utilisateur fait défiler la page plus bas.

– Chargez d'abord le contenu au-dessus du pli afin que les utilisateurs puissent interagir avec lui plus tôt.

Indice de vitesse

L'heure à laquelle les parties visibles de la page sont affichées. Il doit être utilisé comme une autre mesure pour évaluer les performances globales de votre site, mais ce ne doit pas être la seule chose à regarder. Plus votre score Speed ​​Index est faible, plus votre site Web est performant.

Pour améliorer votre indice de vitesse, vous devriez envisager de regarder votre chemin de rendu critique, qui donne la priorité à l'affichage du contenu et aux étapes que le navigateur prend pour recevoir les ressources de la page.

Pour que votre site affiche des éléments, il doit charger les ressources critiques telles que les fichiers HTML, CSS et Javascript pour charger la page. Vous devez vous concentrer sur la réduction du nombre de ressources critiques nécessaires au chargement de votre page.

- Chargez vos images paresseusement pour afficher uniquement les images nécessaires au-dessus du pli

– Ne chargez que les fichiers Javascript dont vous avez besoin au chargement

– Combinez vos fichiers CSS en un seul pour minimiser les appels multiples

Première peinture contente

L'heure à laquelle le navigateur affiche pour la première fois du texte ou des images. First Contentful Paint est une représentation très proche de la façon dont un utilisateur verrait votre page. Lorsque le contenu, qu'il s'agisse de texte ou d'images, est affiché pour la première fois dans le navigateur, ce moment est appelé le First Contentful Paint. Cela signale à l'utilisateur que la page fonctionne comme prévu et se charge.

Pour améliorer votre First Contentful Paint, vous devez tenir compte des points suivants :

- Minimiser les ressources de blocage de rendu telles que CSS et Javascript

- Chargez de manière asynchrone des scripts tiers tels que des trackers publicitaires, des boutons de partage social, des intégrations vidéo, etc.

– Utilisez la mise en cache HTTP pour vos visiteurs récurrents

– Supprimer le code CSS ou Javascript inutilisé

Temps jusqu'au premier octet

Heure à laquelle le navigateur obtient le premier octet du serveur. Un temps lent jusqu'au premier octet (TTFB) est généralement supérieur à 200 ms. Il est idéal de le conserver sous ce numéro. Si votre serveur répond avec un TTFB élevé, cela peut être l'une des raisons suivantes :

– Mauvaise connexion réseau

– Serveur à réponse lente

Pour diagnostiquer votre temps lent au premier octet, commencez par héberger votre site Web ou votre page localement. Avez-vous toujours le même TTFB élevé ? Si c'est le cas, vous devriez envisager des moyens d'améliorer les temps de réponse. Les requêtes de base de données, l'optimisation des services Web, les paramètres de configuration et la mise en cache sont tous des éléments à prendre en compte lors du diagnostic d'un TTFB élevé.

La Fondation Apache a publié un module appelé PageSpeed ​​qui améliore automatiquement la vitesse de votre site en modifiant les ressources de votre page. Vous pouvez apporter des modifications aux filtres intégrés dans les fichiers de configuration de votre serveur Web.

Par exemple, si vous souhaitez supprimer les espaces blancs inutiles de votre site ou optimiser les images, vous pouvez facilement le faire avec l'un des nombreux filtres.

Qu'est-ce que le chemin critique de rendu ?

Le chemin de rendu critique correspond aux étapes suivies par le navigateur pour traiter le HTML, le CSS et le JavaScript en visuels significatifs.

En tant qu'utilisateur, lorsque vous chargez une page, le navigateur prend le code HTML et le convertit en octets. Les octets sont ensuite convertis en jetons. Ensuite, les jetons sont ensuite convertis en objets. C'est ce qu'on appelle le modèle d'objet de document (DOM).

Ensuite, la même chose se produit avec CSS. Il est transformé en octets et finalement converti en une structure arborescente appelée CSS Object Model (CSSOM).

Pour améliorer le chemin de rendu critique, examinez les éléments suivants :

– Nombre de ressources critiques qui pourraient bloquer le rendu initial

– Ressources Javascript de chargement asynchrone

– Différer tout JavaScript qui n'est pas critique pour le chargement initial

– Avoir des ressources CSS plus haut dans le chargement de la page

– N'utilisez pas la règle d'importation CSS pour éviter des allers-retours supplémentaires

Conclusion

Il est temps de prendre au sérieux les performances Web et la vitesse de votre page. Si vous voulez vous classer en 2019, vous devez avoir un site rapide. Espérons que ces conseils vous permettront de démarrer sur la bonne voie.