Temps de réponse et minimisation CSS et JS

saluts92 · 30 Novembre 2018

Bonjour,
Pour gagner encore en temps de réponse je souhaite minimiser mon CSS et mes JS
Il existe plusieurs outils pour cela sur la place.

Mais, après le Minify, est -il utile de retester tout le site ?
en effet certains disent que oui, mais cela représenterait un travail énorme à chaque modification (même petite)

Ou peut on faire confiance à 100% à ces outils ?

Si oui lequel serait le meilleur à ce niveau ?

d'avance merci

spout · 30 Novembre 2018

On est en 2018 donc: Webpack, Parcel, Rollup, ...

saluts92 · 30 Novembre 2018

et doit on restester deriière ou pas ?

rick38 · 30 Novembre 2018

J'en avais utilisé un en ligne qui "abîmait" le js déjà minimisé (je fournissais un js qui incluait aussi des parties déjà minimisées, et résultat ça ne marchait plus), donc oui faire attention à celui que l'on prend.

saluts92 · 30 Novembre 2018

c'est surtout pour le CSS que je recherche en fait

rollback · 30 Novembre 2018

le CSS ça ne change pas. Un CDN - on bourre une version "statique" html / css 1912 sur le CDN.
C'est super rapide

saluts92 · 30 Novembre 2018

rollback a dit:
le CSS ça ne change pas. Un CDN - on bourre une version "statique" html / css 1912 sur le CDN

rien compris

colonies · 1 Décembre 2018

saluts92 a dit:
c'est surtout pour le CSS que je recherche en fait

Personnellement, j'utilise cleancss depuis quelques années. Je n'ai eu aucun problème avec et il est efficace. J'y suis passé car mon ancien minifier (YUICompresor) cassait les expressions calc() qui nécessite qu'on conserve les espaces.

