-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/stop with svg sprites #347
Conversation
Tu as du matériel à lire là dessus ? J'ai cherché pas mal de fois mais je n'ai jamais trouvé le benchmark etc. mais rien de concluant. |
source: le CTO de Fasterize au We Love Speed |
Ok, mais ça ne compare pas les perfs entre les 4-5 méthodes. |
Bon son arugmentaire : "on a du http2 ne faites plus de sprites" me semble léger quand même.
En HTTP2. |
Hey, J'ai fait des ptits tests de mon côté :
Au final, la différence se situe sur le temps du premier print significatif.
On a donc des performances moins bonnes en cache vidé, un temps de chargement plus lent et un poids plus important. Cependant en sprite, l'interface "pop" au lieu d'avoir fichier par fichier qui peuvent être optimisés en http2 on a un payload. Il faut aussi souligner qu'une fois les fichiers en cache, la version fichier par fichier est plus rapide : 140ms en fichiers en moyenne vs 260ms en sprite en moyenne. Les fichiers peuvent aussi être lazyload fichiers par fichiers, là où le sprite ne peut pas être évité. A la lumière de tout ça, j'aurai tendance à faire du fichier par fichier aussi. Qu'en pensez-vous ? :) |
Je pense que tu pourrais faire un article sur le blog de BE API avec tes tests :) |
TODO : report de la configuration SPF de @ptesei sur cette PR ? |
pb soulevé par @n-langle : on perd les classe pour les viser directement. solution de contournement, on utilise un wrapper. |
20.11 : acter si on part sur des SVG inline ou des Sprites (ou un mix des 2) |
Partir sur un mix des deux pratiques :
|
1f5ad62
to
f019c07
Compare
eedbd0f
to
82777c9
Compare
82777c9
to
24217df
Compare
24217df
to
b7ec6e4
Compare
À la suite du We Love Speed 2023, une des nombreuses recommandations de la web perf était d'arrêter d'utiliser les sprites (anciennement PNG et actuellement SVG). Charger un sprite de SVG assez lourd pour n'afficher au final que quelques icônes sur une page n'est pas oufissime.
C'est pourquoi dans cette PR, je vous propose d'arrêter la génération de sprites SVG et d'utiliser les fonctions
the_icon()
etget_the_icon()
pour afficher les SVG en plain.Les SVG générés dans le dossier dist possèdent la classe
icon
, les attributsaria-hidden="true"
etfocusable="false"
.En attente de voir vos retours.