web-dev-qa-db-fra.com

Comment charger CSS de manière asynchrone

J'essaie d'éliminer 2 fichiers CSS qui bloquent l'affichage 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: <script async src="https://third-party.com/resource.js"></script>il a résolu le problème.

Cependant, après la publication, la page a perdu son style. Je ne suis pas trop sûr de ce qui se passe car le code fonctionne mais c'est le style après l'envoi qui ne fonctionne pas. J'apprécierais votre aide avec ceci. Merci

htmlcssasynchronous
50
Paulina

L'astuce pour déclencher un téléchargement de feuille de style asynchrone consiste à utiliser un élément <link> et à définir une valeur non valide pour l'attribut media (j'utilise media = "none", mais n'importe quelle valeur fera l'affaire). Lorsqu'une requête multimédia a la valeur false, le navigateur télécharge toujours la feuille de style, mais il n'attendra pas que le contenu soit disponible pour rendre la page.

<link rel="stylesheet" href="css.css" media="none">

Une fois la feuille de style téléchargée, l'attribut média doit être défini sur une valeur valide pour que les règles de style soient appliquées au document. L'événement onload est utilisé pour basculer la propriété media sur tous les éléments suivants:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

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

Cette technique utilise JavaScript, mais vous pouvez prendre en charge des navigateurs autres que JavaScript en encapsulant les éléments <link> bloquants équivalents dans un élément <noscript>:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="css.css"></noscript>

Vous pouvez voir l'opération dans www.itcha.edu.sv

 enter image description here

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

87
Vladimir Salguero

Précharge

Vous pouvez désormais utiliser le mot clé preload pour les éléments link.

Version de synchronisation:

<link href="style.css" rel="stylesheet">

Version async:

<link href="style.css" rel="preload" as="style">

Remarque

Cette fonctionnalité est récemment devenue largement prise en charge parmi les navigateurs modernes. Si vous avez besoin de solutions de secours 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 = précharge. Je fais sais pas quand il sera mis en œuvre.

44
jabacchetta

vous pouvez essayer de l'obtenir de plusieurs façons:

1.Utiliser media="bogus" et un <link> au pied

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

2.Insérer DOM à l'ancienne

<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>

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

<script>
  // include loadCSS here...
  function loadCSS( href, before, media ){ ... }
  // load a file
  loadCSS( "path/to/mystylesheet.css" );
</script>
7
kamus

La fonction ci-dessous crée et ajoute au document toutes les feuilles de style que vous souhaitez charger de manière asynchrone. (Mais, grâce au Event Listener, il ne le fera qu'après le chargement de toutes les autres ressources de la fenêtre.)

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);
5
Rounin

S'il vous plaît prenez soin de mettre à jour la réponse car tout ce qui précède ne parvient pas à impressionner Google Insights pagespeed maintenant. 

Selon Google voici comment vous devez implémenter le chargement async de Css

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

<script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>
0
kaushik gandhi

Utiliser media="print" et onload="this.media='all'":

Le groupe de filaments a récemment publié un article (juillet 2019) donnant sa dernière recommandation sur la façon de charger le CSS de manière asynchrone. Bien qu'ils soient les développeurs de la bibliothèque populaire Javascript loadCSS , ils recommandent en fait cette solution qui ne nécessite pas de bibliothèque Javascript:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Utiliser media="print" indiquera au navigateur de ne pas utiliser cette feuille de style sur les écrans, mais sur l’impression. Les navigateurs téléchargent effectivement ces feuilles de style d'impression, mais de manière asynchrone, ce que nous souhaitons. Nous souhaitons également que la feuille de style soit utilisée une fois celle-ci téléchargée, et pour cela, nous définissons onload="this.media='all'". Si vous le souhaitez, vous pouvez ajouter un <noscript> de secours pour les rares utilisateurs pour lesquels Javascript n'est pas activé.

Le article original vaut la peine d'être lu, car il est plus détaillé que moi. Cet article sur csswizardry.com vaut également la peine d'être lu.

0
Flimm

Si vous avez une politique de sécurité du contenu stricte n'autorisant pas @ vladimir-salguero / s answer , vous pouvez l'utiliser (notez le script nonce):

<script nonce="(your nonce)" async>
$(document).ready(function() {
    $('link[media="none"]').each(function(a, t) {
        var n = $(this).attr("data-async"),
            i = $(this);
        void 0 !== n && !1 !== n && ("true" == n || n) && i.attr("media", "all")
    })
});
</script>

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

<link rel="stylesheet" href="../path/script.js" media="none" data-async="true" />

Exemple pour jQuery:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" media="none" data-async="true" crossorigin="anonymous" /><noscript><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" /></noscript>
0
Brad