Éliminez JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison

Je construis un site Drupal 7. Voici quelques-uns des modules que j'utilise: Adaptivetheme (thème), Vues et panneaux de contenu, Panneaux, Mini panneaux, Panneaux partout, Gestionnaire de pages, Superfish pour les menus, Addthis, Chosen (liste déroulante).

Pour améliorer les performances de mon site et le traitement des fichiers CSS et JS, j'utilise le module Advagg .

Lors de l'exécution du test Pagespeed de Google, j'obtiens l'erreur suivante en tant que "À corriger":

Éliminez le JavaScript et le CSS bloquant le rendu dans le
contenu au-dessus de la ligne de flottaison Votre page contient 6 ressources de script et 8 ressources CSS bloquantes. Cela entraîne un retard dans le rendu de votre page.
Aucun contenu au-dessus de la ligne de flottaison de votre page n'a pu être affiché sans attendre le chargement des ressources suivantes. Essayez de différer ou de charger de manière asynchrone les ressources de blocage, ou insérez les parties critiques de ces ressources directement dans le code HTML.

Voici les informations fournies par Google:

Existe-t-il un moyen de modifier les paramètres du module Advagg ou du noyau Drupal et de résoudre ce problème?

Existe-t-il un autre moyen d'atteindre cet objectif?

Mise à jour - après avoir implémenté les changements selon la réponse de mikeytown2, j'ai reçu le message suivant sur le test Pagespeed de Google:

Éliminez JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison
Votre page contient 6 ressources de script et 4 ressources CSS bloquantes. Cela entraîne un retard dans le rendu de votre page.
Aucun contenu au-dessus de la ligne de flottaison de votre page n'a pu être affiché sans attendre le chargement des ressources suivantes. Essayez de différer ou de charger de manière asynchrone les ressources de blocage, ou insérez les parties critiques de ces ressources directement dans le code HTML.

7 theming javascript performance

— EB84
source

Je ne suis pas sûr de l'advagg, mais pour le noyau, c'est interdit, il n'y a pas de paramètres comme celui-ci. Pour advagg, je n'ai pas pu les voir, mais j'ai quand même arrêté de l'utiliser très rapidement. Il existe peut-être des paramètres comme celui-ci maintenant. Personnellement, je publierais une demande d'assistance dans leur file d'attente de problèmes, je poserais des questions à ce sujet et si le responsable disait qu'ils n'étaient pas disponibles, je changerais en demande de fonctionnalité.

— Mołot

Votre question est trop large. Votre site utilise CSS et JS - tout comme tous les autres sites sur Internet. Tant que l'ordre en cascade de CSS est maintenu, il n'y a pas de raison que vous ne puissiez pas agréger tous vos CSS en 1 fichier. Tant que votre JS est encapsulé, il n'y a aucune raison qu'il ne puisse pas être fusionné en 1 fichier (comme exemple extrême). Si vous pouvez fournir des détails sur les fichiers / ressources CSS et JS requis par la page; vous pourrez peut-être obtenir des réponses plus éclairées.

— tenken

@tenken en quoi est-il trop large? Il a CSS et JS liés d'une manière bloquant le rendu et il les veut d'une manière non bloquante. Ces façons sont assez bien expliquées ( par Google, par exemple, car OP fait référence aux recommandations de Google Pagespeed). Votre commentaire n'a rien à voir avec le problème posé par OP.

— Mołot

tous les fichiers css et js liés se bloquent sauf si leur code en ligne ou leur utilisation asyncn'est pas pris en charge par les anciens navigateurs. Par exemple, l'agrégation Drupal par défaut comprend des <link>balises pour tous vos CSS. Si votre site CSS ou JS est trop complexe, vous aurez toujours ce problème. Si vous créez correctement votre site, vous pouvez agréger les fichiers en toute sécurité. En l'absence d'informations sur les dépendances de fichiers, les détails de la question sont trop larges - un module ne peut jamais résoudre son problème; il s'agit de la façon dont le CSS et le JS sont écrits et de son ordre d'inclusion et de sa complexité. il n'a jamais dit qu'il voulait ne pas bloquer, vous supposez que c'est ce qu'il veut.

— tenken

@tenken J'ai mis à jour ma question et donné plus d'informations sur les modules - j'espère que cela vous aidera à comprendre quels CSS et JS j'utilise.

