SEO et minification

Bonjour à tous,
j'ai besoin de vos conseils et avis par rapport à la mode de la minification pour les performances et notamment le SEO.
Je comprends le gain, mais je ne comprends pas comment vous faites pour gérer ce genre de choses dans nos métiers de développeur et webmaster...
Qu'on se le dise, c'est SUUUPER chiant en fait, non ?
Travailler dans un fichier style.css, puis ensuite le minifier, puis le mettre en ligne, et ensuite quand on doit modifier il faut le dé-minifier sinon c'est illisible...
Bref, vous avez des "bonnes pratiques" ou des conseils pour simplifier le travail ?
Merci de votre aide

Salut,

On travaille surtout avec des outils comme grunt, gulp, npm, webpack etc qui font tout automatiquement. Le code source est découpé à mort, avec des templates pour pas tout réécrire, bien aéré, avec du SASS et la compilation s'occupe de tout transformer en html, css,js etc de faire des sitemap, de minifier, etc. Le code en prod est différent du code source hein.

Exemple dans cet article :
https://www.alsacreations.com/tuto/lire/1685-ebauche-de-workflow-gulp-taches-uncss-includes-critical-css.html

a écrit :
“gulp”
“gulp-less” (compilation LESS vers CSS)
“gulp-autoprefixer” (ajout des préfixes nécessaires)
“gulp-minify-css” (minification CSS)
“gulp-rename” (renommage en “.min.css”)
“gulp-uglify” (minification JS)
“gulp-imagemin” (optimisation des images)
“gulp-html-extend” (includes HTML)
“gulp-uncss” (suppression des CSS non utilisés)
“critical” (CSS inline)

(et sinon, plutot que de "déminifier" tu peux aussi garder la version avant minification et bosser dessus en mettant en ligne la version minifiée)
Modifié par _laurent (02 Feb 2022 - 13:57)

je crois que j'ai raté un ou 2 trains dans l'histoire snif...
va falloir que je m'y mette...
compliqué de se former tout en continuant de bosser dans le rush
merci pour ces orientations

C'est vraiment utile de minifier quand le serveur compresse déjà l'envoi ?

kerlutinoec a écrit :
C'est vraiment utile de minifier quand le serveur compresse déjà l'envoi ?

Est-ce qu'un fichier minifié compressé et moins lourd qu'un fichier non minifié compressé ? Et de combien ? C'est ca qu'il faut regarder en fait et voir si le jeu en vaut la chandelle. Je connais pas trop la compression mais j'imagine qu'il faut la configurer en plus.
Modifié par _laurent (02 Feb 2022 - 17:04)

Bonjour,

Evidemment, ça dépend des contenus, mais en gros, si pour un fichier de 100ko, on obtient une fichier de 75ko minimifié, et si pour ce même fichier de 100ko, on obtient un fichier compressé de 25ko (division de la taille par 4), on devrait diminuer la taille du fichier minimifié par (environ) 4 aussi à la compression, et donc obtenir un fichier d'un peu moins de 20ko.

La minimification et la compression ne font pas du tout le même genre de "compression".

Amicalement,
Modifié par parsimonhi (02 Feb 2022 - 22:33)

_laurent a écrit :
Salut,

On travaille surtout avec des outils comme grunt, gulp, npm, webpack etc ....

Et l'eau,

Pendant longtemps j'ai utilisé Grunt. Gulp ou Grunt, c'est la même chose. Quoiqu'on en dise, Gulp met autant de temps que Grunt. L'un des derniers projets que j'avais en responsabilité, c'était du Gulp. Le travail qui avait fait en amont, était très bien fait. Il faut savoir que ce projet est énorme (1 300 000 pages environs). La config du gulp.js était éclatée en plusieurs fichiers. C'était tellement bien fait que j'ai eu une autoroute pour faire évoluer cette config.

Jette un oeil sur Rollup Niveau SCSS/SASS, je n'ai pas vu de grandes différences. Par contre, en ce qui concerne l'ESNext, Webpack peut aller se rhabiller ! En ce moment, je suis de très près ES-build ==> ouch, vraiment pas mal !