Améliorer la Performance Web sous un CMS

Les CMS apportent tellement de fonctionnalités et de possibilités via leur back-office, que la construction des pages peut rapidement devenir lourde. Entre des DOM de plus de 2700 et des modules à la pelle, le temps de chargement s’allonge assez facilement chez nos fidèles amis les CMS …

 

“L’ennemi principal de la performance : Les images.”

Lorsque vous analyserez les performances de votre site, vous allez rapidement vous rendre compte que la majorité des Mo chargés sont des images. Vient généralement ensuite le Javascript et et CSS. Avec le full width et le succès commercial des visuels alléchants, notamment avec Instagram, les images ont pris une place plus importante et stratégique au sein d’un site web. Cependant il existe des règles techniques pour réduire au maximum le poids de ces images au chargement. Vous pouvez avant tout, prendre conscience du poids et des conditions des différents formats d’images avant de vous lancer dans le design de votre site. Quoi qu’il en soit, il est fortement recommander d’optimiser, sans perte tout ses visuels en ligne.

 

Rapport Performance Site Web

Rapport d’analyse de Performance d’un Site Web par DareBoost

Pourtant, ces outils, bien qu’efficaces, ne suffisent pas à réduire le temps de chargement des images de votre site. Le meilleur moyen d’optimiser les performances se passe en amont, lors de la création des visuels et de leur enregistrement. Il faut savoir que les formats d’images, en plus du rendu visible, ne chargent pas tous les mêmes données.

En effet nous retrouvons le JPEG, un format léger mais avec une pixellisation désagréable à la redimension. L’optimisation de cette extension est donc faible contrairement au PNG ! Évidemment les différents formats se complètent et relève les défauts des autres. Comme ce génialissime format animé qu’est le GIF, capable de capturer une séquence animée malgré sa pixellisation, mais qui demeure un format très, très lourd …

L’optimisation des images se fait donc par le choix de son format selon sa future utilisation, mais aussi par sa taille. Effectivement, les images redimensionnées en HTML sont chargées par le navigateurs à leur taille originale, puis via une requête, sera redimensionnée. Une double dose de travail et du temps de perdu.

 

“Le développement en interne : Une solution pour améliorer la performance.”

Il est sûr que s’armer d’une équipe de développeurs aguerris permet de produire des fonctionnalités adaptées au site web, sans fioritures. Seulement, le développement web dirigé vers un seul site web a un coût de production beaucoup plus élevé que les modules (même les plus chers) d’un CMS. En effet, et avec la logique, la rentabilité de ces modules augmente avec le nombre de sites web qui peuvent être clients. Ils s’adaptent à tout sorte de projets avec une interface agréable en back office. Ainsi de nombreuses fonctionnalités CSS, PHP et JS se configurent sans connaissances techniques.

Malheureusement, cette possibilité de configuration plus ou moins poussée, enclenche des attributs de style dans le code HTML, et va chercher des fichiers JS ou CSS en externe. En outre, le chargement de la page sera excessif, du fait du chemin plus long vers un serveur externe que vers le serveur du site web.

 

Synthèse des 10 axes principaux d’Optimisation de Performance Web sur un CMS.

  1. Adapter le format de l’image selon son utilisation
  2. Privilégier au maximum les animations CSS aux GIFs
  3. Optimiser tous les visuels (sans perte de qualité) avec outils en ligne
  4. Créer des visuels aux dimensions d’affichage pour éviter au maximum la redimension
  5. Créer des formes en CSS au lieu d’utiliser des fonds en images
  6. Privilégier les font d’icônes aux pictogrammes JPG ou PNG
  7. Insérer les scripts en internes en bas du <body> dans le HTML
  8. Sélectionner en CSS par des attributs (ID ou des CLASS) au lieu des balises (a, blockquote, li, ul …)
  9. Compiler les feuilles CSS en une seule
  10. Minimiser les fichiers CSS et JS en production

 

Plonger son nez et mettre ses mains dans le code est toujours la meilleure solution pour optimiser la performance de son site depuis la première “pierre” posée. Perte de temps pour certains mais gain d’argent pour d’autres, cette optimisation manuelle est la base solide d’un site au chargement rapide dès sa construction.

Si vous êtes dans une impasse, une autre méthode fourbe peut vous aider à diminuer votre temps de chargement …

 

En attendant, pour aller plus loin : Comment Optimiser le Front-End pour les navigateurs

Laisser un commentaire