Article invité rédigé par Arnaud de MediaMiu !
S’il y a bien une chose sur laquelle l’ensemble des acteurs du web est d’accord, c’est l’importance du temps de chargement d’un site. Plus une page se charge rapidement, plus c’est agréable pour tout le monde.
D’un point de vue SEO, cela peut avoir un impact négatif sur le classement dans les résultats de recherche, mais d’un point de vue utilisateur, ça peut être carrément catastrophique de devoir attendre le chargement d’une page.
Tous ceux qui s’intéressent de près à la construction d’un site web connaissent les outils comme PageSpeed Insights de Google ou GTMetrix qui servent à analyser la performance d’un site. Il leur est sûrement arrivé de tomber sur ce genre de suggestions d’optimisation :
Google préconise l’utilisation de la technique des sprites CSS afin d’améliorer les performances de votre site.
Qu’est-ce qu’un sprite CSS ?
Un sprite est un fichier unique qui stocke de multiples images, positionnées les unes à côté des autres. Pour les utiliser sur son site, on les appelle dans la feuille de style grâce à la propriété background-position.
Cette technique permet de limiter clairement le nombre de requêtes HTTP envoyées au serveur et donc de gagner en rapidité lors du chargement d’une page. Le serveur n’a plus à charger toutes les images du site avec des tailles et des poids différents.
Pour en savoir, je recommande la lecture de cet article d’Alsacréation (http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html).
Une bonne alternative pour gérer ses icônes
Utiliser un fichier sprite est une très bonne pratique mais nécessite de bien maîtriser le CSS et s’avère parfois un peu lourd à gérer, surtout quand il faut prévoir des icônes de plusieurs tailles voire même de plusieurs couleurs. Les largeurs d’écran et les résolutions multiples (du mobile au Retina display) peuvent également devenir un problème assez complexe à gérer. Google recommande cette pratique mais ne l’utilise pas toujours non plus (ex : http://partners-connect.withgoogle.com ).
Heureusement la communauté de développement web a déjà résolu ce problème avec les polices d’icônes ou fontes-icônes. Le principe est d’utiliser une police (une font en anglais) pour représenter une icône. L’avantage majeur est que les icônes utilisées sont vectorielles, donc modifiables à l’infini. De plus, elles se comportent comme des polices de caractères normales, toutes les transformations CSS sont donc possibles.
Il existe aujourd’hui des dizaines de fontes-icônes mais une des plus abordables pour un non développeur est sûrement FontAwesome, hébergée sur le « framework » Bootstrap.
- http://icomoon.io/
- http://pictos.cc/font/
- http://www.entypo.com/
- http://symbolset.com/
- https://pictonic.co/free
- https://useiconic.com/open/
- http://pfefferle.github.io/openwebicons/
- http://mfglabs.github.io/mfglabs-iconset/
Il existe même une application web permettant de choisir les icônes à intégrer dans une fonte (http://fontello.com) et un logiciel pour concevoir sa propre collection de fonte (http://fontforge.org).
Il y a néanmoins des inconvénients à cette technique et en premier lieu, les soucis d’accessibilité (http://filamentgroup.com/lab/bulletproof_icon_fonts.html), l’aspect monochrome des icônes et bien sûr le fait que cela ne concerne que les icônes.
Pourquoi faire le choix des fontes icônes ?
Tout d’abord parce que cette pratique est une des tendances du moment et que bon nombre de sites pourraient être conçus de cette manière dans le futur. Il est toujours intéressant de connaître les pratiques et les évolutions du développement web et vivre avec son temps.
Parce que le rendu est très sympa et qu’il est très facile pour quelqu’un qui n’y connait rien en design de présenter un rendu très graphique, non sans une perte d’originalité et de personnalité bien sûr.
Enfin parce que les fontes icônes représentent un gain en performance. Moins lourde à charger qu’une image, une police d’icônes peut s’avérer être une bonne solution dans beaucoup de cas.
Les fontes-icônes ne sont bien évidemment pas la solution ultime et parfaite. Elles ont aussi leurs limites d’utilisation mais elles peuvent être, dans bien des cas, un avantage certain dans la construction des sites web et de leurs performances de chargement.
Passionnée par le référencement naturel et la rédaction web ! Blogueuse depuis 2012 ! Coauteur du livre “Techniques de référencement web” et “Stratégie de contenu e-commerce”.
Découvrez mes “Prestations SEO” et contactez-moi pour échanger sur votre projet SEO.
Mediamiu, mon seul référenceur à moi que j’ai rencontré quand je créchais à Rennes! Ce n’est un secret pour personne, ou pour tout le monde, comme l’enseignement de Zarathoustra, je laisse l’intégration aux intégrateurs, mais j’ai tout de même tout comprendu à ton bel article, simple et didactique, donc bien ouèj!
Bises
Que ce soit les nouvelles fonts textuelles ou fonts icônes, elles sont lourdes à charger. si vous passez par un service gratuit comme Font Awesome et que vous n’optimisez pas les fichiers (tri des icônes), le poids de la page prend rapidement 100ko.
Donc intéressant et utile mais veiller à une intégration judicieuse.
Bonjour,
Perso je ne suis pas fan de sprites CSS tout simplement parce qu’a changement de thème on devra refaire tout le boulot au niveau CSS et images si veut être en accord avec le thème.
Je pense que les sprites CSS sont appelés à disparaître de toute manière au profit du format cvs.
Hormis cela, c’est une solution alternative qui me semble pas mal mais que je ne connais pas, donc Merci pour la découverte !
Amicalement.
@Sam : Merci vieux ! Bon par contre, carrément déçu de ne pas t’avoir croisé à Angers au #WebCampDay. 🙁
@Cédric et @franckwylliams : Aucun système n’est parfait et celui-ci demande aussi un peu d’optimisation mais c’est une réelle alternative notamment dans le cas de l’affichage Retina
@Alexandra : Encore merci pour ton invit’. On est bien reçu chez toi ! 😉
Si vous chercher vraiment la performance, limitez vous aux symboles html : de 2600 à 26ff ou de 2700 à 27bf en hexa (en utf8 évidemment) plutôt que de jouer avec des sprites ou des fonts.
Un point qui n’est pas abordé dans l’article : les sprites permettent des animations, quand les fonts-icônes, sauf erreur de ma part, ne le permettent pas.
C’ets donc parfois ce critère qui fera pencher la balance d’un côté ou de l’autre.
Moi je me limite aux symboles html. et ça va !
Les font, je suis un inconditionnel… C’est tellement pratique et plus ou moins esthétique. Après le placement n’est pas toujours aussi évident que celà.
Pour revenir sur l’aspect esthétique, c’est vrai que c’est un peu limité niveau couleur mais on ne peu pas gagner sur tous les tableaux.
En tout cas merci pour cet article clair et concis.
+1
Pourquoi remplacer les sprites CSS par des Fontes-icône ?
Parce que c’est vraiment pratique et sans prise de tête… pour tous les webdesigner et web développeur c’est un vrai temps de gain assez magistral… pour le coté Monochrome c’est vrai que c’est dommage.
Le premier ennemi des sites e-commerce, c’est la page lente. Elle augmente le taux de rebond, ce qui est néfaste pour le référencement. Ceci dit, il faut toujours bien choisir une solution efficace pour améliorer ce temps de chargement, à noter que chaque site peut demander des outils très différents.
Il y a un meilleur compromis en ce moment avec les icônes SVG. Je n’ai pas essayé personnellement, mais d’après de nombreux tests il parait que la performance est plus accrue.
Ils en parlent ici: http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/
A noté que si vous utilisez SASS et compass. Compass vous permettra de générer automatiquement un sprite avec des images contenus dans le dossier de votre choix.