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

153

J'utilise Google PageSpeed ​​insights pour essayer d'améliorer les performances de mon site et, jusqu'à présent, cela s'est avéré extrêmement efficace. Des choses comme le report de scripts fonctionnaient à merveille, puisque j'avais déjà une version interne de jQuery .ready()pour différer les scripts jusqu'à ce que la page soit complètement chargée, tout ce que j'avais à faire était d'intégrer cette fonction particulière et de déplacer les scripts complets à la fin de la page. Cela a très bien fonctionné.

Mais maintenant, je me surprends à regarder le point jaune restant sur la liste de contrôle: "Éliminer les CSS bloquant le rendu dans le contenu au-dessus du pli".

La façon dont mon CSS est configuré consiste à avoir un _.cssfichier global contenant des styles qui s'appliquent à la structure de page en général, ou sont utilisés à plus d'un ou deux endroits sur le site. La plupart des pages ont alors un fichier CSS associé (par exemple, party.phpa party.css) contenant des styles spécifiques à cette page particulière. Tous les fichiers CSS sont mis en cache indéfiniment, lorsque j'ajoute /t=FILEMTIMEaux noms de fichiers (et les supprime plus tard avec .htaccess) afin de garantir que les fichiers sont mis à jour lorsqu'ils sont modifiés.

Donc, de toute façon, Google recommande d'intégrer les styles critiques nécessaires pour le contenu au-dessus de la ligne de flottaison. Le problème est ... eh bien, jetez un œil à cette capture d'écran: http://prntscr.com/1qt49e

Comme vous pouvez le voir ... TOUT le contenu est au-dessus du pli! Les gens détestent le défilement, en particulier sur un jeu qui implique le chargement de nombreuses pages. J'ai donc conçu le site pour qu'il tienne sur un seul écran (en supposant une résolution suffisamment bonne). Cela signifie donc ... TOUS les 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?

Niet the Dark Absol
la source
c'est ironique que le contenu au-dessus de la ligne de la capture d'écran prenne du temps à se charger :) En fait, pour moi, la capture d'écran n'a finalement jamais été chargée
Anupam
@Anupam a probablement été supprimé. Est pas exactement Alt Gr + imp destiné à la permanence, et je ne me attendais pas que cette question est tout à fait si populaire.
Niet the Dark Absol
oui, tout va bien, était juste un commentaire léger
Anupam

Réponses:

182

Une question connexe a déjà été posée: qu'est-ce que le «contenu au-dessus de la ligne de flottaison» dans Google Pagespeed?

Tout d'abord, vous devez remarquer qu'il s'agit de « pages mobiles ».
Donc, lorsque j'ai interprété correctement votre question et votre capture d'écran, ce n'est pas pour votre site!

Au contraire, faire certaines des choses recommandées par Google dans ses directives rendra les choses pires que meilleures pour les sites Web «normaux».
Et tout ce qui vient de Google n'est pas le «Saint Graal» simplement parce qu'il vient de Google. Et ils ne sont pas eux-mêmes un bon modèle si vous regardez leur balisage 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 mettre en page les éléments et n'ait 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 volume de données. Et après la première demande, le fichier CSS est de toute façon mis en cache.

Les choses dont il faut toujours s'occuper sont:

  • réduire au maximum le nombre de demandes
  • gardez le poids global de votre page aussi bas que possible

Et ne vous demandez pas comment obtenir 100% de l'outil PageSpeed ​​Insights de Google ...! ;-)

Ajout 1: Voici la page sur laquelle Google nous montre, ce qu'ils recommandent pour Optimiser la livraison CSS .

Comme dit précédemment, je ne pense pas que ce soit ni réaliste ni logique pour un site "normal"! Parce que principalement lorsque vous avez une conception Web réactive, il est plus certain que vous utilisez des requêtes multimédias et d'autres styles de mise en page. Donc, si vous ne chargez pas votre CSS en premier et de manière bloquante, vous obtiendrez un FOUT ( Flash Of Unstyled Text ). Je ne crois vraiment pas que ce soit "mieux" qu'au moins quelques millisecondes de plus pour rendre la page!

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

