Conseils en performance CSS et Opera Style Profiler

de | 7 décembre 2011

Opera Style Profiler

Grande nouveauté et excellente initiative menée par Opera pour sensibiliser les développeurs sur la performance des navigateurs lors de l’interprétation des CSS d’un site.

Une version de travail du navigateur Opera permet de mesurer la performance des feuilles de style CSS d’un site Internet via un outil appelé Style Profiler (voir capture d’écran ci-dessus). L’idée derrière ce travail mené par le navigateur est de sensibiliser les développeurs web à la vitesse d’interprétation des CSS.

Si il est évident qu’une feuille de style compliquée (voir des feuilles de style multiples pour un même site) est synonymes de mauvaises performances, il est très difficile de mesurer précisément cela actuellement.

Le navigateur Opera (et Dragonfly qui permet, comme Firebug, d’étudier et déboguer facilement des pages web) va donc intégrer un outil qui va permettre de faciliter la recherche de points sensibles sur son site.

En attendant l’outil d’Opera voici quelques règles à observer pour créer des feuilles de style bien optimisées :

  • Eviter le selecteur universel *
  • Utiliser des sélecteurs « fils » du type ul > li > etc.
  • Utiliser le :hover sur autre chose que la balise a
  • Eviter au maximum les fichiers CSS immenses (trop de style tue le style)
  • Eviter les sélecteurs comme :first-child ou :first-letter (même si c’est très pratique)
  • Eviter si possible les sélecteurs sur les attributs comme a[href^= »http: »] (même si c’est très très pratique)

L’idée derrière ces principes est d’éviter au navigateur (et son moteur de rendu chargé d’afficher les pages web) d’effectuer des tâches consommatrices en temps.

Naturellement, il n’est généralement pas utile d’optimiser à outrance une feuille de style. Cela peut même être contre productif si le temps passé sur ce sujet est de plusieurs heures. De même, l’affichage d’une page Internet ne pose plus vraiment de problème pour n’importe quel navigateur. Le problème vient plus généralement d’une utilisation outrancière (ou mal conçue) de Javascript – côté client.

Mais dans certains cas très particulier ou pour la conception de sites web mobiles ces points sont à regarder de plus près et à garder en tête.

Lien vers l’annonce du Style Profiler sur le site d’Opera.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.