Comment équilibrer les vitesses de chargement rapides des pages Web avec un contenu riche

Des temps de chargement de page rapides et un contenu riche et interactif sont tous deux essentiels au succès d'un site Web, mais il peut être difficile de trouver un équilibre entre les deux.

Ce n'est un secret pour personne que les temps de chargement des pages sont extrêmement importants pour le succès d'un site Web. Les algorithmes de recherche de Google favorisent des temps de chargement rapides et de nombreuses recherches montrent également qu'une légère augmentation du temps de chargement des pages peut avoir un impact négatif sur les conversions. Le directeur du marketing numérique de Hallam, Tom Whiley, a écrit un excellent article de blog sur la façon d'améliorer la vitesse de chargement de vos pages l'année dernière. Alors que nos partenaires d'hébergement, WP Engine, ont produit une excellente infographie sur la vitesse de chargement des pages.

Les sites Web doivent également être riches en contenu, en images et en interactivité pour encourager les conversions. Cela conduit inévitablement à des pages plus grandes, ce qui ralentit naturellement le temps de chargement des pages.

Le conflit entre le besoin de rapidité et la demande de contenu riche peut paralyser les projets de conception. Il est donc crucial de trouver un équilibre qui satisfasse aux deux exigences.

Dans ce blog, je partagerai avec vous une approche qui vous aidera à équilibrer ces deux défis contradictoires.

Relier la vitesse d'une page à son objectif

Il n'est pas possible de prédire les temps de chargement tant qu'un site Web n'a pas atteint un stade de maturité raisonnable. Il est donc préférable d'adopter une approche itérative pour mesurer et améliorer la vitesse.

Le point de départ clé est d'identifier les pages de destination SEO du site et ses pages de contenu riche. Vous pouvez alors vous concentrer sur la réduction autant que possible de la taille de la page et de la vitesse de chargement des pages SEO.

De même, les pages de destination riches peuvent disposer d'un peu plus d'espace pour l'interaction de l'utilisateur.

Voici un processus approximatif qui peut être appliqué :

1. Identifiez les pages de destination clés dont nous serons la cible pour des vitesses de chargement réduites.
2. Concevez autour des meilleures pratiques pour des temps de chargement réduits.
3. Décidez des fonctionnalités autour des meilleures pratiques pour des temps de chargement faibles.
4. Développer la ou les pages.
5. Mesurez et recherchez des opportunités pour gagner du temps de chargement.
6. Répétez 4-5 selon le cas.

Cela ne couvre que la première partie de l'histoire. Les pages de référencement clés doivent ensuite être surveillées en permanence pour les temps de chargement des pages afin de s'assurer qu'elles fonctionnent toujours comme prévu, en particulier lors de l'utilisation d'un système de gestion de contenu qui permet à quiconque de modifier les pages.

Ainsi, après avoir lancé le site Web, il y a deux étapes simples qui peuvent être suivies :

1. Mettez en place une vérification mensuelle des principales pages de destination pour vous assurer qu'elles fonctionnent toujours.
2. Utilisez un outil de surveillance de la vitesse de la page qui se déclenche une fois que la page fonctionne en dessous d'un niveau convenu.

Considérations de conception pour l'optimisation des vitesses de charge

La conception du site joue un rôle clé pour déterminer dans quelle mesure il est possible d'optimiser les temps de chargement des pages. Lorsqu'il s'agit de pages Web, la taille compte vraiment. L'objectif est de garder le temps de chargement des pages inférieur à 500k idéalement, mais certainement inférieur à 1 Mo au maximum.

Voici quelques mesures à prendre pour minimiser les temps de chargement :

