Éliminez le JavaScript et le 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":
Élimine le JavaScript et le CSS bloquant le rendu dans le dessus
contenu Votre page contient 6 ressources de script et 8 ressources CSS qui bloquent. 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 Drupal core, et 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 mikeytown2 réponse J'ai reçu le message suivant lors du test Pagespeed de Google:
É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 4 ressources CSS qui bloquent. 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.
Le README contient un guide sur la façon de procéder en utilisant la version actuelle 7.x-2.31 + d'AdvAgg . Voir aussi cette page wiki sur le groupe Haute performance . La plupart des sites peuvent atteindre 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.
Aller à admin/config/development/performance/advagg
- Sélectionnez "Utiliser les paramètres recommandés (optimisés)"
Installez AdvAgg Compress Javascript s'il n'est pas activé et accédez à admin/config/development/performance/advagg/js-compress
- Sélectionnez JSMin si disponible; sinon sélectionnez JSMin +
- Sélectionnez Tout supprimer (plus petits fichiers)
- Cliquez sur le lien de compression par lots pour traiter ces fichiers
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: X.X.X). 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."
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 de bundles 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.
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)"
Installez AdvAgg Modifier s'il n'est pas activé et accédez à admin/config/development/performance/advagg/mod
- Sélectionnez "Utiliser les paramètres recommandés (optimisés)"
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/. Regarder urls/; front est un cas particulier pour la première page, tous les autres chemins utilisent current_path () comme répertoire et nom de fichier avec .css ajouté à la fin; Voir https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x
Regarder type/ c'est un cas particulier pour les types de nœuds. Utilisez le nom de la machine et ajoutez .css jusqu'à 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 noeud "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 -critique-css-drupal-7-theme
Vous n'obtiendrez jamais de scores vraiment élevés avec les modules pré-intégrés drupal, la seule façon d'y parvenir est d'assister et d'analyser soigneusement chacune des suggestions faites par outil de vitesse google , adressant chacun de ceux-ci 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 un meilleur score 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îne 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 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] Externaliser la compression et la minification à un serveur de distribution où je peux utiliser imagemagic, yui-compresseur, pngoptim et plus de choses pour surmonter ces règles, sans transformer l'installation drupal en un gâchis ingérable) .