Comment charger CSS de manière asynchrone

J’essaie d’éliminer 2 fichiers CSS qui bloquent le rendu sur mon site – ils apparaissent sur Google Page Speed ​​Insights. J’ai suivi différentes méthodes, dont aucune n’a été un succès. Mais récemment, j’ai trouvé un article sur Thinking Async et lorsque j’ai appliqué ce code: cela a éliminé le problème.

Cependant, après la publication, la page a perdu le style. Je ne suis pas sûr de ce qui se passe parce que le code fonctionne, mais c’est le style après le téléchargement qui ne fonctionne pas. J’apprécierais votre aide avec ceci. Merci

L’astuce pour déclencher un téléchargement de feuille de style asynchrone consiste à utiliser un élément et à définir une valeur non valide pour l’atsortingbut media (j’utilise media = “none”, mais n’importe quelle valeur le fera). Lorsqu’une requête multimédia est évaluée à false, le navigateur télécharge toujours la feuille de style, mais n’attend pas que le contenu soit disponible avant de rendre la page.

  

Une fois la feuille de style terminée, l’atsortingbut media doit avoir une valeur valide pour que les règles de style soient appliquées au document. L’événement onload est utilisé pour passer la propriété media à tous:

  

Cette méthode de chargement de CSS fournira un contenu utilisable aux visiteurs beaucoup plus rapidement que l’approche standard. Les CSS critiques peuvent toujours être servis avec l’approche de blocage habituelle (ou vous pouvez l’inclure pour des performances optimales) et les styles non critiques peuvent être progressivement téléchargés et appliqués ultérieurement dans le processus d’parsing / de rendu.

Cette technique utilise JavaScript, mais vous pouvez prendre en charge les navigateurs autres que JavaScript en encapsulant les éléments blocage équivalents dans un élément :

  

Vous pouvez voir l’opération dans http://www.itcha.edu.sv

entrer la description de l'image ici

Source dans http://keithclark.co.uk/

Précharge

Vous pouvez maintenant utiliser le mot clé preload pour les éléments de link .

Version de synchronisation:

  

Version asynchrone:

  

Remarque

Cette fonctionnalité est récemment devenue largement supscope par les navigateurs modernes. Si vous avez besoin de solutions de rechange pour les navigateurs plus anciens, utilisez loadCSS .

Mise à jour (07/18)

Cette fonctionnalité a été désactivée par défaut dans Firefox. Jusqu’à ce que Firefox implémente une solution, loadCSS (mentionné ci-dessus) est probablement votre meilleur choix. Commentaire ci-dessous tiré de cette discussion :

Nous avons décidé d’adopter une approche différente pour rel = preload. Je ne sais pas quand il sera mis en œuvre.

vous pouvez essayer de l’obtenir de plusieurs manières:

1.En utilisant media="bogus" et un au pied

         

2.Insertion de DOM à l’ancienne

  

3.si vous pouvez essayer des plugins, vous pouvez essayer loadCSS

  

La fonction ci-dessous créera et appenda au document toutes les feuilles de style que vous souhaitez charger de manière asynchrone. (Mais, grâce au programme d’ Event Listener , il ne le fera que lorsque toutes les autres ressources de la fenêtre auront été chargées.)

Voir ce qui suit:

 function loadAsyncStyleSheets() { var asyncStyleSheets = [ '/stylesheets/async-stylesheet-1.css', '/stylesheets/async-stylesheet-2.css' ]; for (var i = 0; i < asyncStyleSheets.length; i++) { var link = document.createElement('link'); var rel = document.createAttribute('rel'); var href = document.createAttribute('href'); link.setAttributeNode('rel', 'stylesheet'); link.setAttributeNode('href', asyncStyleSheets[i]); document.head.appendChild(link); } } window.addEventListener('load', loadAsyncStyleSheets, false); 

Si vous avez une politique de sécurité de contenu ssortingcte qui n’autorise pas la réponse de @vladimir-salguero , vous pouvez l’utiliser (veuillez noter le script nonce ):

  

Ajoutez simplement ce qui suit à votre référence de feuille de style: media="none" data-async="true" . Voici un exemple:

  

Exemple pour jQuery:

  

S’il vous plaît prendre soin de mettre à jour la réponse car tout ce qui précède ne parvient pas à impressionner google pagespeed insights maintenant.

Selon Google, vous devez implémenter le chargement asynchrone de Css

  < noscript id="deferred-styles" > < link rel="stylesheet" type="text/css" href="small.css"/ > < /noscript >