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?

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) ...!

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).

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.

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>

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.

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

Envisagez d'utiliser un package pour générer automatiquement des styles en ligne à partir de vos fichiers css. Un bon css est Grunt Critical ou Critical pour Laravel .

Salut pour jQuery Vous ne pouvez utiliser que comme ça

Utilisez uniquement async et type = "text / javascript"