Réparer Google PageSpeed ​​Éliminer le blocage du rendu JavaScript et CSS dans le contenu au-dessus de la ligne de flottaison



Résoudre le blocage du rendu Javascript et CSS

Le test  Google PageSpeed ‌  ​​[1] Éliminer le rendu JavaScript et CSS dans le contenu au-dessus de la ligne de flottaison vous propose de fournir les fichiers JS et CSS de votre site après le chargement complet du HTML. pour les télécharger.

[1] - PageSpeed ​​Insights - développeurs.google.com
Définition de script bloquant le rendu: scripts qui sont chargés avant que le DOM HTML complet n'ait été analysé. Par exemple, les scripts inclus dans l'en-tête ou dans le contenu, sans instruction spécifique pour les navigateurs de retarder le chargement du script jusqu'à la peinture HTML.

Éliminez le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison: montrez comment y remédier

  1. Faites en sorte qu'un système externe optimise votre site Web pour vous
  2. Utilisez un CDN qui effectuera toutes les optimisations possibles en votre nom, y compris les trois optimisations suivantes nécessaires pour éliminer les ressources bloquant le rendu:
  3. Différer le chargement des fichiers Javascript
  4. Charger le CSS après le chargement du HTML
  5. Utilisez un plugin WordPress

De nombreuses optimisations sont nécessaires pour corriger les ressources de blocage du rendu et peuvent être fastidieuses à mettre en œuvre par vous-même.En outre, vous devrez constamment rechercher de nouveaux tests inclus dans Chrome LightHouse et Google PageSpeed, entre autres tests de vitesse de page.

Il n'y a pas de solution existante pour éliminer les ressources bloquant le rendu dans le code htaccess car le problème est lié au DOM, c'est-à-dire au contenu du site Web et à l'ordre dans lequel les ressources incluses sont chargées, comme Javascript et CSS, mais pas seulement. Ceux-ci ne peuvent pas être déclenchés dans Htaccess, mais uniquement dans le contenu HTML DOM.

Si vous résolvez ces problèmes pour le bureau, vous éliminerez en même temps les ressources bloquant le rendu pour mobile, car les deux sont exactement les mêmes!

Did you know that you can even have all these steps executed automatically for you by using an external Accélérateur de vitesse du site technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Différer le chargement des fichiers Javascript

Afin de différer la charge de vos fichiers JS [2], vous pouvez ajouter l'instruction async ou reporter à vos liens de scripts. Async ne garantit pas qu'ils sont chargés dans la même séquence. Par conséquent, si vous avez plusieurs scripts qui doivent être exécutés l'un après l'autre, différer est préférable pour garantir la séquence:

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2] - Supprimer le JavaScript bloquant le rendu | PageSpeed ​​Insights | Bons développeurs - developer.google.com

Charger CSS après le chargement HTML

Pour que le CSS soit chargé après la transmission du code HTML complet, Google propose [3] d'ajouter ce bout de code à la fin de votre code HTML, par exemple après la balise de fermeture du pied de page et avant la balise de fermeture du corps:

</footer>
 <script>
 var cb = function() {
 var l = document.createElement('link'); l.rel = 'stylesheet';
 l.href = './style.css';
 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
 };
 var raf = requestAnimationFrame || mozRequestAnimationFrame ||
 webkitRequestAnimationFrame || msRequestAnimationFrame;
 if (raf) raf(cb);
 else window.addEventListener('load', cb);
 </script>
</body>
[3] - Optimiser la diffusion CSS | PageSpeed ​​Insights | Bons développeurs - développeurs.google.com

Afin d'optimiser votre site Web, il est également judicieux de supprimer le code CSS non utilisé, une opération qui peut être fastidieuse si vous n'avez pas de connaissances dans la conception Web. Si vous n'avez pas créé votre site Web Thème vous-même, il serait peut-être plus sage d'utiliser un système externe pour supprimer le code CSS non utilisé sur vos pages de votre nom, tels que Ezoic Leap, par exemple, la nouvelle version (et totalement gratuite) de leur site étonnant. Accélérateur de vitesse.

Passez le test de vitesse du site Google!

Cela m'a permis de réussir le test de  Google PageSpeed ‌  ​​[1] Éliminer le JavaScript et le CSS dans le contenu au-dessus de la ligne de flottaison (avec le Leverage Browsing Caching [4]) sur un site web, passant de 51 sur mobile ( Fig 1) à 72 (Fig 2), et en hausse de 59 (Fig 3) à 79 sur le bureau (Fig 4).

[4] - Correction de la mise en cache du navigateur Google PageSpeed ​​dans htaccess - Yoann Bierling, consultant international SAP / Web - www.ybierling.com

Comment éliminer les ressources bloquant le rendu dans WordPress

Pour éliminer les ressources bloquant le rendu dans WordPress, il est nécessaire d’installer un plugin tel que JetPack.

Accédez ensuite aux options pour lesquelles vous devez être administrateur, à Options JetPack> Ecriture> Performances et rapidité> Cochez Activer l'accélérateur de site, accélérer les temps de chargement des images, les temps de chargement des fichiers statiques et activer le chargement images.

