Comment accélérer le temps de chargement des pages avec des optimisations de site Web simples

La vitesse de la page peut vous faire ou vous casser sur Internet.

Un chargement de page plus rapide signifie généralement de meilleurs résultats globaux pour la vitesse de votre site. Chaque aspect du succès d'un site Web est lié à la vitesse de la page, du référencement aux conversions, à l'expérience utilisateur et au-delà.

Du fournisseur d'hébergement que vous choisissez à l'application avec laquelle vous décidez de travailler, de nombreux domaines peuvent être optimisés. Avec autant de domaines à prendre en compte, l'amélioration de la vitesse des pages peut être un processus complexe. Apprendre à optimiser le temps de chargement des pages Web de manière facile à mettre en œuvre est essentiel au succès.

Alors, que pouvez-vous faire pour vous assurer que vous êtes optimisé ? Examinons quelques façons de rendre votre page Web plus rapide, comment accélérer le temps de chargement des pages et d'autres meilleures pratiques pour le temps de chargement des pages et l'augmentation de la vitesse.

Pourquoi le temps de chargement de la page est important

Avant d'aborder la façon d'accélérer le temps de chargement des pages, commençons par comprendre pourquoi il est si critique.

Google a annoncé pour la première fois que la vitesse du site aurait un impact sur le classement en 2010 et a continué à démontrer son importance. En 2018, Google a introduit la vitesse des pages comme facteur de classement de la vitesse des sites mobiles.

Les spécialistes du référencement ont rapidement commencé à essayer d'optimiser les éléments de la page et de réduire le moteur de recherche. Ceux qui n'ont pas pris du retard. Et maintenant, avec les éléments vitaux du Web de base récemment annoncés, la vitesse est plus critique que jamais.

Vous voulez en savoir plus sur la façon d'améliorer la vitesse de chargement des pages ? Voici quelques domaines clés à considérer.

Importance de la vitesse de la page

Le temps de chargement des pages a toujours été important pour une raison assez évidente : les conversions. En termes simples, les sites rapides augmentent les conversions et les sites lents les réduisent.

En fait, une amélioration de 0,1 seconde de la vitesse du site Web mobile entraîne une augmentation de 8,4 % des taux de conversion pour les commerces de détail, a constaté Google dans une étude de 2020.

La vitesse du site a également un impact sur vos taux de rebond. Lorsque les utilisateurs rencontrent un site lent, ils le quittent. Un retard de deux secondes dans le temps de chargement des pages pourrait augmenter le taux de rebond d'un site Web de 103 %, selon un rapport d'Akamal Technologies.

Tester le temps de chargement de votre page

Pour obtenir un instantané de votre site Web et créer des repères avant et après le processus d'optimisation, la première chose à faire est de tester la vitesse de votre page actuelle. Quelques outils avec lesquels vous pouvez commencer sont Google Page Speed ​​Insights et Webpagetest.org.

Assurez-vous d'effectuer plusieurs tests et de faire la moyenne de vos résultats. Le test de page Web vous permet de le faire automatiquement dans le menu des paramètres. Il est toujours sage de choisir un emplacement de test proche de l'endroit où votre site est hébergé pour vous assurer d'obtenir les résultats les plus précis.

C'est ainsi que nous configurons généralement webpagetest.org pour les contrôles de vitesse de base.

Ci-dessous, vous pouvez voir les résultats d'un test de vitesse de page sur le site de démonstration Magento en moyenne. Nous avons sélectionné trois des statistiques les plus importantes et les plus significatives que nous souhaitons utiliser pour optimiser le site.

La première statistique est le temps de chargement. Cela nous montre le temps complet qu'il faut pour charger notre page. N'oubliez pas que si une page prend plus de trois secondes à se charger, vous risquez de perdre la moitié de votre trafic potentiel. Ce nombre est le plus important pour nous de changer.

La deuxième statistique est Time To First Byte (TTFB). Bien qu'il puisse aider à fournir des conseils, le TTFB peut être manipulé relativement facilement et son importance peut varier. Si vous utilisez Google Lighthouse, vous pouvez également suivre First Contentful Paint et First Meaningful Paint qui indiquent à quelle vitesse votre page "peint" l'écran avec des éléments de votre contenu.

Avez-vous déjà chargé une recette et la moitié de celle-ci n'a pas rattrapé la vitesse à laquelle vous faites défiler parce que vous essayez de passer outre toutes les publicités et tous les récits ? C'est parce que le temps FCP/FMP est très lent.

