Ma connexion Internet de campagne m'empêche d'utiliser l'app tant que les icônes ne sont pas chargées about flus HOT 5 CLOSED

J'ai pris le temps de changer le système cette après-midi, c’était un peu rébarbatif mais moins pénible que ce que je craignais. J'ai opté pour intégrer les SVG directement dans le HTML, donc normalement plus aucun délais entre l'affichage de l'interface et le chargement des icônes. Ça m’a aussi permis de faire sauter tous les petits hacks liés aux icônes \o/

Ceci dit les pages HTML sont maintenant plus grosses : +53% sur un journal relativement chargé (passage de ~165 Ko à ~253 Ko). C’est plus léger sur les autres pages qui font moins appel aux icônes. Je pense qu'il y aura une phase d'optimisation dans un second temps.

Je pense que ça passera en prod' la semaine prochaine.

from flus.

C'est en prod ! :)

from flus.

15 secondes, c'est long ! :/ En principe il y a du cache pendant 30 jours, donc ça ne devrait pas être si fréquent, tu confirmes ?

Le problème (technique) est un poil plus complexe car il ne s'agit pas d'un unique fichier "font" : les icônes sont sous forme de SVG et sont intégrées une à une en CSS.

Une alternative possible qui pourrait résoudre le problème (mais demande des changements assez importants) serait d'intégrer les icônes SVG directement dans le HTML. Je perdrais par contre le bénéfice du cache. Il y aurait la possibilité d'utiliser des références externes, mais ce n'est pas si simple. L'injection dans le HTML semble être la meilleure solution aujourd'hui. C'est ce que fait GitHub au final, le cache n'est peut-être pas un si gros problème :) Reste le coût technique à changer l'existant, peut-être pas énorme, mais prise de tête. Je calerais ça un de ces jours !

from flus.

C'est la première fois que je rencontre le soucis, mais j'utilise pas souvent cette connexion (justement parce que la latence m'aide pas trop). Y'a ce potentiel en 3G ou dans des zones où ça capte moyen. En fait en dehors des grandes agglomérations.

Solution moins coûteuse techniquement (surtout si les assets changent pas souvent) :

.icon--credit-card::before {
-    background-image: url("../icons/commerce/credit-card-line.svg");
+    background-image: url(data:image/svg+xml;base64,…);
}

from flus.

Oui effectivement je n'y avais pas pensé, bonne idée ! 👍 Ceci dit une raison non évoquée dans mon précédent message pour passer à une injection dans le HTML serait aussi de pouvoir me passer d'un hack rigolo mais pas très maintenable (i.e. je pourrais utiliser fill à la place).

Ça me donne quand même une solution intermédiaire.

from flus.