Netsurfer
la source
9
Très bonne réponse. le problème est que google semble vous pénaliser si vous avez une page plus lente. Par conséquent, ils vous obligent à adhérer à leurs idées, qu'elles soient grandes ou complètement stupides. :(
Steve Horvath
10
@Netsurfer tout ce qui vient de Google n'est pas le "Saint Graal" LOL. Je me grattais la tête pour atteindre 100, mais je me suis arrêté à 92 après avoir lu ce commentaire.
kiranking
44
Vous devriez insister davantage sur le fait que Google n'adhère pas à ses propres suggestions .
M. Smith
2
Les demandes supplémentaires deviendront moins un problème avec HTTP / 2 et SPDY, de Wikipédia , "Des améliorations de performances supplémentaires dans la première version de HTTP / 2 (qui était une copie de SPDY) proviennent du multiplexage des demandes et des réponses pour éviter la tête- problème de blocage de ligne dans HTTP 1 (même lorsque le pipelining HTTP est utilisé), compression d'en-tête et hiérarchisation des requêtes. "
RationalDev aime GoFundMonica le
3
essayé d'obtenir ma page à partir de 72 mobiles et 80 de bureau, mais j'ai eu le même problème. Je refuse de placer mon css quelque part plus bas et peut-être dégrade l'expérience utilisateur en affichant FOUT!
publicknowledge
14

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 <style></style>balises.


Je suis à la recherche de ce score insaisissable de 100/100 depuis environ une semaine maintenant. Comme vous, le dernier élément restant consistait à éliminer les "css bloquant le rendu au-dessus du contenu du pli".

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

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

J'étais prêt à abandonner. Puis il m'est apparu. Si la liaison du script bloquait le rendu, que se passerait-il si j'intégrais à la place tout mon css dans la tête. De cette façon, il n'y avait rien à bloquer.

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

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Consultez le package NPM postcss .

Maintenant, c'était juste une LONGUE ligne de CSS sans espace. J'ai mis le CSS dans les <style>your;great-wall-of-china-long;css;here</style>balises sur ma page d'accueil. Ensuite, j'ai réanalysé avec des informations sur la vitesse des pages.

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

Cela va à l'encontre de tout en moi (et probablement de vous). Mais cela a résolu le problème. Je l'utilise simplement sur ma page d'accueil pour le moment et j'inclus le CSS compressé par programmation via un include PHP.

YMMV (votre kilométrage peut varier) en fonction de la durée de votre css. Google peut vous donner trop de contenu au-dessus du pli. Mais ne présumez pas; tester!

Remarques

  1. Je ne fais cela que sur ma page d'accueil pour le moment 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 cependant. La seconde où ils ont frappé une autre page sur mon site, le .css sera mis en cache (voir Note 1).

coude
la source
4
Merci pour votre dévouement et vos recherches, mais personnellement je ne rêverai pas de faire ça: D
Niet the Dark Absol
2
Alors à quoi ça sert, si ce n'est d'essayer d'atteindre un score qui n'aidera vraiment rien?
LarryBud
Bien que vous ayez obtenu votre score plus élevé, mais maintenant chaque page de votre site aura plus de poids. Pourtant, bonne trouvaille.
EdwardM
@EdwardM Merci! Voir ma note 2 dans le post. Une fois qu'ils ont atteint une deuxième page, le css est mis en cache et le problème de poids disparaît.
elbowlobstercowstand
1
@LarryBud Le point du score le plus élevé? Plus d'argent pour moi. Plus mon site Web est haut dans Google, plus quelqu'un est susceptible de cliquer dessus et de devenir client. Comme Google utilise la vitesse de la page pour déterminer le classement , j'ai décidé d'améliorer mon score.
elbowlobstercowstand
9

Quelques conseils qui peuvent aider:

  • Je suis tombé sur cet article sur l'optimisation CSS hier: le profilage CSS pour ... l'optimisation
    Beaucoup d'informations utiles sur CSS et ce que CSS cause le plus de pertes de performances.

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

  • De plus, si vous utilisez un chargeur tel que requireJS, vous pouvez jeter un œil à l'un des plugins de chargeur CSS, appelé require-CSS , qui utilise CSSO - un optimzer qui fait également une optimisation structurelle, par exemple. fusion de blocs avec des propriétés identiques. Je l'ai utilisé plusieurs fois et cela peut économiser beaucoup de CSS au cas par cas.