Les autres pistes pour accélérer les CSS :
- utiliser la compression Brotli si ton site est en HTTP2
- précompresser les CSS et utiliser des taux de compression max : Brotli à fond (alors que c'est trop lent pour le faire à la volée), et Zopfli pour les vieux navigateurs. cf https://css-tricks.com/brotli-static-compression/

saluts92 · 1 Décembre 2018

merci colonies (et les autres), mais j'en conclue qu'il faut systématiquement retester le site entier derrière un minify
c'est vraiment trop lourd

colonies · 1 Décembre 2018

Bah non, justement. Celui que j'indique fonctionne parfaitement bien.
Si YUICompressor a eu des problèmes, c'est parce qu'il n'était plus mis à jour depuis des années et que calc() est arrivé après.
Du reste je viens d'aller voir, et apparemment il a eu une petite mise à jour, justement pour le problème avec calc(). Sinon, lui aussi ne m'a pas posé de problème pendant des années.

Ne pas minifier alors que ta css est lourde, c'est quand même un gros problème puisque les css sont des ressources bloquantes.

saluts92 · 1 Décembre 2018

Ok merci : je vais tester CLEANCSS

et existe t-il une solution pour Jquery ?

colonies · 1 Décembre 2018

saluts92 a dit:
Ok merci : je vais tester CLEANCSS

et existe t-il une solution pour Jquery ?

Pour Javascript : UglifyJS 3 https://github.com/mishoo/UglifyJS2

saluts92 · 1 Décembre 2018

mon fichier jquery est déjà minimiser
mai il y a t-il un moyen de faire qqe chose quand google dit ".../jquery.min.js bloque l'affichage"

colonies · 1 Décembre 2018

saluts92 a dit:
mon fichier jquery est déjà minimiser
mai il y a t-il un moyen de faire qqe chose quand google dit ".../jquery.min.js bloque l'affichage"

Mettre tes scripts en fin de page (ou ajouter l'attribut defer à tes scripts) si c'est possible.
Et sinon, retravailler tes pages pour que tous les scripts soient exécutés après le DOMContentLoaded (le .ready() de jQuery... qu'il faut éviter, du coup).

Ex :
<html>
<head>
<script src="/jquery.js"></script>
<script>
$(document).ready(... scripts à exécuter ...);
</script>
</head>
<body>
...
</body>
</html>

Peut être transformé en :
<html>
<head>
<script src="/jquery.js" defer></script>
<script>
// attention : incompatible IE8, si ça compte encore pour toi
document.addEventListener("DOMContentLoaded", function(event) {
... scripts à exécuter ...
});
</script>
</head>
<body>
...
</body>
</html>

La dernière technique permet généralement un minimum de changements : pas de code à déplacer, donc on évite d'avoir du code qui change de fichier (du header ou footer, par exemple).
Il ne faut plus utiliser $(document).ready(), puisque jQuery ne sera disponible que plus tard, mais juste avant le DOMContentLoaded, cf https://hacks.mozilla.org/2017/09/b...-speculative-parsing-async-defer-and-preload/

defer was introduced before async. Its execution starts after parsing is completely finished, but before the DOMContentLoaded event.

Donc tout ce qui est dans le block ...scripts à exécuter... peut utiliser jQuery.

saluts92 · 1 Décembre 2018

Ok, mais cela ne permet pas de placer des evenements alors (click, etc ...) ?

colonies · 1 Décembre 2018

saluts92 a dit:
Ok, mais cela ne permet pas de placer des evenements alors (click, etc ...) ?

Pas d'évènements inline, non.
Exemple :

<script src="/jquery.js"></script>
<a href="..." onclick="$(...)">

Si l'utilisateur clique avant que jQuery soit chargé, ça plantera.

Mais si tu installes tes handlers proprement, rien ne change :

<script src="/jquery.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
$('#monLien').click(...)
});
</script>
<a href="..." id="monLien">

saluts92 · 1 Décembre 2018

ok merci, je vais tester

j'ai pourtant fait beaucoup de forum à ce sujet et je n'avais pas encore trouvé cette solution

de plus j'ai testé bcp de site et aucun de fait de defer sur Jquery : je me disais qu'il devait y avoir une raison

tu as implémenté cette solution sur ton (tes) site(s) ?

colonies · 1 Décembre 2018

saluts92 a dit:
tu as implémenté cette solution sur ton (tes) site(s) ?

J'utilise presque toujours defer, sauf cas exceptionnels.

saluts92 · 1 Décembre 2018

ok merci je teste

sinon avec cleancss je ne gagne que 10ko sur mon css de 122Ko je pensais gagner plus

NicolasH · 3 Décembre 2018

Ce type d'outils enlèves les espaces, les retours chariots (minify). Ce n'est pas du gzip donc 10ko / 122Ko c'est déjà bien ;-)

spout · 4 Décembre 2018

Avec un module bundler comme ceux que j'ai cité, tout est module, url(...), @import, etc... ça provoque une erreur à la "compilation" si un élément n'est pas trouvé, donc certainement mieux testé.

De plus ce n'est plus en mettant bootstrap.min.css dans /public/css/ que l'on développe maintenant (*).
On installe Bootstrap avec :

Code:

npm install --save bootstrap

Compilation :

Code:

npm run webpack

(lancé éventuellement via un "File watcher" dans PhpStorm)

Ça permet aussi de générer les sprites automatiquement, d'utiliser du SASS, de supprimer le CSS non utilisé, etc...

(*) Excepté pour les dézippeurs de WP.

colonies · 4 Décembre 2018

Certaines personnes (dont je fais partie) n'utilisent pas les modules, pas plus que bootstrap.
Pour le site dont il est question dans ce sujet, ça serait ajouter de la complexité superflue.

spout · 4 Décembre 2018

Bootstrap n'était qu'un exemple (vu sa popularité), c'est valable aussi pour jQuery dont tu as fait référence.
Et je n'ai pas vu où il a spécifié le site en question ?