JavaScript et CSS : un problème compliqué
JavaScript et CSS sont un moyen fantastique de rendre votre site beau et vivant. Mais cela peut aussi considérablement ralentir le temps de chargement de votre site si vous ne le gérez pas correctement.
Il existe différentes manières de gérer les scripts inutilisés et bloquant le rendu : décharger, asynchrone, différer.
Déchargement de JavaScript et CSS
Parfois, des plugins ou des thèmes chargeront un tas de fichiers JavaScript et CSS qui ne sont pas réellement utilisés sur la page que vous visitez. Dans ce cas, le déchargement de ces fichiers contribuera à accélérer le temps de chargement de votre page.
Si vous souhaitez décharger du JavaScript ou du CSS inutilisé, le Nettoyage des actifs Le plugin est une excellente façon de procéder. Il vous permet soit de décharger des fichiers sur des pages spécifiques, soit d'effectuer des déchargements à l'échelle du site.
Par exemple : Contact Form 7 charge les fichiers CSS et JavaScript sur chaque page, même si un formulaire ne se trouve pas réellement sur cette page. À l'aide du plugin Asset Cleanup, vous pouvez demander à votre site Web de charger uniquement les fichiers Contact Form 7 sur les pages où se trouve un formulaire de contact. actually utilisé.
L'image ici montre à quoi ressemble le tableau de bord du plugin Asset CleanUp dans le gestionnaire CSS/JS. Ici, vous pouvez choisir les scripts que vous souhaitez décharger.
Si vous ne savez pas lesquels doivent être déchargés, déchargez-les un par un et vérifiez l'avant pour vous assurer qu'il n'y a rien de cassé. Si vous utilisez l'encaissement sur votre site Web, assurez-vous d'effacer votre argent à chaque fois que vous vérifiez si le déchargement d'un script a cassé quelque chose.
Certains scripts seront un peu plus évidents que d'autres. Si vous utilisez des éléments WooCommerce sur votre page d'accueil, vous ne devriez probablement pas en décharger. Au fil du temps, vous serez en mesure d'identifier les scripts inutilisés beaucoup plus rapidement et vous n'aurez pas à les tester un par un.
Async & Defer (Pas pour les débutants)
Si vous ne pouvez pas décharger complètement un fichier JavaScript ou CSS, mais que le rendu bloque, vous pouvez l'asynchroniser ou le différer en ajoutant simplement la balise async ou defer dans le script. Ceci est couramment utilisé dans les discussions intégrées. Voir l'exemple ci-dessous :
<script type=”text/javascript” id=”hs-script-loader” async src="/hubspot.embed.link">
Async
Télécharge votre JavaScript pendant l'analyse du document HTML, mais attend que le document HTML ait fini de l'exécuter.
Reporter
Attend que le document HTML ait été analysé avant de télécharger et d'exécuter du JavaScript externe. Les navigateurs plus anciens peuvent ne pas prendre en charge le report.