Comment corriger le rendu de blocage JavaScript et CSS dans WordPress

Voulez – vous supprimer JavaScript et CSS qui bloquent le rendu dans WordPress? Si vous essayez votre site sur Google page speed Insights, vous pouvez voir des conseils pour supprimer les scripts et CSS qui bloquent l’affichage. Cependant, il ne donne aucun détail sur la façon de le mettre en œuvre sur le site WordPress. Dans cet article, nous vous montrerons comment corriger facilement le blocage de JavaScript et CSS affichés dans wordpress pour augmenter votre score Google pagesspeed. Qu’est – ce que JavaScript et CSS qui bloquent le rendu? Le JavaScript et le CSS qui bloquent le rendu sont des fichiers qui empêchent un site Web de voir une page Web avant de télécharger ces fichiers.
Chaque site WordPress dispose d’un thème et d’un plugin pour ajouter des fichiers JavaScript et CSS à l’avant du site. Ces scripts peuvent augmenter le temps de chargement des pages du site et empêcher le rendu des pages. Le navigateur de l’utilisateur doit charger ces scripts et CSS avant de télécharger le reste du html sur la page. Cela signifie que les utilisateurs qui se connectent plus lentement doivent attendre encore quelques millisecondes pour voir la page. Ces scripts et feuilles de style sont appelés JavaScript et CSS qui bloquent le rendu. Les propriétaires de sites Web qui veulent 100 points Google pagesspeed doivent résoudre ce problème pour obtenir un score complet.
Quel est le score de page speed de Google? Google page speed Insights est un outil de test de vitesse Web créé par Google pour aider les propriétaires de sites Web à optimiser et à tester leurs sites Web. L’outil vérifie votre site Web selon le Guide de vitesse de Google et fournit des conseils pour réduire le temps de chargement des pages du site. Il affiche les scores en fonction du nombre de règles dépassées par le site. La plupart des sites Web sont visités entre 50 et 70 ans. T
Plug – in de fusée WP. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer le plugin wordpress.
WP Rocket peut fonctionner immédiatement et activer la mise en cache avec les meilleurs paramètres pour votre site Web. Vous trouverez plus d’informations sur la façon d’installer et de configurer correctement WP Rocket dans WordPress dans notre guide complet. Par défaut, il n’active pas les options d’optimisation JavaScript et CSS. Ces optimisations peuvent affecter l’apparence du site ou certaines fonctionnalités, c’est pourquoi le plug – in vous permet d’activer ces paramètres de façon sélective. Pour ce faire, vous devez accéder à la page de configuration WP Rocket et aller à l’onglet optimisation de fichier. À partir de là, faites défiler vers la section fichiers CSS et sélectionnez les cases à côté pour minimiser CSS, fusionner les fichiers CSS et optimiser les options de livraison CSS.
Remarque: WP Rocket tentera de réduire au minimum tous les fichiers CSS, de les fusionner et de charger uniquement les CSS requis pour la partie visible du site. Cela peut affecter l’apparence du site, de sorte que vous devez tester le site à fond sur plusieurs appareils et tailles d’écran. Ensuite, vous devez défiler vers la section fichiers JavaScript. À partir de là, vous pouvez contrôler toutes les options pour maximiser les performances. Vous pouvez minimiser et combiner les fichiers JavaScript comme vous le feriez avec CSS. Vous pouvez également empêcher WordPress de télécharger des fichiers de migration jquery. WordPress charge le script pour assurer la compatibilité des plug – ins et des thèmes qui utilisent les anciennes versions de jquery.
La plupart des sites n’ont pas besoin de ce fichier, mais vous devriez quand même vérifier votre site pour vous assurer que la suppression n’affecte pas le sujet ou le plug – in. Ensuite, faites défiler un peu plus vers le bas et sélectionnez les cases à côté des options charger le javascript retardé et le mode de sécurité de jquery. Ces options sont retardées
Ne pas charger les modes de sécurité JavaScript et jquery inutiles vous permet de charger jquery pour les sujets qui pourraient l’utiliser en ligne. Si vous êtes sûr que votre sujet n’utilise pas jquery en ligne nulle part, vous pouvez décocher cette option.
N’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour stocker les paramètres. Plus tard, vous voudrez peut – être également effacer le cache WP Rocket avant de tester à nouveau votre site Web en utilisant Google page speed Insights. Sur notre site de test, nous avons pu obtenir des scores de 100% sur le Bureau, et les scores sur le mobile et sur le Bureau ont résolu le problème des blocs de rendu. 2. Utilisez autooptimize pour réparer les scripts de bloc de rendu et css pour cette méthode, nous utiliserons un plug – in séparé spécialement créé pour améliorer la livraison des fichiers CSS et JS de votre site Web. Bien que ce plug – in puisse faire le travail, il n’a pas d’autres fonctionnalités puissantes de WP Rocket.
La première chose que vous devez faire est d’installer et d’activer le plug – in d’optimisation automatique. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer le plugin wordpress. Une fois activé, vous devez accéder à la page paramètres auto – tuning pour configurer les paramètres du plug – in. Tout d’abord, vous devez sélectionner la case à côté de l’option optimiser le code JavaScript dans le bloc options JavaScript. Assurez – vous que l’option Aggregate JS file n’est pas sélectionnée. Ensuite, faites défiler vers le bas dans la boîte d’options CSS et sélectionnez l’option optimiser le code CSS. Assurez – vous que l’option Aggregate CSS file n’est pas sélectionnée. Vous pouvez maintenant cliquer sur le bouton Enregistrer les modifications et effacer le cache pour stocker les paramètres. Continuez à tester votre site Web à l’aide de l’outil aperçu de la vitesse de la page. Sur notre site de démonstration, nous avons pu résoudre le problème du blocage du rendu avec ce paramètre
Peut être rendu dans WordPress. Vous voudrez peut – être aussi voir notre guide faisant autorité sur la façon d’améliorer les performances de WordPress débutant et notre comparaison des meilleures sociétés d’hébergement WordPress gérées. Si vous aimez cet article, abonnez – vous à notre tutoriel vidéo WordPress sur YouTube Channel. Vous pouvez aussi nous trouver sur Twitter et Facebook.