La troisième statistique est la taille des informations téléchargées sur la page. Si ce nombre est très important, il peut être utile d'examiner de plus près la durée des différents éléments de la page.

Cascade de vitesse de page

Si vous voulez apprendre à accélérer le temps de chargement des pages, isolez les éléments qui ralentissent la vitesse des pages et jetez un œil à la cascade. Un exemple de ce à quoi ressemble la cascade peut être vu ci-dessous.

Une fois que vous avez regardé la cascade, vous devriez avoir une meilleure idée de ce qui peut être amélioré. Ci-dessus, nous pouvons voir que certains des fichiers .js frontaux peuvent probablement être légèrement accélérés.

Plus bas dans la cascade (hors de la page), certains fichiers image prennent plus de temps à se charger et doivent être optimisés. Comprendre quels éléments provoquent le décalage des pages est essentiel lorsque vous vous concentrez sur un temps de chargement de page plus rapide.

Comment accélérer le temps de chargement des pages via le contenu Web

Compresser et optimiser les images

Lorsque vous cherchez à accélérer le temps de chargement des pages, la compression d'image est un excellent point de départ. Trop souvent, les concepteurs de sites Web créent des images qui adoptent des résolutions inutilement élevées. Les images haute résolution occupent plus d'espace de stockage sur un serveur et peuvent augmenter considérablement les temps de chargement.

Nous vous recommandons fortement de redimensionner les images de manière appropriée. Si une image ne va occuper qu'un espace de 100 x 100 pixels sur votre site, il n'est pas nécessaire d'en faire 1000 x 1000. Nous recommandons un plugin comme Smush ou EWWW Image Optimizer si vous utilisez un site WordPress.

Comment convertir des images WebP sur WordPress >>

Extensions de type d'image

Lors de l'enregistrement d'images, il est important de savoir quelle extension utiliser. Doit-il être .jpg ou .png ? Quelqu'un vous a-t-il envoyé un logo en .svg ? Il existe de nombreuses informations contradictoires sur ce qui est le mieux.

Beaucoup disent que .png (Portable Network Graphics) est la meilleure option car il est conçu pour compresser les images autant que possible sans perte de qualité. C'est en partie vrai. Cela dit, il y a des exceptions à la règle. Par exemple, les fichiers .JPEG fonctionnent beaucoup mieux avec des photographies.

Notre suggestion est de vérifier comment l'enregistrement de votre fichier de différentes manières affecte la taille et la qualité lorsqu'il est affiché sur un aperçu de votre page. Si vous remarquez une nette différence, optez pour la meilleure extension.

Compresser le contenu du site

Les images ne sont pas les seuls éléments de page qui nécessitent une compression. Vous devez également compresser les éléments CSS, HTML et JavaScript de votre site. GZip est un outil de compression hautement recommandé que Google suggère de tester avant de l'implémenter dans un environnement de production. Nous vous recommandons d'utiliser un environnement de site de développement qui imite votre propre environnement de production si vous envisagez de le faire.

La chose à propos de la compression du contenu de votre site est qu'il existe des preuves que cela peut augmenter légèrement les durées Time To First Byte. Cependant, cela augmente également considérablement le temps de chargement global de la vitesse de la page, ce que certains experts en référencement suggèrent que Google pourrait en fait prioriser. Nous vous recommandons de tester la compression sur des pages individuelles plutôt que de faire un changement à l'échelle du site.

Simplifiez la conception Web

Si vous voulez un temps de chargement de page plus rapide, moins est presque toujours plus. Au lieu d'ajouter des fonctionnalités supplémentaires aux pages principales, que diriez-vous de vous contenter de quelque chose de plus simple et plus rapide ? Moins une page a de requêtes HTTP, plus elle se chargera rapidement.

En plus d'améliorer la vitesse des pages, il a également été démontré qu'une conception Web simple améliore l'expérience utilisateur dans de nombreux cas. Dans une étude UX menée par Google, il a été constaté que les utilisateurs ont tendance à juger l'esthétique d'un site Web entre 1/50e et 1/20e de seconde, et que les sites visuellement complexes étaient presque toujours jugés moins beaux que leurs homologues plus simples.

Plus un site Web est perçu comme beau, meilleurs seront l'UX et le SEO, et plus les conversions augmenteront. Une conception de site Web plus simple est l'une des méthodes les plus rapides pour améliorer la vitesse des pages en peu de temps. Cependant, nous vous recommandons d'exécuter des tests A/B afin de voir comment les changements fonctionnent réellement plutôt que d'effectuer un changement à 100 % immédiatement.

