Comment supprimer JavaScript et CSS qui bloquent le rendu sur WordPress

Comment supprimer JavaScript et CSS qui bloquent le rendu sur WordPress

Avoir un site Web qui se charge rapidement est crucial si vous voulez vous classer haut sur les résultats des moteurs de recherche (SERPs) pages.C’est pourquoi PageSpeed Insights de Google est là pour vous aider à optimiser la vitesse de chargement de votre site.Si vous obtenez l’outil « Éliminer le rendu bloquant JavaScript et CSS au-dessus de la ligne de flottaison » lors de l’utilisation de l’outil, ne vous inquiétez pas.Dans cet article, nous allons vous montrer comment résoudre le problème.

Savoir " Supprimer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus du pli " Avertissement

Si vous suivez les règles de vitesse de page de Google, l'élimination de JavaScript et CSS qui bloquent le rendu est l'une d'entre elles.Toute erreur à cet égard se traduira par une vitesse de charge de page plus lente.Mais comment JavaScript et CSS sur votre page HTML peuvent-ils ralentir votre site ?

Eh bien, chaque fois que vous installez un nouveau thème ou plugin, ils ajoutent javascript et code CSS à l’extrémité avant.Par conséquent, les navigateurs peuvent prendre plus de temps à charger la page.

Above-the-fold (ATF) est la partie de votre page Web qui est visible la première fois que la page se charge.N’importe quelle partie de la page que vous devez faire défiler vers le bas pour atteindre n’est pas ATF.

Par conséquent, si le code JavaScript et CSS non pertinent apparaît lorsque les visiteurs chargent votre site Web, vous pouvez recevoir une alerte pour réduire le nombre de JavaScript et CSS qui bloquent le rendu dans les ressources de contenu au-dessus du pli.

En savoir plus sur JavaScript et CSS bloquant le rendu à l’aide de Google Page Speed Insights

La première étape pour corriger le gel du rendu consiste à tester la vitesse de votre site à l’aide de Google PageSpeed Insights.Suivez ces étapes pour ce faire :

  1. Visitez la page et collez l'URL de votre site Web dans le champ « Entrez une URL de page Web ».
  2. Cliquez sur Analyser pour obtenir le rapport.

    La plupart des sites ont un score compris entre 50 et 70; cela devrait servir de référence pour votre score.Google énumére également des conseils pour améliorer les performances de votre site Web.

    Marquer des informations sur la vitesse de la page Google de votre site Web

Si vous trouvez également la suggestion de supprimer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus du pli, vous devrez résoudre le problème.
supprime javascript et css qui bloquent le rendu dans l’avertissement de contenu de pli ci-dessusGardez à l’esprit que vous ne devriez pas forcer votre site web à obtenir un score parfait de 100. Il suffit de faire de votre mieux pour obtenir un bon score sans sacrifier l’expérience utilisateur.

S’il y a des scripts sur votre site WordPress qui sont essentiels pour un UX robuste, vous ne devriez pas les supprimer juste pour obtenir un score légèrement plus élevé sur PageSpeed Insights.

Les règles sur lesquelles Google classe vos sites Web ne sont que des lignes directrices et doivent être considérées comme telles.

Correction de l’erreur « Supprimer javascript et css bloquant le rendu dans le contenu au-dessus du pli »

Avec WordPress, réduire les ressources JavaScript et CSS qui bloquent le rendu sur votre site WordPress est simple.Vous pouvez utiliser les trois plugins que nous avons énumérés ci-dessous :

W3 cache total

L’un de nos favoris est le plugin W3 Total Cache.Une fois installé et activé, suivez ces étapes sur le panneau d’administration WordPress:

  1. Accédez à Performances -> Paramètres généraux .
  2. Recherchez l’en-tête Minify sur la page.Ensuite, vous verrez quelques options sous ce titre.
  3. Cochez la case Activer pour réduire.Ensuite, pour l’option Réduire le mode , sélectionnez Manuel.
  4. Appuyez sur Enregistrer tous les paramètres .
    minimiser les ressources de script css et js avec le plugin w3 cache total
  5. Téléchargez tous les scripts JavaScript et CSS qui bloquent le rendu, que vous pouvez trouver via Google PageSpeed Insights.
  6. Une fois que vous avez trouvé le fauteur de troubles, revenez à Performance -> Minimiser sur votre tableau de bord WordPress.
  7. Trouvez la section JS.Dans la section Opérations de zone, sélectionnez le type d’incorporation non bloquante à l’aide de «  differ » pour la balise B ephore <head> .
  8. Pour gérer les fichiers JS, choisissez le thème actif et cliquez sur le bouton Ajouter un script.Copiez et coller des URL JavaScript à partir de Google Page Speed Insights dans les champs fournis, comme indiqué ci-dessous.
    Supprimer le rendu bloquant les ressources JS avec plugin W3 Total Cache
  9. Faites défiler vers le bas et trouvez la section CSS.Pour gérer les fichiers CSS, choisissez le thème actif et cliquez sur Ajouter une feuille de style.Comme à l’étape précédente, copiez les URL des feuilles de style CSS de PageSpeed Insights et coller dans les champs requis.
    Supprimer les ressources jss qui bloquent le rendu avec le plugin W3 Total Cache
  10. Enfin, cliquez sur le bouton Enregistrer les paramètres et supprimer le cache .

