Éliminer le blocage des rendus externes
PageSpeed Insights me suggère de:
"Éliminer externes rendu de blocage de Javascript et CSS, au-dessus du pli de contenu. Votre page a 1 bloquant les ressources CSS. Cela provoque un retard dans le rendu de votre page. Optimiser la prestation des SSC 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 de ce point. Comment puis-je suivre cette suggestion?
4 réponses
Google vous suggère de mettre le CSS initialement nécessaire (au-dessus du pli) en ligne et de charger le reste du CSS lorsque le chargement de la page est prêt. Voir ici.
idem pour le javascript. Incluez le "must have code" en ligne et chargez le "nice to have code" sur la page load comme suggéré ici
Idée est de charger ce que l'utilisateur voit aussi vite que possible.
personnellement je trouve cela difficile à suivre car cela diviserait le code et rend le maintien plus difficile. De sens que pour les grands projets si...
j'ai résolu ce problème uniquement avec des fichiers javascript.
essayez d'ajouter l'attribut async dans la balise 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 que si nécessaire. Déférer l'attribut charger le fichier à la fin de la page, un certain temps il n'effectuera pas sa fonctionnalité requise.
Eliminer les CSS bloquant le rendu dans la question du contenu au-dessus du pli.- Je Résoudre le blocage CSS Optimiser les Ressources CSS Livraison de la façon suivante:
<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>
vous pouvez convertir tous vos fichiers de code css en un seul fichier, puis google vous suggère un seul renderblocking de fichier. Sinon, si vous travaillez avec Wordpress projet, vous pouvez utiliser divers plugins pour votre site comme éliminer les rendre blocage css et js.
si vous voulez supprimer complètement le blocage du rendu, alors vous pouvez mettre tout votre code css dans la section head, works prefect.