Rendu-blocage CSS dans PageSpeed ​​- fichier unique

Question

Je suis en train de tester les meilleures pratiques d'optimisation pour front-end. J'ai donc appris à utiliser gulp et npm pour fusionner et réduire mes fichiers CSS et JS en single all.min.css et js.min.css

Dans Google PageSpeed ​​j'ai un avertissement "Éliminer le rendu JavaScript et CSS dans le haut -le contenu plié ". J'ai donc ajouté "async" à mon script js.

<script async src="/dist/js/all.min.js"></script> 

Fonctionne bien, mais quoi faire avec mon fichier .css?

<link rel="stylesheet" href="/dist/css/all.min.css"> 

Ceci est un fichier css unique sur mon site (33kb). Il inclut bootstrap, font-awesome, quelques petites librairies et mon style.css.

Il est recommandé d'inclure ce gros fichier dans une source html? Je fais quelque chose de mal? Je veux obtenir au moins une fois ce 100 points, mais pas en faisant quelque chose de stupide, pas pratique.

Answer 1

Vous avez simplement besoin de déplacer le fichier CSS au bas de votre page afin que le HTML se charge avant le CSS.

Be sont que cela peut causer un FOUC,

Un FOUC (FOUC, clignote également du texte non mis en forme ou FOUT) 1 [2] est une instance où une page Web apparaît brièvement avec les styles par défaut du navigateur avant de charger une feuille de style CSS externe, car le moteur du navigateur Web affiche la page avant que toutes les informations ne soient récupérées.

Source

Answer 2

Vous avez le

<link rel="stylesheet" href="/dist/css/all.min.css"> 

dans vos pages <header>. C'est une pratique courante. Pagespeed Insights vous demande de le supprimer et de le placer après votre contenu ("below-the-fold" => après le contenu visible à l'écran lors du chargement de la page sans défilement). par exemple le placer dans votre pied de page.

Answer 3

L'outil Google PageSpeed ​​propose des directives générales et non des mesures de vitesse réelles. Ainsi, vous ne devriez pas perdre de sommeil si vous n'obtenez pas 100 points parfaits.

Cela dit, la meilleure façon de livrer votre CSS sans « bloquer ci-dessus la fois le rendu »:

• Ajouter tous les styles qui sont nécessaires pour le contenu ci-dessus la fois que les styles en ligne dans la Tête HTML. Par exemple:

  <style> 
      #logo { 
       // ... 
      } 
      #navigation { 
       // ... 
      } 
      .hero-banner { 
       // 
      } 
  </style> 
  

• charge les styles restants (et concaténés minified en un seul fichier dans votre cas) de manière asynchrone, ce qui est généralement fait via javascript différé ou asynchrone avant la balise de corps de fermeture. Exemple:

  <script> 
      var deferstyles = document.createElement("link"); 
      deferstyles.rel = "stylesheet"; 
      deferstyles.href = "/dist/css/all.min.css"; 
      document.getElementsByTagName('head')[0].appendChild(deferstyles); 
  </script>