web-dev-qa-db-fra.com

Élimine le blocage de rendu externe

PageSpeed ​​Insights me propose de:

"Éliminez Javascript et CSS externes bloquant le rendu dans le contenu au-dessus de la ligne de flottaison. Votre page contient 1 ressources CSS bloquantes. Cela entraîne un retard dans le rendu de votre page. Optimisez la livraison CSS pour les ressources suivantes: http: // itransformer.es/css/c0f9425.css "

Le fichier css c0f9425.css est le fichier combiné avec jquery-ui.css fichier et personnalisé.

Je ne comprends pas vraiment ce point. Comment dois-je suivre cette suggestion?

csspagespeed
18
Manolo

Google vous suggère de mettre en ligne le CSS initialement nécessaire (au-dessus de la ligne de flottaison) et de charger le reste du CSS lorsque le chargement de la page est prêt. Voir ici .

Il en va de même pour le javascript. Inclure le "must have code" inline et charger le "Nice to have code" on page load as suggéré ici

L'idée est de charger le plus rapidement possible ce que l'utilisateur voit.

Personnellement, j'ai du mal à suivre car cela diviserait le code et rendrait sa maintenance plus difficile. Cela a du sens pour les grands projets…

26
roka

J'ai réussi à résoudre ce problème avec les fichiers javascript uniquement.

Essayez d'ajouter l'attribut async dans la balise de script ou l'attribut defer.

Par exemple:

<script src="filename.js" async></script>
<script src="filename.js" async="async"></script>

ou

<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

Je vous suggère d'utiliser async, il ne charge le fichier qu'en cas de besoin. Différer l'attribut charger le fichier à la fin de la page, un certain temps il n'effectuera pas sa fonctionnalité requise.

7
jagseer singh

Éliminez le CSS bloquant le rendu en cas de problème de contenu au-dessus de la ligne de flottaison.

<script>
        var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'css/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>
5
matinict

Vous pouvez convertir tous vos fichiers de code CSS en un seul fichier, puis Google vous suggère un seul bloc de rendu de fichier. Sinon, si vous travaillez avec le projet Wordpress, vous pouvez utiliser divers plugins pour votre site, comme éliminer les blocages de rendu css et js.

si vous voulez complètement supprimer le blocage du rendu, vous pouvez mettre tout votre code CSS dans la section head, fonctionne prefect.

0
jagseer singh