Hors de la question: je seconde @Enzino dans la création d'un sprite pour toutes les petites icônes que vous chargez. La taille des fichiers est si petite qu'elle ne justifie 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. Ainsi, les demandes pour un plus grand nombre de petites icônes sont également un "blocage du rendu". Bien qu'une page vide soit comparable à la vôtre, j'aime la façon dont le duckduckgo se charge par exemple.

fréquent
la source
Semble que Duckduckgo ne se soucie pas non plus de leur score de page, vérifiez ici
Chetabahana
6

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 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>
Amuk Saxena
la source
1
Lorsque j'utilise la fonction mentionnée, cela réduit le score pageSpeed. La fonction que j'ai écrite est: jsfiddle.net/kvfzbxxo Pouvez-vous m'aider?
arsho
J'ai implémenté cette même fonction sur l'url suivante et s'il vous plaît jeter un oeil sur la vitesse ici " whitecashback.in " vous pouvez regarder l'url source et trouver la fonction "loadCSS" au pied de page. Cela vous aidera à comprendre comment j'ai implémenté le code. La vitesse de la page devrait augmenter au fur et à mesure que le CSS se charge après la page.
Amuk Saxena
J'ai utilisé ce code: jsfiddle.net/sbpa1hun. Maintenant, le CSS n'est pas chargé dans le site Web.
arsho
J'ai mentionné qu'après avoir ajouté ce code: jsfiddle.net/sbpa1hun qui est utilisé dans votre site Web, mon site Web a perdu tous les styles. Cela augmente la vitesse de la page mais le CSS ne fonctionne plus! Pouvez-vous m'aider comment? J'obtiens environ 40 en vitesse de page. Mais en ajoutant votre code, j'obtiens environ 70. Mais je n'ai pas pu faire fonctionner le CSS.
arsho
1
Si vous essayez de faire cela dans jsfiddle, cela ne fonctionnera pas, veuillez essayer ce code dans votre site Web, jsfiddle bloquera le chargement de css pour les sites Web externes. Parce que vous chargez des css de sources externes à l'aide de javascript. Essayez donc de le faire sur votre site Web. Essayez également d'inclure des fichiers jquery, ils manquent dans votre script. Après avoir inclus les fichiers js, cela peut fonctionner. Veuillez également noter que les sites https peuvent fonctionner avec jsfiddle. Vous obtenez cette erreur: "Chargement de contenu actif mixte bloqué". Vous devez d'abord résoudre ce problème.
Amuk Saxena
4

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

Bien que je n'ai trouvé aucun moyen pratique de ramener mon score à 100%, il y a quelques choses que j'ai trouvées utiles.

La combinaison de tous les css en un seul fichier a beaucoup aidé. Tous mes sites sont sauvegardé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 meilleur score. Bien que cela puisse aider votre score de vitesse, cela ralentira probablement le chargement de votre page.

Glipt
la source
2
Le magazine Smashing a obtenu un score de 100% dans le test de vitesse de pages developer.google.com/speed/pagespeed/insights/...
lun
1

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

Vous n'avez besoin d'aucune solution javascript hacky ou de styles en ligne. Cependant, vous avez besoin d'un serveur prenant en charge HTTP 2.0 (toute version de serveur moderne le fera), qui lui-même nécessite que votre serveur exécute SSL. Cependant, avec Let's Encrypt, il n'y a aucune raison de ne pas utiliser SSL de toute façon.

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

La raison de ces erreurs est que le navigateur obtient le code HTML, puis doit attendre que le CSS soit téléchargé avant que la page puisse être rendue. 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 ensemble d'en-tête, 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 l'ajuster pour que le CSS ne soit envoyé qu'à la première requête, mais l'en-tête Link est la solution la plus complète et la moins piratée pour "Eliminer le blocage de rendu Javascript et CSS"

Pour une discussion détaillée, jetez un œil à mon article ici: Eliminate Render Blocking CSS using HTTP / 2 Push

Tom B
la source
Je peux me tromper, mais Server Push ne provoquerait-il pas l'envoi du CSS à chaque fois que vous chargez la page, plutôt qu'une seule fois avant sa mise en cache?
Niet the Dark Absol
Oui, il existe quelques techniques telles que les cookies qui peuvent aider à éviter cela. Jetez un œil à la section sur le push sélectif ici: nginx.com/blog/nginx-1-13-9-http2-server-push
Tom B
-1

Salut pour jQuery Vous ne pouvez utiliser que comme ça

Utilisez uniquement async et type = "text / javascript"

Rajeev
la source