web-dev-qa-db-fra.com

"Éliminer les CSS bloquant le rendu dans le contenu au-dessus du pli"

J'utilise Google PageSpeed ​​Insights pour améliorer les performances de mon site. Jusqu'à présent, les résultats ont été extrêmement probants. Le fait de différer des scripts a fonctionné à merveille, car j'avais déjà une version interne de .ready() de jQuery pour différer les scripts jusqu'à ce que la page soit entièrement chargée. . Cela a très bien fonctionné.

Mais maintenant, je me retrouve face au dernier point jaune de la liste de contrôle: "Éliminer les CSS bloquant le rendu dans le contenu au-dessus du pli".

Mon CSS est configuré pour avoir un fichier global _.css contenant les styles qui s'appliquent à la structure de la page en général ou qui sont utilisés à plus d'un ou deux endroits sur le site. La plupart des pages ont ensuite un fichier CSS associé (par exemple, party.php a party.css) contenant des styles spécifiques à cette page. Tous les fichiers CSS sont mis en cache indéfiniment, lorsque j’ajoute /t=FILEMTIME aux noms de fichiers (puis les supprime avec .htaccess) afin de garantir que les fichiers sont mis à jour lorsqu’ils sont modifiés.

Quoi qu’il en soit, Google recommande d’inclure les styles critiques nécessaires au contenu au-dessus du pli. Le problème, c’est… eh bien, jetez un coup d’œil à cette capture d’écran: http://prntscr.com/1qt49e

Comme vous pouvez le voir ... TOUT du contenu est au-dessus du pli! Les gens détestent le défilement, en particulier sur un jeu qui nécessite le chargement de nombreuses pages. J'ai donc conçu le site de manière à ce qu'il tienne sur un seul écran (en supposant une résolution suffisante). Cela signifie donc que TOUS des styles s'appliquent au contenu au-dessus du pli! Alors ... y a-t-il une solution? Ou suis-je coincé avec cette marque jaune sur un score par ailleurs presque parfait?

csspagespeed
151
Niet the Dark Absol

Une question connexe a déjà été posée: Qu'est-ce qu'un «contenu au-dessus du pli» dans Google Pagespeed?

Tout d'abord, vous devez remarquer qu'il s'agit de 'pages mobiles'.
Donc, quand j'ai bien interprété votre question et votre capture d'écran, c'est pas pour votre site!

Au contraire, si les consignes données par Google dans ses directives sont optimales, la situation sera pire que meilleure pour les sites Web «normaux».
Et tout ce qui vient de Google n'est pas le "Saint Graal" juste parce qu'il vient de Google. Et ils ne sont pas eux-mêmes un bon modèle si vous regardez leur balise HTML.

Le meilleur conseil que je puisse vous donner est: 

  • Définissez la largeur et la hauteur des éléments remplacés dans votre CSS, afin que le navigateur puisse les mettre en forme et ne pas attendre le contenu remplacé!

De plus, pourquoi utilisez-vous différents fichiers CSS plutôt qu'un seul?
La demande supplémentaire est pire que la petite quantité de données. Et après la première demande, le fichier CSS est quand même mis en cache.

Les choses dont on devrait toujours s'occuper sont: 

  • réduire autant que possible le nombre de demandes
  • garder le poids de votre page le plus bas possible

Et ne vous laissez pas déconcerter par la façon d'obtenir 100% de l'outil PageSpeed ​​Insights de Google ...! ;-)

Addition 1: Voici la page sur laquelle Google nous indique ce qu’ils recommandent pour Optimize CSS Delivery .

Comme je l'ai déjà dit, je ne pense pas que cela ne soit ni réaliste ni cohérent pour un site Web "normal"! Parce que principalement lorsque vous avez un responsive web design, il est plus que certain que vous utilisez des requêtes multimédia et d'autres styles de présentation. Donc, si vous ne chargez pas votre CSS en premier et de manière bloquante, vous obtiendrez un FOUT (Flash de texte non style). Je ne crois vraiment pas que ce soit "mieux" qu'au moins quelques millisecondes supplémentaires pour rendre la page!

Imho Google commence un nouveau "battage publicitaire" (quand je regarde toutes les questions à ce sujet ici sur Stackoverflow) ...!

178
Netsurfer

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

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

Je poursuis ce score insaisissable de 100/100 depuis environ une semaine maintenant. Comme vous, le dernier élément restant était l'élimination des "CSS bloquant l'affichage au-dessus du contenu du pli".

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

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

J'étais prêt à abandonner. Ensuite, j'ai compris. Si liant le script bloquait le rendu, si je intégrais plutôt l'ensemble de mes css dans la tête. De cette façon, il n'y avait rien à bloquer. 

Cela semblait absolument FAUX d'intégrer 1263 lignes de CSS dans ma balise de style. Mais j'ai fait un tourbillon. Je l'ai compressé (et préfixé) d'abord en utilisant:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ _ { Voir le paquetage NPM postcss } _.