— EB84

Réponses:

Le fichier README contient un guide sur la façon de procéder à l'aide de la version actuelle 7.x-2.31 + d'AdvAgg . Voir aussi cette page wiki sur le groupe Haute performance . La plupart des sites peuvent obtenir un score parfait de 100/100 sur https://developers.google.com/speed/pagespeed/insights/ . Instructions sur la façon de le réaliser pour une nouvelle installation d'AdvAgg ci-dessous.

Assurez-vous de vérifier le site après chaque section pour vous assurer que le changement n'a pas gâché votre site. Les modifications apportées au modificateur AdvAgg sont généralement les plus problématiques, mais elles offrent les améliorations les plus importantes.

Agrégation CSS / JS avancée

Aller à admin/config/development/performance/advagg

Sélectionnez "Utiliser les paramètres recommandés (optimisés)"

AdvAgg Compress Javascript

Installez AdvAgg Compress Javascript s'il n'est pas activé et allez à admin/config/development/performance/advagg/js-compress

Sélectionnez JSMin si disponible; sinon sélectionnez JSMin +
Sélectionnez Tout supprimer (les plus petits fichiers)
Cliquez sur le lien de compression par lots pour traiter ces fichiers

AdvAgg Async Font Loader

Installez AdvAgg Async Font Loader s'il n'est pas activé et accédez à admin/config/development/performance/advagg/font

Sélectionnez Fichier local inclus dans l'agrégat (version: XXX). Si cette option n'est pas disponible, suivez les instructions ci-dessous les options sur la façon de l'installer.
Cochez "Utiliser localStorage pour que le flash de texte non stylisé (FOUT) ne se produise qu'une seule fois."
Cochez "Définir un cookie pour que le flash de texte sans style (FOUT) ne se produise qu'une seule fois."

AdvAgg Bundler

Installez AdvAgg Bundler s'il n'est pas activé et accédez à admin/config/development/performance/advagg/bundler

Paramètres HTTP / 2.0

Sous "Nombre cible d'ensembles CSS par page", sélectionnez 25
Sous "Nombre cible d'ensembles JS par page", sélectionnez 25
Sous "Logique de regroupement", sélectionnez "Taille du fichier"

Paramètres HTTP / 1.1 (par défaut)

Sous "Nombre cible d'ensembles CSS par page", sélectionnez 2
Sous "Nombre cible d'ensembles JS par page", sélectionnez 5
Sous "Logique de regroupement", sélectionnez "Taille du fichier"

25 bundles vs 2 et 5 ont à voir avec la mise en cache du navigateur. Plus de fichiers équivaut à une meilleure chance pour le navigateur d'avoir ce combo dans son cache, mais plus de fichiers signifie que plus de connexions sont établies et ouvertes dans HTTP 1.1. Utilisez 2 pour CSS car ce numéro n'attend pas de nouvelles connexions; JS est 5 car la plupart des navigateurs ont une limite de connexions simultanées de 6. Ce nombre de bundles a été choisi après de nombreux tests. Dans HTTP 2.0, il y a une connexion de streaming et la pénalité pour plusieurs fichiers CSS et JS est presque inexistante; l'optimisation du cache du navigateur est donc le meilleur choix; ainsi 25 devrait être utilisé pour CSS et JS lors du service HTTP / 2.0.

AdvAgg Relocate

Installez AdvAgg Relocate s'il n'est pas activé et accédez à admin/config/development/performance/advagg/relocate

Sélectionnez "Utiliser les paramètres recommandés (optimisés)"

Modificateur AdvAgg

Installez AdvAgg Modifier s'il n'est pas activé et allez à admin/config/development/performance/advagg/mod

Sélectionnez "Utiliser les paramètres recommandés (optimisés)"

Génération de fichiers CSS critiques

Accédez à https://www.sitelocity.com/critical-path-css-generator et entrez autant de pages de destination que nécessaire pour les css critiques; le top 10 est généralement un bon début. Si vous avez Google Analytics, cela vous montrera comment trouver vos principales pages de destination https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages ou pour Piwik https: //piwik.org/faq/how-to/faq_160/ . Si vous ne savez pas par quelle page commencer, faites la page d'accueil de votre site. Vous pouvez également l'utiliser pour générer des css https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=en

