Comment corriger une erreur javascript sur les pages AMP

SOS WP

Ouvrir l’index du contenu

Ce guide a été mis à jour le

Un des outils que vous pouvez utiliser pour identifier les erreurs qui affectent négativement la vitesse de chargement du site est Google PageSpeed Insights. Si vous ne l’avez jamais utilisé auparavant, il est vraiment temps d’y jeter un coup d’œil avant de continuer à lire le reste de l’article. L’outil fourni par Google, est gratuit et efficace pour identifier les erreurs qui ralentissent le chargement de votre site comme le fameux JavaScript de blocage de rendu et CSS.

Que sont les erreurs JavaScript et CSS bloquant le rendu ?

Chaque site WordPress utilise des thèmes et des plugins qui ajoutent inévitablement JavaScript et CSS à l’interface utilisateur. Ces fichiers en JavaScript et CSS augmentent souvent le nombre de fichiers temps de chargement de votre site et peut également provoquer des erreurs de rendu.

Les navigateurs doivent charger les scripts (JavaScript et CSS) avant le reste du code HTML de la page ; par conséquent, les utilisateurs ayant une connexion lente peuvent avoir de longs temps de chargement. Celles-ci, ainsi que les erreurs d’affichage, entraînent souvent la perte d’utilisateurs.

Qu’est-ce que Google PageSpeed ?

PageSpeed Insights mesure la performance des pages pour les appareils mobiles et stationnaires. Comme Google l’a également expliqué, cet outil récupère deux fois l’URL, vous pouvez donc tester l’user-agent pour les appareils mobiles et de bureau.

Les pages sont évaluées sur une échelle de 0 à 100 points, là où les scores les plus élevés sont les meilleurs. Un score d’au moins 85 indique un bon rendement de la page.

Lorsque vous testez une page sur PageSpeed Insights, vous mesurez comment ses performances peuvent être améliorées par rapport à :

  • temps de chargement du contenu au-dessus du pliC’est le temps qui s’écoule entre le moment où l’utilisateur demande une nouvelle page et celui où le contenu du pli est affiché par le navigateur.
  • temps de chargement pleine pageIndique l’intervalle de temps entre le moment où la page est demandée et le chargement complet du contenu.

Un des facteurs qui affecte la vitesse d’un site pour le visiteur est la connexion réseau. Ce facteur varie considérablement. Pour cette raison, l’outil de Google ne prend pas seulement en compte les aspects de la performance des pages qui dépendent du réseau. PageSpeed Insights prend également en compte la configuration du serveur, la structure des pages HTML et l’utilisation de ressources externes telles que les fichiers JavaScript, les codes CSS et les images.

La performance de la page comprend une composante absolue, qui dépend de la connexion de l’utilisateur, et une composante relative. Si vous mettez en œuvre les suggestions contenues dans le rapport PageSpeed Insights, vous devriez être en mesure d’améliorer les performances relatives de la page.

Chacun des conseils énumérés par Google a un indicateur de priorité qui identifie leur importance :

PageSpeed Insights est constamment amélioré et, récemment, Google s’est efforcé d’améliorer l’analyse des performances des pages mobiles, conformément à leur popularité croissante et à l’importance accrue accordée à celles-ci par le moteur de recherche.

Google PageSpeed Score 100 mission, est-ce que ça vaut le coup ?

Google PageSpeed Insights fournit des directives, à vous de décider si vous voulez les suivre ou non.

La vitesse de chargement est très importante mais ce n’est qu’une des métriques que Google utilise pour le classement de votre site. La vitesse est considérée comme importante surtout parce qu’elle influence directement l'”expérience d’utilisation”.

Votre site peut également fournir un contenu pertinent, utilisable et à jour, mais s’il faut plusieurs minutes pour le charger, les utilisateurs iront probablement ailleurs.

Votre but est de créer un site rapide qui offre un excellent contenu.et donc trouver un équilibre entre les recommandations de Google et l’expérience de l’utilisateur.

Correction d’erreurs CSS et javascript sur AMP avec Autoptimize

Probablement la façon la plus simple de résoudre les erreurs JavaScript et CSS bloquant le rendu est d’installer et d’activer le plugin Auto-optimiser.