Cela éliminera les ressources bloquant le rendu dans WordPress et chargera les pages plus rapidement en permettant à JetPack d'optimiser vos images et de servir vos images et fichiers statiques (tels que CSS et JavaScript) à partir de leur réseau mondial de serveurs.

Comment éliminer le code JavaScript et CSS bloquant le rendu sur WordPress

En outre, n'oubliez pas de reporter des images de chargement hors écran à l'aide d'une fonction de charge paresseuse. Bien que cela soit difficile et nécessite une bibliothèque externe pour reporter des images de chargement hors écran, il est maintenant possible de manière natale dans HTML5!

Chargement paresseux des images: Les images de site Web ne sont demandées que sur le serveur lorsque l'utilisateur faites défiler sur la page Web et peut les afficher.

Pour mettre en œuvre un chargement paresseux d'images sur vos sites Web, ajoutez simplement les valeurs paresseuses aux attributs de chargement des images de votre site Web et les navigateurs récents comprendront que ces images ne doivent être demandées et chargées que si elles sont affichées, ce qui signifie si l'utilisateur fait défiler la page. les espaces réservés d'image seront affichés.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Chargement paresseux - Performance Web - Réseau de développeurs Mozilla

En plus de cela, le chargement paresseux fonctionne également avec des iframes et constitue une implémentation importante pour éliminer les ressources bloquant le chargement de vos pages Web.

Une fois que les ressources de blocage de rendu auront des instructions à charger après le contenu principal, ce qui signifie que le HTML DOM, vous gagnerez déjà beaucoup de points sur le test Google Lighthouse, le test de la page Speed ​​Insights, ou les vitaux de Google Core Web.

Avoir un système externe pour optimiser votre site web pour vous

Savez-vous que vous pourriez en fait résoudre tous les problèmes de  Google PageSpeed ‌  ​​en votre nom, sans trop d'efforts de votre site - à l'exception de l'inscription à un essai gratuit et de la modification de votre DNS?

En utilisant la technologie Site Speed ​​Accelerator de la plateforme Ezoic, tous les problèmes habituels de  Google PageSpeed ‌  ​​seront résolus par leur système, qui sera l'intermédiaire entre votre site Web et les visiteurs. Ils optimiseront la page Web pour vous avant de l'afficher à votre visiteur.

En avril 2021, l'accélérateur de vitesse de site payant Ezoic deviendra l’outil Ezoic LEAP et aidera les sites Web à atteindre des scores de base sur les vitaux Web principaux sans frais!

Devenez vert en vous inscrivant simplement à un essai gratuit sur la plate-forme Ezoic et essayez-le par vous-même - ils feront en sorte que votre site Web atteigne les plus hauts standards d'optimisation de la vitesse des pages en quelques jours: restituez des images webp de nouvelle génération, optimisez CSS et JavaScript en supprimant CSS inutilisé et JS, charger des images paresseuses, redimensionner des images, mettre en cache les pages de votre site, optimiser les polices, vous pré-connecter à tous vos sites inclus et bien plus encore.

Aucune carte de crédit requise - tout ce que vous avez à faire est de vous inscrire gratuitement et de l'essayer. De plus, si votre site Web gagne de l'argent grâce aux annonces graphiques, en plus de rendre votre site Web beaucoup plus rapide, il peut également vous faire gagner plusieurs fois plus d'argent que vous ne le faites avec Google AdSense en optimisant vos annonces avec l'apprentissage automatique et l'intelligence artificielle avancée.

Score Perfect Chrome Phare: Que se passe-t-il?





commentaires (8)

 2018-08-19 -  quranapk
J'adore lire votre contenu continuez à publier - cela m'a aidé à corriger le blocage du rendu CSS
 2018-09-23 -  Monica
Voilà comment nous procédons, c'est formidable de savoir comment résoudre l'élimination des ressources bloquant le rendu
 2018-09-25 -  Van
Génial, c'est exactement ce que je recherchais, maintenant je suis prêt à éliminer les ressources bloquant le rendu sur mobile
 2018-11-03 -  utumikaji0
Incroyable, il est maintenant temps pour moi de l'essayer et de corriger l'élimination des ressources bloquant le rendu!
 2019-01-12 -  Leo
Je ne sais pas comment vous remercier, mais c'est un pur génie, merci - cela a fonctionné sur WordPress pour supprimer les ressources de blocage de rendu
 2019-04-21 -  Ludanulema
Bonjour, j'ai vu votre article et cela m'a aidé à résoudre le problème d'éliminer les ressources bloquant le rendu sur PHP, merci
 2019-06-12 -  animeg2Q
Je vais l'essayer maintenant, merci d'avoir partagé ce correctif d'élimination des ressources bloquant le rendu
 2019-07-02 -  Gasfackele
Cela a bien fonctionné pour moi, pas besoin de chercher plus loin pour éliminer les ressources bloquant le rendu dans le site Web HTML

laissez un commentaire