Comment optimiser votre site Web comme un pro

Il existe de nombreux facteurs qui influenceront les performances de votre site Web, certains plus techniques que d’autres et vous pouvez corriger la plupart d’entre eux dès maintenant ! Mais que signifie vraiment « optimisé » ? Eh bien, les 4 principales qualités d’un site Web optimisé sont :

  • C’est rapide sur tous les appareils
  • C’est sécurisé
  • Il est adapté aux mobiles  (il a l’air et fonctionne très bien sur tous les appareils)
  • C’est optimisé pour le référencement

Dans cet article de blog, nous aborderons le premier point, commençons !

Mais qu’est-ce qui ne va pas?

Afin de savoir exactement ce qui empêche votre site Web de « vivre sa meilleure vie », vous aurez besoin de l’aide d’un outil d’évaluation tel que Website Grader de Hubspot ou Page Speed ​​Insights de Google. Ces outils analyseront votre site et indiqueront exactement où et quoi améliorer. Allez-y et essayez-les!

Une fois que vous avez découvert certains domaines à améliorer, rassemblez votre équipe et abordez certains éléments.

Évaluateur de site Web Hubspot

La taille compte en ligne

Les navigateurs ont besoin de télécharger tout le code et les fichiers qui composent votre page et cela peut prendre un certain temps, surtout si vous êtes un « collectionneur de scripts » et/ou si vos images ne sont pas optimisées pour le web. Quelque chose de simple que vous pouvez réaliser aujourd’hui et qui fera une grande différence consiste à optimiser vos images pour vous assurer de ne pas diffuser une image surdimensionnée. De plus, soyez conscient de la quantité d’images que vous utilisez. Si vous essayez d’obtenir un certain look, pensez : cela pourrait-il être réalisé en ajoutant à la place un CSS plus léger et plus élégant ?

 « Pour une page type, les images représentent 48% du poids de la page et peuvent constituer 39% des requêtes » – Lukas Pleva, INBOUND 2020 Presentation Website Optimization

Certains outils d’optimisation d’image populaires que vous pouvez utiliser sont :

Similaire  Dans quelle mesure une agence de marketing doit-elle être impliquée dans un projet de site Web ?

Si vous avez optimisé autant que possible, essayez d’implémenter le chargement différé.

Parlons maintenant des scripts…

Vous souvenez-vous de cet outil de suivi génial que votre équipe marketing a insisté pour utiliser il y a 2 ans et qui a depuis été oublié ? Eh bien, il y a de fortes chances que le script de cette analyse soit toujours sur votre site. Les scripts hérités peuvent ralentir votre site Web et nous devons en parler. Afin de résoudre ce problème, vous devrez auditer vos scripts et hiérarchiser ce qui est important. Assurez-vous que votre site ne contient que des scripts utilisés et nécessaires, débarrassez-vous du reste ! 

  » Considérant un pool de 50 nouveaux sites, le temps de chargement moyen avec des scripts est de 9,46 secondes, sans scripts de 2,69 secondes et chaque script que vous ajoutez représente une autre requête HTTP » Lukas Pleva, INBOUND 2020 Presentation Website Optimization

Comment pouvez-vous résoudre ce problème :

 

  • Utilisez un gestionnaire de balises (Google Tag Manager), les gestionnaires de balises s’appuient sur un seul extrait de code JavaScript pour charger toutes vos balises
  • Ne déclenchez les balises que sur les pages qui en ont besoin !
  • Auditez vos balises, vous pouvez utiliser Ghostery pour vous aider

Oh! Javascript 

C’est trop cool cet effet glissant ! Mais cela ralentit le temps de chargement de votre site Web. Le chargement d’une grande quantité de code JavaScript augmente en général la taille des fichiers javascript et le temps nécessaire au navigateur pour rendre les éléments interactifs.

Similaire  Meilleurs kits de créateurs de contenu pour vidéos, podcasts et blogs

Une autre chose à considérer est l’endroit où se trouve votre JavaScript, le chargement de JavaScript dans le <head> peut être un problème car javaScript est  une ressource de blocage de rendu  par défaut.

  • Si vous ajoutez JavaScript manuellement, assurez-vous qu’il se charge juste avant la balise </body> pour éviter le blocage du rendu.
  • Minimiser l’utilisation des plugins JavaScript
  • Reconsidérez les animations de votre page (je suis désolé)