1. Minimisez autant que possible l'utilisation d'images sur les pages de destination clés. Il est trop facile d'utiliser des images pour donner l'impression qu'une page est riche lorsqu'une utilisation subtile de l'iconographie et du design peut avoir le même effet.
2. Lorsque l'imagerie est utilisée, elle doit être optimisée tout en s'assurant qu'il n'y a pas de dégradation inacceptable de la qualité.
3. Utilisez des pages de destination optimisées pour la recherche organique et conservez tout contenu riche sur des pages plus profondes qui ne sont pas ciblées pour la recherche organique.
4. Évitez de nombreuses mises en page uniques et complexes sur plusieurs modèles. Plus le balisage HTML est simple, plus les fichiers seront petits.
5. Évitez les éléments interactifs complexes qui reposent sur de lourdes bibliothèques Javascript. Cela peut sembler cool de voir quelque chose bouger sur l'écran, mais est-ce vraiment nécessaire ?

Considérations techniques lors de la mise en œuvre

Et enfin, nous pouvons aborder certains des aspects les plus techniques de la vitesse de chargement des pages qui doivent être pris en compte dans le choix de l'hébergement :

1. Supprimez le recours à des scripts tiers dans la mesure du possible. Ceux-ci causent des problèmes car non seulement vous dépendez du chargement de ces scripts avant le chargement de la page, mais parfois ils sont également soumis à une charge élevée et se chargent plus lentement que d'habitude. Cela peut conduire à des temps de chargement « grumeleux ».
2. Utilisez des techniques de chargement paresseux pour vous assurer que les images qui n'apparaissent pas au-dessus du pli sont chargées lorsque l'utilisateur défile dans la vue.
3. Mieux utiliser les images responsives. Il y a eu quelques progrès dans la façon dont les images réactives sont gérées par les navigateurs, ce qui signifie que nous n'avons pas besoin de fournir une seule grande image qui fonctionne sur tous les ports d'affichage et peut offrir une meilleure image pour des résolutions spécifiques.
4. Assurez-vous que les vidéos intégrées sont chargées après le chargement de la page, plutôt que dans le cadre du chargement de la page. Cela signifie que les utilisateurs verront une image d'aperçu d'une vidéo, puis verront la vidéo réelle après avoir cliqué sur le lien.
5. Évitez les fichiers htaccess volumineux pour les redirections 301 et combinez les règles dans des redirections de catégorie en masse, plutôt que des redirections de page à page individuelles.
6. Utilisez un CDN pour les images. Cela devra être mesuré car les CDN peuvent nuire aux performances, si la base d'utilisateurs du site est particulièrement localisée.
7. Minimisez les fichiers CSS et Javascript. Vous devriez déjà le faire dans la plupart des cas, mais il peut y avoir d'autres possibilités de réduire certains des fichiers sur les pages clés. C'est un élément central pour prendre la décision d'installer de nouveaux plugins.
8. Abandon de la prise en charge des anciens navigateurs. Les navigateurs plus anciens nécessitent la création de fichiers CSS et JS spécifiques et leur chargement conditionnel sur le site. Si nous pouvons les supprimer complètement, c'est une demande de moins à faire.
9. Minimisez le nombre de plugins utilisés sur votre site. Nous héritons régulièrement de sites Web qui souffrent d'un gonflement des plugins. Ce n'est pas un nouveau problème lorsque l'on travaille avec un CMS, mais c'est toujours un gros problème.
10. Supprimez toute dépendance vis-à-vis des exigences d'hébergement non essentielles, telles que l'hébergement d'images pour les signatures de courrier électronique
11. Exécutez des requêtes d'optimisation de base de données. Si votre site Web existe depuis un certain temps, il existe un certain nombre de techniques de base de données qui peuvent être utilisées pour optimiser le temps d'exécution des requêtes.

En résumé, la création d'un site hautement optimisé est un équilibre entre la spécification, la conception et la mise en œuvre. Le facteur clé pour moi est de différencier les pages de référencement hautement optimisées des autres pages lorsque cela est possible et de se concentrer sur leur optimisation autant que possible.

Si vous avez besoin d'aide pour votre développement Web, n'hésitez pas à nous contacter.