web-dev-qa-db-fra.com

Comment puis-je différer l'analyse de Javascript sur mon site Drupal 7?

Je travaille sur quelques problèmes de performances pour un site que j'ai lancé récemment. En regardant les informations de PageSpeed ​​de Google, je constate que la priorité élevée sur la liste est de différer l'analyse de Javascript. Voici un lien:

https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fwww.gastonia.com_2F&mobile=false&rule=DeferParsingJavaScript

Wow, plus de 1 Mo de Javascript à analyser !! Notez que la plupart d'entre eux proviennent de l'application facebook (peut-être que la réponse est de supprimer l'application fb, ha!)

Quelqu'un a-t-il réussi à différer cela dans Drupal? J'ai essayé d'utiliser le script defer = "defer", et Google donne des suggestions comme "ajouter des balises de script dans les commentaires et ensuite les évaluer (), mais ils ne donnent aucun exemple et j'ai du mal à trouver un bon tutoriel. Toutes les ressources ou directions sont appréciées !

Sur une note latérale, si vous voyez autre chose dans cette liste qui est facilement dépassable par drupal, veuillez ajouter un commentaire. Le site en question est http://www.gastonia.com au cas où vous voudriez regarder le code source.

5
blue928

Découvrez ces 2 projets:

  • LABjs

    Ce projet vise à soutenir les LABjs de Drupal. LABjs est un chargeur JavaScript, utilisé par Twitter, Vimeo, examinateur.com… qui charge (et exécute) tous les scripts en parallèle aussi rapidement que le permet le navigateur.

    Caractéristiques

    Une fois installé, ce module recherche automatiquement tous vos fichiers JavaScript et LABjsify. Cela fait que tout JavaScript est chargé en parallèle au maximum comme le prend en charge le navigateur. L'autre avantage est que le chargement du script ne bloque pas le rendu des pages.

  • HeadJS

    Le module Headjs utilise la bibliothèque head.js totalement géniale du même auteur de jQuery Tools pour améliorer considérablement les temps de chargement de javascript en ajoutant un seul script à la tête du document, puis en téléchargeant tous les autres fichiers de script en parallèle.

    Étant donné que le téléchargement de nombreux petits fichiers en même temps est plus rapide que le téléchargement d'un gros fichier, head.js accélère le chargement des pages et est particulièrement bénéfique pour les navigateurs mobiles qui limitent la taille des fichiers javascript mis en cache individuellement.

3
mikeytown2

Étant donné que presque tout en Javascript pour Drupal est déclenché par une $(document).ready() dans jQuery, je ne vois aucun avantage réel à utiliser defer. En fait , J'ai récemment eu un vrai mal de tête1 d'un code dont j'ai hérité qui mélangeait les deux.

Une recommandation (je pense que YSlow le suggère) que vous pouvez faire est de déplacer les scripts à la fin, juste avant la fermeture </body>. Cela signifierait déplacer le <?php print $scripts; ?> dans votre html.tpl.php. Tout en ne différant pas l'analyse, cela retarde le chargement afin que votre page s'affiche plus rapidement, et je n'ai jamais eu de problème en Drupal en faisant cela.

Si vous souhaitez ajouter le report, vous devez implémenter hook_js_alter :

function mymodule_js_alter (&$javascript)
{
  $javascript['misc/drupal.js']['defer'] = TRUE;
}

Si vous voulez différer tout , vous pouvez essayer

function mymodule_js_alter (&$javascript)
{
  foreach ($javascript as $key => $value) {
    $javascript[$key]['defer'] = TRUE;
  }
}

Sinon, la plupart des correctifs Pagespeed normaux n'ont pas grand-chose à voir avec Drupal lui-même. Tant que vous déployez avec JS et l'agrégation CSS activée, vous devriez être bon. Configurer Apache pour utiliser des réponses compressées et des durées de vie de cache décentes et je ne pense pas que PageSpeed ​​se plaindra de beaucoup et vous donnera tous les A et B.

4
mpdonadio

Gardez à l'esprit que la plupart de ces tiers, sinon tous, utilisent des CDN et auront souvent des en-têtes d'expiration très éloignés. Si vous regardez Firebug et assurez-vous que Désactiver le cache du navigateur est désactivé dans NET, vous verrez à quoi ressemblent la plupart des demandes. J'ai regardé mon site et il n'y a qu'environ 4 demandes même avec des widgets facebook et google sur la page. La bonne nouvelle est que tout le monde fait la même chose, si vous regardez certains sites, ils dépassent largement 1 Mo.

Il est recommandé de réduire le nombre de demandes effectuées par chaque page, mais si vous devez respecter certaines fonctionnalités pour répondre aux exigences, il est préférable d'utiliser des expirations très lointaines et de répartir les demandes sur des serveurs parallèles.

1
Michael E

Pour développer @mpdonadio, voici à quoi tout différer ressemblerait sous Drupal 8

/**
 * @file
 * Overrides insert.js in Insert module using hook_js_alter
 */
use Drupal\Core\Asset\AttachedAssetsInterface;

/**
 * Implements hook_js_alter().
 */
function override_insert_js_js_alter(&$javascript, \Drupal\Core\Asset\AttachedAssetsInterface $assets)
{
    foreach ($javascript as $key => $value) {
      $javascript[$key]['attributes']['defer'] = TRUE;
    }
}
0
Ray Foss