@import et perfs

Bonjour,

Il m'étonnerait qu'en 2023, il y ait des différences significatives selon la manière dont on inclut des fichiers css dans une page. Que ce soit via des @import ou des séries de <link> dans le html, ça doit revenir un peu au même.

Ce qui est facteur de ralentissement, c'est surtout d'avoir le code css réparti dans une multitude de petits fichiers, ou bien à l'inverse un seul gros fichier contenant 99% de code css inutile pour une page donnée (en particulier il faut faire attention aux polices de caractères ne servant que dans quelques pages du site).

En résumé, c'est une affaire de dosage entre ces deux extrêmes.

Il convient aussi de garder à l'esprit que la plupart de ces fichiers se retrouvent vite en cache, ce qui atténue pas mal l'intérêt de se poser des questions !

Amicalement,

parsimonhi a écrit :
Bonjour,

Il m'étonnerait qu'en 2023, il y ait des différences significatives selon la manière dont on inclut des fichiers css dans une page. Que ce soit via des @import ou des séries de &lt;link&gt; dans le html, ça doit revenir un peu au même.

Ce qui est facteur de ralentissement, c'est surtout d'avoir le code css réparti dans une multitude de petits fichiers, ou bien à l'inverse un seul gros fichier contenant 99% de code css inutile pour une page donnée (en particulier il faut faire attention aux polices de caractères ne servant que dans quelques pages du site).

En résumé, c'est une affaire de dosage entre ces deux extrêmes.

Il convient aussi de garder à l'esprit que la plupart de ces fichiers se retrouvent vite en cache, ce qui atténue pas mal l'intérêt de se poser des questions !

Amicalement,

Oui le débit de connexion moyen de 2023 est évidemment bien supérieur à celui des années 2000. J'avais lu à une époque qu'il valait mieux privilégier des simple link car @import bloquait le chargement simultané.
Pour ce qui est des fichiers multiple, y'a pas un système de concaténation qui permet au final d'envoyer un seul fichier au serveur ?

Bonjour,

Hermann a écrit :
Oui le débit de connexion moyen de 2023 est évidemment bien supérieur à celui des années 2000. J'avais lu à une époque qu'il valait mieux privilégier des simple link car @import bloquait le chargement simultané.

Ce n'est pas seulement une question de débit de connexion. Si j'étais développeur chez un éditeur de navigateur, la 1re chose que je ferais, c'est de faire en sorte qu'un tel "blockage" ait le moins de conséquences possible.

Hermann a écrit :
Pour ce qui est des fichiers multiples, y'a pas un système de concaténation qui permet au final d'envoyer un seul fichier au serveur ?

Ctrl+C (ou Cmd+C) puis Ctrl+V (ou Cmd+V) via un éditeur de texte ?

Eventuellement, pour ceux qui font des sites à la chaine, y a des outils qui gèrent ça. Par exemple : https://www.alsacreations.com/tuto/lire/1686-introduction-a-gulp.html

Amicalement,

parsimonhi a écrit :
Eventuellement, pour ceux qui font des sites à la chaine, y a des outils qui gèrent ça. Par exemple : https://www.alsacreations.com/tuto/lire/1686-introduction-a-gulp.html

Les préprocesseurs (Sass, Less, Sylus) font ça très bien aussi. Par exemple, toujours sous node.js, chez moi qui utilise Stylus (en natif, pas besoin de Grunt ni de Gulp) :

stylus -u -w styles/development/main.styl -o styles/main.css -c -m

La commande de minification c'est juste le drapeau `-m`.
Modifié par Olivier C (30 Mar 2023 - 22:38)

parsimonhi a écrit :

....

Ok merci. Encore un nouvel outil à apprendre...
Tu pourras signaler un problème de commentaires à Dew : je te cite mais c'est le message d'Olivier est qui cité

Olivier C a écrit :

Les préprocesseurs (Sass, Less, Sylus) font ça très bien aussi. Par exemple, toujours sous nod.js, moi qui utilise Stylus (en natif, pas besoin de Grunt ni de Gulp) :

stylus -u -w styles/development/main.styl -o styles/main.css -c -m

La commande de minification c'est juste le drapeau `-m`.

Je dois justement apprendre à me servir de Sass.
Modifié par Hermann (30 Mar 2023 - 18:04)