À l'aide de PageSpeed pour éliminer rendu de blocage de JavaScript (jQuery
J'ai jQuery ajouté au bas de la page. Cependant, lorsque je lance mon site sur pagespeed insights (Mobile), j'obtiens l'erreur:
Éliminer rendu de blocage de JavaScript et CSS, au-dessus du pli du contenu
Votre page a 2 script de blocage de ressources et de 1 blocage CSS
les ressources.Cela provoque un retard dans le rendu de votre page. Aucun des
au-dessus du pli du contenu sur votre page pourrait être rendu sans attendre
pour les ressources suivantes pour charger.Essayer de reporter ou de manière asynchrone
la charge de blocage de ressources, ou en ligne, la critique des parties de ceux
les ressources directement dans le 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?
- cochez cette source https://kinsta.com/blog/eliminate-render-blocking-javascript-css/#settings_saved
Vous devez vous connecter pour publier un commentaire.
Qu'il a à faire avec vos fichiers de police.
Look à la demande, les 19 et 20 dans la cascade. Ces fichiers de police sont considérés comme des CSS.
Avis, comment les premières de la peinture (la ligne verticale verte) ne se produit pas jusqu'à ce que après les fichiers de police sont chargés?
Alors avis le 15 JS fichiers ont été chargés prrior à la police (CSS) des fichiers.
C'est ce que Google est sur.
Avoir 16 fichiers JS est au-delà excessive.
Essayez ceci: Désactiver le JavaScript dans votre Navigateur. Avis le seul changement, c'est dans le menu d'en-tête. Est 16 fichiers JS valent pas? Je ne pense pas.
Cet article doit expliquer beaucoup de ce qui se passe: https://varvy.com/pagespeed/critical-render-path.html
En courte mais le problème est que chrome va avoir besoin de charger votre jquery et votre fondation javascript pour donner à l'initiale de rendu de la page. C'est pourquoi son blocage. Tout simplement parce que le javascript vient après le html, ne signifie pas que le code html peut être encore affichée. Le rendu de la DOM est toujours en cours à bloc alors que le jquery/fondation est en train d'être chargé, car chrome pense qu'ils sont vitaux pour la page affichée correctement. Pagespeed se plaint sur ceux-ci en particulier parce qu'ils sont grands. Pour pallier ce problème, il ya quelques choses que vous pouvez faire, certains d'entre eux détaillée dans l'article ci-dessus, certains d'entre eux ici https://developers.google.com/speed/docs/insights/BlockingJS. La façon la plus facile de dire à google chrome que ces scripts ne sont pas indispensable et peut être chargé "en dessous du pli" est à ajouter une
defer
ouasync
balise pour eux.jquery.min.js
,foundation.min-b3d0e64456.js
etstyle-3cc919a01d.css
. Je comprends pourquoi il se plaint de lastyle.css
, mais je ne comprends pas pourquoi il se plaint de l'autre deux fichiers js, comme la fin de la page. J'ai ajouté un pagespeed lien à la question. Souvenez-vous de son "Mobile" de l'onglet, je suis à la recherche d'.Avez-vous essayé de chargement asynchrone
Je vois une erreur lors de l'appel de la fondation (), mais je vais supposer que vous avez supprimé à la règle, mais il se pourrait que cette même appel qui se passe avant de charger. Essayez de toujours joindre votre code comme:
S'il vous plaît essayer à reporter tag c'est de travailler pour moi.