Temps de réponse et minimisation CSS et JS

Discussion dans 'Débuter en référencement' créé par saluts92, 30 Novembre 2018.

  1. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    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
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 845
    J'aime reçus:
    250
    On est en 2018 donc: Webpack, Parcel, Rollup, ...
     
  3. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    et doit on restester deriière ou pas ?
     
  4. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 238
    J'aime reçus:
    147
    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.
     
  5. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    c'est surtout pour le CSS que je recherche en fait
     
  6. rollback
    rollback WRInaute occasionnel
    Inscrit:
    5 Novembre 2018
    Messages:
    461
    J'aime reçus:
    49
    le CSS ça ne change pas. Un CDN - on bourre une version "statique" html / css 1912 sur le CDN.
    C'est super rapide
     
  7. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    rien compris
     
  8. colonies
    colonies WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    492
    J'aime reçus:
    56
    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/
     
  9. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    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
     
  10. colonies
    colonies WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    492
    J'aime reçus:
    56
    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.
     
  11. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    Ok merci : je vais tester CLEANCSS

    et existe t-il une solution pour Jquery ?
     
  12. colonies
    colonies WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    492
    J'aime reçus:
    56
    Pour Javascript : UglifyJS 3 https://github.com/mishoo/UglifyJS2
     
  13. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    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"
     
  14. colonies
    colonies WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    492
    J'aime reçus:
    56
    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/
    Donc tout ce qui est dans le block ...scripts à exécuter... peut utiliser jQuery.
     
    #14 colonies, 1 Décembre 2018
    Dernière édition: 1 Décembre 2018
  15. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    Ok, mais cela ne permet pas de placer des evenements alors (click, etc ...) ?
     
  16. colonies
    colonies WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    492
    J'aime reçus:
    56
    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">
     
  17. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    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) ?
     
  18. colonies
    colonies WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    492
    J'aime reçus:
    56
    J'utilise presque toujours defer, sauf cas exceptionnels.
     
  19. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    ok merci je teste

    sinon avec cleancss je ne gagne que 10ko sur mon css de 122Ko je pensais gagner plus
     
  20. NicolasH
    NicolasH WRInaute occasionnel
    Inscrit:
    4 Mai 2016
    Messages:
    310
    J'aime reçus:
    22
    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 ;-)
     
  21. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 845
    J'aime reçus:
    250
    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.
     
  22. colonies
    colonies WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    492
    J'aime reçus:
    56
    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.
     
  23. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 845
    J'aime reçus:
    250
    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 ?
     
Chargement...
Similar Threads - réponse minimisation CSS Forum Date
Temps de réponse serveur googlebot Développement d'un site Web ou d'une appli mobile 23 Mai 2018
SERP Google : 1 réponse, aucun lien vers des sites Référencement Google 14 Mars 2018
Temps de réponse serveur Débuter en référencement 21 Septembre 2017
Google PageSpeed Insight et Temps de Réponse Serveur Débuter en référencement 11 Septembre 2017
Réponses à 3 questions SEO par une énorme étude My Ranking Metrics Techniques avancées de référencement 20 Avril 2017
Problème de temps de réponse serveur entre 2 site hébergé sur le même serveur Administration d'un site Web 22 Mars 2017
Formulaire de contact, mettre expéditeur en reponse Demandes d'avis et de conseils sur vos sites 21 Octobre 2016
Question basique mais pas de réponse claire Débuter en référencement 26 Septembre 2016
Passer le nombre de résultat/réponse dans le title, bonne ou mauvaise idée ? Référencement Google 25 Août 2016
Brevet Google pour les réponses directes avec rich snippet Référencement Google 17 Mai 2016
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice