Comment j'ai obtenu un 99/100 sur Google Page Speed (pour le mobile)

TLDR: compressez et intégrez l'intégralité de votre script css entre vos balises <style></style> .

ça fait une semaine que je suis à la recherche de ce score insaisissable de 100/100. Comme vous, le dernier point restant était l'élimination de "renderblocking css for above the fold content."

il y a sûrement une solution facile?? Nope. J'ai essayé Solution de loadCSS du groupe de filaments. Trop. js à mon goût.

Qu'en est-il des attributs async pour css (comme js)? Ils n'existent pas.

j'étais prêt à abandonner. Puis il se leva sur moi. Si linking le script bloquait le rendu, et si j'intégrais à la place tout mon css dans la tête. De cette façon, il n'y avait rien à bloc.

il a semblé tout à fait erroné d'intégrer 1263 lignes de CSS dans mon tag de style. Mais je lui ai donné un tourbillon. Je l'ai compressé (et je l'ai préfixé) en utilisant d'abord:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Voir le mécanisme national de prévention postcss package .

maintenant c'était juste une longue ligne de css sans espace. J'ai copié le CSS dans les étiquettes <style>your;great-wall-of-china-long;css;here</style> sur ma page d'accueil. Puis j'ai refait une analyse avec Page speed insights.

je suis passé de 90/100 à 99/100 sur mobile!!!

Cela va à l'encontre de tout en moi (et probablement vous). Mais il a RÉSOLU le problème. Je l'utilise juste sur ma page d'accueil pour le moment et en incluant le CSS compressé par programmation via un include PHP.

YMMV (votre kilométrage peut varier) selon la longueur de votre css. Google peut vous ding pour trop au-dessus du contenu de pli. , Mais ne présumez pas; test!

Notes

1. ceci sur ma page d'accueil pour l'instant afin que les gens obtiennent un rendu rapide sur ma page la plus importante.

2. votre css ne sera pas mis en cache. je ne suis pas trop inquiet. La seconde où ils ont frappé une autre page sur mon site, le .css sera mise en cache (voir la Note 1).

quelques conseils qui peuvent aider:

• je suis tombé sur cet article dans l'optimisation CSS hier: CSS de profilage ... optimisation
  
  Beaucoup d'informations utiles sur CSS et ce CSS cause les drains les plus performants.

• j'ai vu la présentation suivante sur jQueryUK sur "hidden secrets" dans Google Chrome (Canary) Dev Tools: DevTools peut faire ce . Consultez les sections sur temps de peindre D'abord , repeints et CSS coûteux.

• aussi, si vous utilisez un chargeur comme require js vous pouvez jeter un oeil à l'un des plugins de chargeur CSS, appelé require-CSS , qui utilise CSSO - un optimiseur qui fait également l'optimisation structurelle, par exemple. fusionner des blocs avec des propriétés identiques. J'ai utilisé il quelques fois et il peut sauver beaucoup de CSS d'un cas à l'autre.

hors de question: Je seconde @Enzino dans la création d'un sprite pour toutes les petites icônes que vous chargez. Les tailles de fichier sont si petites qu'elles ne justifient pas vraiment un aller-retour du serveur pour chaque icône. Gardez également à l'esprit le nombre total de requêtes http simultanées que le navigateur peut faire. Demande pour un plus grand nombre de petits icônes sont des "rendez-blocage". Bien qu'une page vide comparer à la vôtre, j'aime comment duckduckgo charges par exemple.

s'il vous plaît jeter un oeil à la page suivante https://varvy.com/pagespeed/render-blocking-css.html . Cela m'a aidé à me débarrasser de "Render Blocking CSS" . J'ai utilisé le code suivant pour supprimer " Render Blocking CSS ". Maintenant, dans Google Page Speed insight Je ne reçois pas de problème lié au blocage de rendu css.

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

moi aussi j'ai lutté avec cette nouvelle métrique pagespeed.

bien que je n'ai trouvé aucun moyen pratique pour obtenir mon score de retour jusqu'à %100, Il ya quelques choses que j'ai trouvé utiles.

la combinaison de tous les css en un seul fichier a beaucoup aidé. Tous mes sites sont de retour à %95 - %98.

la seule autre chose à laquelle je pouvais penser était d'aligner toutes les css nécessaires (qui semble être la plupart - au moins pour mes pages) sur la première page pour obtenir le doux score élevé. Bien qu'il puisse aider votre score de vitesse cela rendra probablement votre chargement de page plus lent cependant.

envisagez d'utiliser un paquet pour générer automatiquement des styles inline à partir de vos fichiers css. Un bon est Grunt Critique ou CSS critique pour Laravel .