Dans le rapport PageSpeed Insights de mon site ( site ici ), il répertorie "Différer les CSS inutilisés" comme un opportunité. Je ne sais pas exactement ce que je dois faire pour résoudre ce problème. J'ai déjà veillé à ce que chaque fichier CSS de la liste soit chargé avec une balise , qui garantit que le fichier est chargé de manière asynchrone ( captures d'écran ). J'ai même utilisé loadCSS pour ce faire, par les instructions de Google . Pourquoi cela ne résout-il pas «Différer les CSS inutilisés?» On dirait que c'est exactement ce que j'ai fait.
Je suis raisonnablement sûr que les fichiers CSS sont chargés de manière asynchrone, car PageSpeed Insights ne les signale plus dans la section "Éliminer les ressources bloquant le rendu" (il l'a fait auparavant).
J'ai vu cette question précédente de Stack Overflow . Cette question n'a pas de réponse acceptée, et je pense que ma question est un peu différente. Dans cette question, OP demande comment résoudre «Différer les CSS inutilisés». Je demande spécifiquement pourquoi rel = preload ne résout pas «Différer les CSS inutilisés».
3 Réponses :
Tout d'abord, d'après mon expérience, les résultats varient et pour Mobile , cela peut prendre un certain temps avant que vos efforts ne soient remboursés. Desktop répondait rapidement à mon travail, mais il a fallu des jours avant que Différer les images hors écran "fonctionne" sur Mobile .
Pour votre page en particulier, je voudrais extraire le css critique pour le style ci-dessus et déplacer toutes les feuilles de style juste avant
Veuillez me faire savoir si je peux vous aider davantage. D'un simple coup d'œil sur le site, j'aime ce que vous faites!
Pour être clair, avec PageSpeed Insights, cette section «Différer les CSS inutilisés» apparaît à la fois sur mon rapport de bureau et mon rapport mobile. Puis-je demander pourquoi déplacer les feuilles de style avant aidera, surtout si elles sont déjà chargées de manière asynchrone? On dirait que ça n'a pas d'importance? Sauf si je ne comprends pas quelque chose. Merci pour les aimables paroles concernant mon site.
Pour résoudre ce problème, vous devrez supprimer complètement les règles CSS qui ne sont pas utilisées dans la page. Le chargement asynchrone des fichiers CSS n'aidera pas à résoudre ce problème
Par conséquent, il y a une ambiguïté dans la dénomination de cette recommandation, ce qui prête à confusion. Cela a été abordé dans le numéro - https://github.com/GoogleChrome/lighthouse/issues/ 6588
Je suis d'accord avec l'auteur du problème; Je vois aussi beaucoup de monde qui ont lu cette étiquette (depuis le lancement de Google Pagespeed Insights utilisant Lighthouse) car ils ont toujours un CSS bloquant le rendu, quand ils ne le font pas (puisque cet avertissement montre pour tout css, asynchrone ou non, que n'est pas utilisé sur la page). Cela empire parce que la page vers laquelle vous créez un lien pour plus d'informations parle plus sur le blocage de rendu et le CSS critique que de "supprimer les CSS inutilisés". Il utilise également "Différer" dans un le sens le plus typique (charger asynchrone, pas supprimer de la page).
Pour résoudre cette confusion, l'équipe Lighthouse a décidé de renommer cette recommandation en Supprimer les CSS inutilisés dans les prochaines versions (reportez-vous à https://github.com/GoogleChrome/lighthouse/pull/7235 )
Supprimer les styles qui ne sont pas utilisés dans la page ou dans "au-dessus du pli"?
@PeterSvegrup Cette recommandation concerne tous les styles inutilisés de la page et ne se limite pas aux CSS critiques, c'est-à-dire s'il y a du CSS "au-dessus du pli" intégré sur la page et qu'une partie n'est pas requise, alors cette recommandation inclura cela comme bien
@PrayagVerma OK, merci d'avoir signalé ce problème GitHub. Je vois que la demande d'extraction a déjà été fusionnée. Alors ai-je raison de dire que nous verrons le titre de cette «opportunité» changer la prochaine fois que Lighthouse sera mis à jour?
@ cag8f Actuellement le libellé de la version 4.2 ( github.com/GoogleChrome/lighthouse/labels/4.2) n'a pas été ajouté au PR fusionné. Par conséquent, nous devrons attendre de voir dans quelle version à venir ce changement est intégré
Le préchargement et le différé utilisent du javascript onload, alors ... utilisez-vous peut-être une balise noscript?
Pagespeed ressemble à une analyse de la balise et affiche le message que vous recevez.