Utilisation de PageSpeed pour éliminer le code JavaScript bloquant le rendu pour jQuery
J'ai jQuery ajouté au bas de la page. Cependant, lorsque j'exécute mon site sur pagespeed insights (Mobile), le message d'erreur suivant s'affiche:
Éliminer le code JavaScript et CSS de blocage du rendu dans le contenu au-dessus du pli Votre page contient 2 ressources de script bloquantes et 1 ressource CSS Bloquantes.
Cela provoque un retard dans le rendu de votre page. Aucun contenu de Au-dessus du pli de votre page ne peut être rendu sans attendre Le chargement des ressources suivantes.
Essayez de différer ou de manière asynchrone De charger des ressources de blocage ou de placer en ligne les parties critiques de ces Ressources directement dans le code HTML.
Voir: http://learnyourbubble.com et https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Flearnyourbubble.com&tab=mobile
Cependant, le jQuery est ajouté au bas de la page. Donc, il devrait être en dessous du pli.
Comment puis-je supprimer cette erreur?
Cela a à voir avec vos fichiers de polices.
Regardez les demandes 19 et 20 dans la cascade. Ces fichiers de police sont considérés comme CSS.
Remarquez comment la première peinture (ligne verticale verte) ne se produit pas après le chargement des fichiers de police?
Remarquez ensuite que les 15 fichiers JS ont été chargés avant les fichiers de polices (CSS).
C'est ce que Google prend à propos.
Avoir 16 fichiers JS est excessif.
Essayez ceci: Désactivez JavaScript dans votre navigateur. Notez que le seul changement est dans l'en-tête du menu. Est-ce que 16 fichiers JS valent la peine? Je crois que non.
Cet article devrait expliquer en grande partie ce qui se passe: https://varvy.com/pagespeed/critical-render-path.html
En bref, le problème est que chrome devra charger votre jquery et votre fondation javascript pour donner le rendu initial de la page. C'est pourquoi son blocage. Ce n'est pas parce que le javascript vient après le html que celui-ci peut encore être affiché. Le rendu du DOM va toujours être bloqué pendant le chargement de la requête/fondation, car Chrome pense qu’il est essentiel à l’affichage correct de la page. Pagespeed s'en plaint particulièrement parce qu'ils sont volumineux. Pour résoudre ce problème, vous pouvez effectuer certaines opérations, dont certaines sont détaillées dans l'article ci-dessus, d'autres ici https://developers.google.com/speed/docs/insights/BlockingJS . La meilleure façon de dire à Chrome que ces scripts ne sont pas essentiels et peuvent être chargés "sous le pli" est de leur ajouter une balise defer ou async.
Avez-vous essayé de charger async
Rendre JavaScript asynchrone Par défaut, JavaScript bloque la construction de DOM Et retarde donc le premier rendu. Pour empêcher JavaScript de bloquer l’analyseur, nous vous recommandons d’utiliser l’attribut HTML async Sur les scripts externes. Par exemple:
<script async src="my.js">Voir Blocage du Parser et JavaScript asynchrone pour en savoir plus sur les scripts Asynchrones. Notez que l'exécution des scripts asynchrones n'est pas garantie dans Dans l'ordre spécifié et qu'ils ne doivent pas utiliser
document.write. Les scripts qui dépendent de l'ordre d'exécution ou qui doivent Accéder ou modifier le DOM ou le CSSOM de la page peuvent nécessiter une réécriture Pour prendre en compte ces contraintes.
Je vois une erreur lors de l’appel de fondation (), mais je suppose que vous l’avez supprimée pour l’exclure, mais il se peut que le même appel ait lieu avant le chargement. Essayez de toujours inclure votre code comme:
(function($) {
// DOM ready
})(jQuery);