Comment accélérer le temps de chargement des pages via votre hébergeur

Votre hébergeur joue également un rôle important dans le temps de chargement de la page. Voici quelques façons d'accélérer le temps de chargement des pages avec votre hébergeur.

Activer la mise en cache

La mise en cache est l'endroit où les visiteurs réguliers peuvent charger votre site beaucoup plus rapidement grâce aux éléments de page stockés sur leur disque dur dans un cache ou un stockage temporaire. Pour les sites WordPress et WooCommerce, nous utilisons Redis Object Cache pour gérer les fonctions de mise en cache. Cela sera préinstallé et préconfiguré lorsque vous achetez un plan d'hébergement optimisé WordPress via Nexcess.

Afin d'optimiser encore plus la vitesse des pages, le Nexcess Cloud permet d'utiliser le Cloud Accelerator. Cela peut facilement être activé et désactivé en cliquant sur un bouton sous la section des performances du portail client.

Vous ne savez pas si vous devez activer Varnish ou NGINX ? Découvrez-en plus sur la différence entre Varnish et NGINX dans notre Guide définitif d'optimisation de Magento 2.

Mise en cache et CDN

La mise en cache avec un CDN (Content Delivery Network) en place est un processus plus compliqué et peut nécessiter une configuration avancée. Cependant, une configuration de mise en cache appropriée avec un CDN peut vous aider à atteindre ce public mondial comme si vous étiez avec un hôte local.

Pourquoi avez-vous besoin d'un CDN WordPress >>

Pour WordPress et WooCommerce, consultez notre guide sur la façon de configurer le CDN Nexcess avec WordPress et CDN Enabler.

Autres domaines à considérer

Quelle page optimisez-vous ?

La structure de votre site fait toute la différence en matière d'optimisation. Il est important de réfléchir à la page que vous optimisez et à sa pertinence par rapport à la structure globale du site. Si vous mettez à jour une page, les pages avec lesquelles elle interagit doivent également être prises en compte.

Par exemple, il ne nous est pas utile d'optimiser simplement Nexcess.net, nous devons également optimiser Nexcess.net/magento/hosting et Nexcess.net/cloud/hosting.

Avant de commencer ce processus, élaborez un plan pour déterminer quelles pages clés génèrent le plus de conversions et attirent le plus de retour sur investissement. Commencez ici pour le plus grand impact.

Vitesse de page et SEO

Bien que la vitesse de la page et le référencement soient intrinsèquement liés, ne vous y trompez pas, ce n'est pas le facteur définitif pour déterminer le classement de la page. Google lui-même a déclaré que si le contenu est plus pertinent et que les gens sont prêts à attendre qu'il se charge, ils ne pénaliseront pas ce site.

En fin de compte, la vitesse de la page est un élément important de l'optimisation, mais le contenu, la qualité et l'expérience utilisateur doivent toujours être l'objectif principal.

Accélérez le temps de chargement avec le bon hôte

Nous avons parcouru un long chemin depuis l'attente que les images se chargent ligne par ligne. La vitesse de la page n'est pas seulement quelque chose dont les consommateurs se plaignent - elle peut également faire ou défaire des conversions, des classements, etc. Faire tout ce que vous pouvez pour augmenter la vitesse des pages est TOUJOURS une bonne idée.

Si vous investissez du temps et des efforts pour améliorer le temps de chargement des pages, vous protégez votre entreprise numérique. Associez votre apport personnel à des investissements intelligents. Faites votre prochaine étape en choisissant un hôte qui a fait ses preuves en matière d'évolutivité, de sécurité, de vitesse et de support, comme Nexcess.

Nexcess fournit un hébergement WordPress entièrement géré qui comprend :

• Mises à jour automatiques.
• SSL pour la sécurité.
• CDN intégré.
• Compression d'images.
• Mise en cache.
• Et plus!

Voyez par vous-même avec un essai gratuit de deux semaines.

Contenu connexe

• Comment la vitesse de la page affecte le référencement
• 5 techniques avancées pour accélérer votre site WordPress
• Comment augmenter la vitesse du site WooCommerce et éviter les requêtes lentes
• Les meilleurs hacks de taille d'image WooCommerce pour garder votre site Web rapide
• Qu'est-ce qu'un réseau de diffusion de contenu (CDN) ?
• Les 7 thèmes WordPress les plus rapides
• Pourquoi avez-vous besoin d'un CDN ? | Nexcess Tech Talk

Ce blog a été initialement publié en juillet 2018. Il a depuis été mis à jour pour plus de précision et d'exhaustivité.