À présent, ce n’était plus qu'une longue ligne de fichiers CSS sans espace. J'ai placé les CSS dans les balises <style>your;great-wall-of-china-long;css;here</style> sur ma page d'accueil. Ensuite, j'ai ré-analysé avec des informations de vitesse de page. 

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

Cela va à l’encontre de tout en moi (et probablement de vous). Mais cela résout le problème. Je ne fais que l'utiliser sur ma page d'accueil pour le moment et inclure le fichier CSS compressé par programmation via un inclus PHP. 

YMMV (votre kilométrage peut varier) en attente de la longueur de votre css. Google peut vous attirer pour trop au-dessus du contenu du pli. Mais n'assume pas; tester!

Remarques

  1. Je ne fais cela que sur ma page d'accueil pour le moment, afin que les gens puissent obtenir un rendu FAST sur ma page la plus importante.

  2. Votre css ne sera pas mis en cache. Je ne suis cependant pas trop inquiet. À la seconde où ils ont atteint une autre page de mon site, le fichier .css sera mis en cache (voir la remarque 1).

13
elbowlobstercowstand

Quelques astuces qui peuvent aider:

  • Je suis tombé sur cet article hier dans l'optimisation CSS: Profilage CSS pour ... optimisation
    Beaucoup d’informations utiles sur le CSS et sur ce que le CSS provoque dans la plupart des drains de performances.

  • J'ai vu la présentation suivante sur jQueryUK sur les "secrets cachés" dans Googe Chrome (Canary) Outils de développement: DevTools peut faire cela . Consultez les sections sur Time to First Paint , repeint et CSS coûteux.

  • De même, si vous utilisez un chargeur tel que requireJS , vous pouvez jeter un oeil à l’un des plugins de chargeur CSS, appelé require-CSS , qui utilise CSSO - un optimiseur qui fait l'optimisation structurelle, par exemple. fusion de blocs avec des propriétés identiques. Je l'ai utilisé plusieurs fois et cela peut économiser pas mal de CSS au cas par cas.

Hors question: J'appuie @Enzino pour créer un Sprite pour toutes les petites icônes que vous chargez. La taille des fichiers est si petite qu’elle ne justifie pas réellement une tournée du serveur pour chaque icône. Gardez également à l'esprit le nombre total de demandes HTTP simultanées que le navigateur peut effectuer. Ainsi, les requêtes pour un plus grand nombre de petites icônes bloquent également le rendu. Bien qu'une page vide se compare à la votre, j'aime bien comment duckduckgo charge par exemple.

8
frequent

Veuillez consulter 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 afin de supprimer "Render Blocking CSS". Maintenant, dans Google Google Insight sur la vitesse, je ne reçois pas de problème lié au rendu CSS bloquant.

<!-- 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>
6
Amuk Saxena

J'ai moi aussi eu du mal avec cette nouvelle métrique de vitesse de page.

Bien que je n’aie trouvé aucun moyen pratique de récupérer mon score jusqu’à 100%, il ya quelques points que j’ai trouvés utiles.

La combinaison de tous les css dans un seul fichier a beaucoup aidé. Tous mes sites sont remontés à% 95 -% 98.

La seule autre chose à laquelle je pouvais penser était d'intégrer tous les CSS nécessaires (ce qui semble être l'essentiel - du moins pour mes pages) sur la première page pour obtenir le score élevé. Bien que cela puisse aider votre score de vitesse, cela ralentira probablement le chargement de votre page.

3
Glipt

La solution optimale pour cela en 2019 est HTTP/2 Server Push .

Vous n'avez pas besoin de solutions javascript ou de styles en ligne hacky. Cependant, vous avez besoin d'un serveur prenant en charge HTTP 2.0 (quelle que soit la version de serveur moderne), ce qui oblige votre serveur à exécuter SSL. Cependant, avec Let's Encrypt, il n’ya aucune raison de ne pas utiliser SSL de toute façon.

Mon site https://r.je/ a un score de 100/100 pour les ordinateurs de bureau et mobiles.

La raison de ces erreurs est que le navigateur obtient le code HTML, puis doit attendre le téléchargement du fichier CSS pour que la page puisse être affichée. En utilisant HTTP2, vous pouvez envoyer le HTML et le CSS en même temps.

Vous pouvez utiliser HTTP/2 Push en définissant l'en-tête Link.

Exemple Apache (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

Pour NGINX, vous pouvez ajouter l'en-tête à votre balise d'emplacement dans la configuration du serveur:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

Avec cet en-tête défini, le navigateur reçoit le HTML et le CSS en même temps, ce qui empêche le CSS de bloquer le rendu.

Vous voudrez le modifier pour que le CSS ne soit envoyé que sur la première demande, mais l'en-tête Link est la solution la plus complète et la moins compliquée pour "Éliminer le rendu bloquant Javascript et CSS"

Pour une discussion détaillée, jetez un coup d’œil à mon article ici: Éliminer le rendu du blocage des CSS à l’aide de HTTP/2 Push

1
Tom B

Pensez à utiliser un package pour générer automatiquement des styles inline à partir de vos fichiers CSS. Un bon est Grunt Critical ou css critique pour Laravel .

0
tsveti_iko