Les exemples de noms de fichiers et de chemins ci-dessous concernent le thème "bootstrap"; ils commencent tous par sites/all/themes/bootstrap/critical-css/; dans votre thème, créez le critical-css/répertoire. Le répertoire suivant est basé sur l'utilisateur; anonymous/,, all/ou authenticated/peut être utilisé.

Le répertoire suivant peut être urls/ou type/. En regardant urls/; front est un cas spécial pour la première page, tous les autres chemins utilisent current_path () comme répertoire et nom de fichier avec .cssajouté à la fin; Voir https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x

En regardant type/cela, c'est un cas particulier pour les types de nœuds. Utilisez le nom de la machine et ajoutez .cssà la fin. Tout nœud de ce type verra alors ce fichier css critique appliqué et intégré. Voici quelques exemples montrant comment cela fonctionne.

emplacements de fichiers d'exemple valides pour la page "avant": sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

emplacements de fichiers d'exemple valides pour la page "node / 1" current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

exemples d'emplacements de fichiers valides pour le type de nœud de "page": sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Si vous voulez une sorte de moyen automatisé pour générer ces fichiers css, fourkitchens a un excellent article sur la façon de le configurer: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-theme

— mikeytown2
source

Ceci est un excellent aperçu de la façon d'utiliser AdvAgg! Merci. Peut-être que ce texte pourrait être le début d'une page "documentation" liée à la page de votre projet :)

— tenken

Je l'ai déjà fait :) drupal.org/node/2189523#comment-8594829

— mikeytown2

@ mikeytown2 merci pour la bonne réponse. J'ai implémenté tous les changements et mis à jour la question. J'ai obtenu un score un peu plus élevé - merci!

— EB84

En regardant la sortie, il apparaît que vous n'avez pas coché toutes les cases sous Optimiser le classement JavaScript sur la advagg/modpage ET / OU vous n'avez pas déplacé Tout le JS vers le pied de page. Aussi, si je pouvais voir les pages source complète qui aident généralement avec des recommandations (juste un lien vers votre site).

— mikeytown2

Merci d'avoir fourni cette information. Si vous voulez moins de fichiers css sur la page, allez dans advagg / bundler et changez la valeur css de 4 à 1. Cela vous donnera un meilleur score mais gardez à l'esprit les commentaires que j'ai faits ci-dessus à ce sujet. On dirait que le thème adaptatif utilise drupal_add_html_head () pour ajouter dans le navigateur js conditionnel, je devrai vérifier que c'est ce qui se passe; signifie que plus d'un thème a besoin de drupal.org/node/2217451 . J'ai également créé ce problème pour corriger le blocage du rendu css drupal.org/node/2223267

— mikeytown2

Vous n'obtiendrez jamais de scores vraiment élevés avec des modules Drupal prédéfinis, la seule façon d'y parvenir est d'assister et d'analyser soigneusement chacune des suggestions faites par l' outil de vitesse google , en traitant chacune d'elles indépendamment.

Certaines choses que j'ai faites pour atteindre 95 dans un site d'actualités très actif , qui au moment où j'ai écrit ceci, ont obtenu de meilleurs résultats que nytimes (maintenant ce n'est pas le cas):

[scripts de blocage] Retardez l'exécution de scripts tiers tels que sharethis, widgets facebook, google plus, etc., pour ne s'exécuter qu'après le rendu complet de la page. Cela a nécessité quelques remplacements de chaînes simples sur la sortie de html.tpl.php pour intercepter ces scripts et les mettre en file d'attente pour une exécution ultérieure.
[scripts de blocage] Stockez la variable $ scripts de html.tpl.php (avec json_encode) dans une variable javascript pour les mettre en file d'attente pour une exécution après le premier chargement de page. Ce n'est pas naturel, mais nécessaire. Certains problèmes spécifiques au navigateur ont dû être résolus.
[blocking css] Implémentation de quelque chose de similaire à la technique de Keith Clark , mais avec rel = "prefetch". Cela introduit la nécessité de résoudre le FOUC .
[Minification et compression] Externalisez la compression et la minification à un serveur de distribution où je peux utiliser imagemagic, yui-compresseur, pngoptim et plus pour surmonter ces règles, sans transformer l'installation de drupal en un gâchis ingérable.

— jacmkno
source