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.
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.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éeAller à
admin/config/development/performance/advagg- Sélectionnez "Utiliser les paramètres recommandés (optimisés)"
AdvAgg Compress JavascriptInstallez 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 LoaderInstallez 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 BundlerInstallez AdvAgg Bundler s'il n'est pas activé et accédez à
admin/config/development/performance/advagg/bundlerParamètres HTTP / 2.0
Paramètres HTTP / 1.1 (par défaut)
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 RelocateInstallez 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 AdvAggInstallez 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 critiquesAccé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 lecritical-css/répertoire. Le répertoire suivant est basé sur l'utilisateur;anonymous/,,all/ouauthenticated/peut être utilisé.Le répertoire suivant peut être
urls/outype/. En regardanturls/; 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.xEn 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.cssemplacements de fichiers d'exemple valides pour la page "node / 1" current_path ():
sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.cssexemples d'emplacements de fichiers valides pour le type de nœud de "page":
sites/all/themes/bootstrap/critical-css/anonymous/type/page.cssSi 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
la source
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).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):
la source