Propriété Autoptimize

Alternativement, vous pouvez utiliser le plugin Autoptimize pour résoudre le rendu de blocage des erreurs javascript et css.Effectuez ces étapes sur le tableau de bord après avoir installé et activé le plug-in :

  1. Allez dans Paramètres -> Optimiser automatiquement.
  2. Cochez les cases pour Optimiser le code JavaScript ? « Et optimiser le code CSS ?
  3. Appuyez sur le bouton Enregistrer les modifications et vider le cache .
    Optimisez CSS et JavaScript avec le plugin Autoptimize

Dans la plupart des cas, cela suffit à corriger l’alerte.Toutefois, le résultat peut varier en fonction du thème et des plug-ins actifs.

Pour vous assurer que votre problème a été résolu, exécutez à nouveau votre site via PageSpeed Insights.S’il vous reste des ressources JS et CSS bloquantes, apportez encore plus d’optimisation en suivant ces étapes :

  1. Revenez à Paramètres -> Optimiser automatiquement.
  2. Appuyez sur le bouton Afficher les paramètres avancés .
  3. Ensuite, vérifiez les options pour Également agréger JS en ligne et Également agréger CSS en ligne.
    réglage avancé pour optimiser les css et js en agrégeant également CSS et JS en ligne
  4. Enregistrez vos modifications.

Pack booster de vitesse

Un autre plugin populaire que vous pouvez trouver utile pour corriger les erreurs de blocage de rendu javascript et css pour votre site WordPress est Speed Booster Pack.Pour ce faire, suivez ces étapes dans votre zone wp-admin :

  1. Accédez à la section Speed Booster Pack et accédez à l’onglet Avancé .
  2. Dans le menu Optimisation JavaScript , activez Déplacer le script vers le pied de page et Renvoyer l’analyse des fichiers JavaScript.
    Activer la navigation de script dans le pied et le report de l’analyse de fichiers JavaScript dans la section Optimisation JavaScript pour corriger la suppression des blocs de rendu javascript et CSS dans l’erreur de pli ci-dessus
  3. Faites défiler jusqu’au menu Optimisation CSS pour définir l’optimisation des blocs de rendu CSS.
  4. Vous trouverez des paramètres supplémentaires pour aligner tous les CSS, minimiser tous les CSS (précédemment) intégrés, et déplacer tous les CSS intégrés dans le pied.Expérimentez ces options pour trouver une solution appropriée.
    Expérimentez avec les optimisations CSS pour trouver la bonne solution

    Le simple fait d’activer tous ces éléments chargera votre site plus rapidement, mais il pourrait également introduire l’artefact indésirable de contenu non étendu (FOUC).Cela se produit lorsque le navigateur charge la page Web sans attendre que la feuille de style se charge, provoquant un flash de page momentané non modifié.

Après avoir essayé les méthodes ci-dessus, rendez-vous sur PageSpeed Insights de Google pour vous assurer que le blocage du rendu n’est plus un problème.

Conclusion

La vitesse du site Web est l’un des facteurs les plus importants pour attirer et retenir les visiteurs.C’est parce que les moteurs de recherche prennent en compte la vitesse du site lors de la classification des résultats.

PageSpeed Insights de Google note les sites Web en fonction de la vitesse de chargement.Si vous obtenez le tristement célèbre Éliminer le rendu de blocage JavaScript et CSS dans les suggestions au-dessus de la ligne de flottaison lors de l'analyse des performances de votre site WordPress, corrigez simplement le problème avec les plugins.

Nous espérons que ce tutoriel vous sera utile.N’hésitez pas à commenter ci-dessous si vous avez des questions.Bonne chance!

Open

info.ibdi.it@gmail.com

Close