Avec plus de 400 000 installations actives et 4,7 étoiles sur 5, c’est sans aucun doute l’un des plugins les plus populaires pour régler la vitesse de chargement dans WordPress.

Je vous invite à lire le notre guide sur ce que sont les plugins WordPress et comment les installer, si vous ne l’avez pas encore fait.

Revenons maintenant en arrière et parlons d’Autoptimize. Le plugin est conçu pour être simple à utiliser, et est bien développé et suivi.

Une fois le plugin activé, visitez la page Réglages ” Auto-optimiser pour les procédures de configuration.

Comment corriger une erreur javascript sur les pages AMP

Commencez par cocher la case à côté des options JavaScript et des options CSS, puis cliquez sur le bouton ” “.enregistrer les modifications”.

Vous pouvez maintenant tester votre site à l’aide de l’outil PageSpeed de Google. Si des erreurs sont encore signalées JavaScript et CSS bloquant le rendu vous devez vous familiariser avec les options avancées. Retour à la page Réglages ” Auto-optimiseret cliquez sur Afficher les paramètres avancés“en haut de la fenêtre.

Comment corriger une erreur javascript sur les pages AMP

Avec ces options, vous pouvez autoriser le plugin à inclure “inline JS” et supprimer les scripts qui sont exclus par défaut comme seal.js ou jquery.js.

Cochez la case près de ” “.CSS en ligne”. Cliquez sur le bouton ” “.Enregistrer les modifications et vider le cache“pour sauvegarder les modifications et vider le cache.

Lorsque vous êtes prêt, testez à nouveau le site avec PageSpeed Insights.

Assurez-vous que votre site est testé à fond et que toutes les erreurs ont été résolues.

Pour plus d’informations sur le plugin Auto-optimiservous pouvez consulter la FAQ sur la page :

https://wordpress.org/plugins/autoptimize/

Comment corriger une erreur javascript sur AMP avec Async Javascript

Javascript asynchrone est beaucoup moins populaire qu’Autoptimize (20 000+ vs 400 000+) mais partage la note très élevée de 4,7 étoiles sur 5. Ce plugin est spécialisé dans la résolution des erreurs JavaScript (il n’affectera pas les CSS).

Très simple d’utilisation, comme d’habitude il doit être installé et activé.

Aller à l’option Javascript asynchrone ajouté au menu Admin. Ajouter une coche sur ” “.Activer JavaScript Asynchrone”. Sélectionnez le bouton de raccourci et choisissez ” “.Méthode différée et méthode Async”. Sauvegardez les modifications et testez à nouveau votre site.

Si le site a des problèmes, essayez de changer la méthode utilisée, par exemple : Reporter au lieu d’Async.

Utilisation d’Async JS et d’Autoptimize en tandem

Lorsque vous travaillez avec Async, il est évident dans le menu que vous pouvez utiliser en tandem avec Autoptimize. Si l’auto-optimisation est déjà activée, vous pouvez activer une nouvelle coche dans le menu d’options Javascript asynchrone “Activer l’auto-optimisation du support”. Activez la prise en charge de l’auto-optimisation et testez à nouveau votre site.

Comment corriger une erreur javascript sur les pages AMP

Conclusion

Selon la façon dont les thèmes et plugins de votre site utilisent Javascript et CSS, il peut ne pas être facile de corriger toutes les erreurs de blocage de rendu JavaScript et CSS signalées par Google PageSpeed Insights dans les pages AMP.

Généralement, Async JS et Autoptimize utilisés en tandem donnent les meilleurs résultats, au moins en ce qui concerne les plugins libres.

Les plugins suggérés peuvent sans doute être utiles mais beaucoup dépend des caractéristiques du site en question, de sorte qu’avant de procéder aux tests et corrections, il faut toujours créer un fichier sauvegarde intégrale et armez-vous de patience !

Avez-vous déjà créé des pages AMP et eu des problèmes avec des erreurs javascript ? Comment avez-vous procédé pour le résoudre ? Avez-vous déjà pensé à utiliser PageSpeed Insights pour évaluer la vitesse de votre site WordPress ?

Pour continuer votre lecture voici quelques articles similaires

Pas encore de commentaire, ajoutez le votre ci-dessous!


Ajouter un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *