Votre site a mieux à faire que vous faire attendre. Découvrir PageSpeed.fr
Code et rendu

Icônes SVG ou police d’icônes : comparer les dépendances

Le format d’une petite icône peut imposer le chargement d’un ensemble beaucoup plus grand.

Inventorier les symboles utiles

Un site peut charger une bibliothèque entière pour afficher quelques flèches et logos sociaux. Commencez par repérer les icônes réellement utilisées, y compris dans les menus et les messages d’erreur. Le nombre de symboles visibles au premier écran ne représente pas toujours tout le besoin.

Préserver l’accessibilité

Une icône décorative ne doit pas ajouter un mot incompréhensible à la lecture assistée. Une icône qui porte seule une action doit avoir un nom accessible, indépendamment de son format. Tester un remplacement implique donc le rendu, mais aussi les libellés des boutons et les états au clavier.

Comparer le coût complet

Le SVG permet de cibler les éléments utiles et de les styliser précisément. Son intégration peut toutefois augmenter le HTML si de gros dessins sont répétés. Comparez fichier externe, sprite et intégration directe selon le nombre d’usages. Gardez un système cohérent plutôt que plusieurs bibliothèques superposées dans le même thème.

Pour aller à la source

Besoin d’aide pour votre site ? Retrouvez les conseils d’installation et de compatibilité dans notre centre d’aide.
Votre prochaine étape

Et si votre site
passait la seconde ?

Essayez, comparez, gardez la main. Vous pouvez désactiver ou supprimer l’extension à tout moment pour retrouver le fonctionnement habituel de votre site.

Accélérer mon siteMesurer mon site