Comment charger un CSS de manière Asynchrone

Je suis en train d'essayer d'éliminer les 2 fichiers CSS sont rendu blocage sur mon site, ils apparaissent sur Google Page Speed Insights. J'ai suivi les différentes méthodes, dont aucun n'a été un succès. Mais, récemment, j'ai trouvé un post sur La Pensée Async et quand j'ai appliqué ce code: <script async src="https://third-party.com/resource.js"></script>il l'a fait éliminer le problème.

Cependant, après la publication, la page perdue le style. Je ne suis pas trop 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. Vous remercie de votre aide avec cela. Grâce

Faites-vous une demande asynchrone à des styles ou des scripts? Le style des charges peu de temps après que vous avez chargé la page ou il n'apparaît jamais?
J'ai appliqué l'attribut async, les styles et les a placés dans l'en-tête.
La chose avec des styles est qu'une re-rendu sera déclenchée si vous chargez la fin (par exemple, dans le corps), et n'est pas autorisé dans les normes (mais depuis que les navigateurs sont très indulgents il fonctionnera de toute façon). Si le problème est la lenteur du temps de réponse d'un serveur d'un tiers, peut-être vous pouvez simplement héberger sur votre serveur à la place?

InformationsquelleAutor Paulina | 2015-09-24

101

L'astuce pour le déclenchement de l'asynchrone télécharger la feuille de style est d'utiliser un <link> élément et réglez une valeur non valide pour l'attribut media (je suis à l'aide de media="none", mais quelle valeur à faire). Lorsqu'une requête de support a la valeur false, le navigateur sera toujours télécharger la feuille de style, mais il ne peut pas attendre pour que le contenu soit disponible avant le rendu de la page.
```
<link rel="stylesheet" href="css.css" media="none">
```
Une fois la feuille de style a fini de télécharger le media attribut doit être défini à une valeur valide donc les règles de style sera appliqué au document. L'événement onload est utilisé pour changer les médias de la propriété à tous:
```
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
```
Cette méthode de chargement des CSS livrera le développement d'un contenu pour les visiteurs beaucoup plus rapide que la méthode classique. Critique CSS peut être servi avec de l'habitude de blocage de l'approche (ou vous pouvez l'inclure pour des performances optimales) et non-critiques styles peuvent progressivement être téléchargées et appliquées plus tard dans l'analyse /processus de rendu.

Cette technique utilise du JavaScript, mais vous pouvez répondre pour les non-JavaScript des navigateurs en enveloppant l'équivalent de blocage <link> éléments dans un <noscript> élément:
```
<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 en http://www.itcha.edu.sv

Source dans http://keithclark.co.uk/
- On dirait que cette astuce ne fonctionne plus.
- Ok.. je ne savais pas que vous pouvez faire référence à des attributs d'élément dans le gestionnaires simplement en mentionnant leur nom. J'ai toujours pensé que "événement" est la seule exception.
- Alors, comment voulez-vous garder votre page de clignotant comme il rerenders tout? Plus vous inline core application shell styles de sorte que votre page a une certaine mise en page initiale au lieu de rendre quelque chose de Lynx serait fier?
- Semble toujours travailler pour moi. Après avoir fait cela, je sais plus obtenez un avertissement dans PageSpeed Insights pour ce fichier.
- ce travail est pour moi (08-juillet -2018) . Et de donner le bon score pagespeed insight
- Cela fonctionne dans la mise en scène/uat environnements, mais ne fonctionne pas dans un environnement de production. Dans la production de la css n'est pas appliquée à tous même si le fichier est chargé. Toute idée de ce que pourrait être la cause? Je l'ai essayé dans plusieurs navigateurs
InformationsquelleAutor Vladimir Salguero
49

Précontrainte

Vous pouvez maintenant utiliser le précontrainte mot clé pour link éléments.

Sync version:
```
<link href="style.css" rel="stylesheet">
```
Async version:
```
<link href="style.css" rel="preload" as="style">
```
Note

Cette fonctionnalité récemment devenu largement pris en charge parmi les navigateurs modernes. Si vous avez besoin de base pour les navigateurs plus anciens, utiliser 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 pari. Commentaire ci-dessous prise de cette discussion:

Nous avons décidé d'aller avec une approche différente pour rel=précharge. Je ne
ne pas savoir quand elle sera mise en œuvre.
- Il n'y a pas besoin d'utiliser loadCSS, le polyfill est assez: github.com/filamentgroup/loadCSS/blob/master/src/...
InformationsquelleAutor jabacchetta

vous pouvez essayer de l'obtenir dans beaucoup de façons :

1.À l'aide de 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.Insertion des DOM dans 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 de plugins que vous pourriez essayer
loadCSS

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

Exemple 2 charges Javascript, mais la question est à propos de chargement des CSS. Savez-vous si l'exemple 2 fonctionne aussi pour le CSS, si vous changez de <script> à <style rel=stylesheet>? (Juste curieux. Je vais utiliser loadCSS (c'est à dire votre exemple 3) au lieu de cela, si j'ai besoin de charger CSS plus tard.)

InformationsquelleAutor kamus

5

La fonction ci-dessous permettra de créer et d'ajouter au document toutes les feuilles de style que vous souhaitez charger de manière asynchrone. (Mais, grâce à la Event Listener, il suffira de le faire après tout de la fenêtre, d'autres ressources ont chargé.)

Voir la suivante:
```
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');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('href', asyncStyleSheets[i]);
        document.head.appendChild(link);
    }
}

window.addEventListener('load', loadAsyncStyleSheets, false);
```
- Existe-il des inconvénients de cette méthode si on le compare à dire avec les loadCSS approche? Il semble, du classique code var newStyle = document.createElement("link"); newStyle.rel = "stylesheet"; newStyle.href = "stylesheet.css"; document.getElementsByTagName("head")[0].appendChild(newStyle); à l'intérieur de la <script> balise dans la page de corps fait son travail parfaitement, même dans les vieux navigateurs comme MSIE8.
- oui il y a des. Comme vous pouvez le voir, cette fonction ne fait-il son travail sur window.load événement. Ainsi, le téléchargement commence lorsque tout est téléchargé. Pas de chance là-bas. Vous avez besoin non bloquant le chargement dès que possible pour commencer.
InformationsquelleAutor Rounin

Si vous avez un strict contenu de la politique de sécurité qui ne permet pas de @vladimir-salguero's réponse, vous pouvez utiliser ce (veuillez prendre note de l'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>

Il suffit d'ajouter les lignes suivantes à votre feuille de style référence: 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>

Je pense que le async attribut est ignoré, comme la balise de script n'a pas un src pour charger de manière asynchrone... ou est-il vraiment utile ici? Aussi pouvez-vous élaborer un peu plus sur la valeur à utiliser comme un nonce?

InformationsquelleAutor Bradley

Veuillez mettre à jour la réponse à tous les ci-dessus ne parvient pas à impressionner google pagespeed insights maintenant.

Selon Google c'est la façon dont vous devriez mettre en œuvre chargement asynchrone de Css

 < noscript id="deferred-styles" >
        < link  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>

Probablement un faux positif (PageSpeed bug) si vous utilisez de la précharge mot-clé de l'approche que j'ai mentionnés. github.com/filamentgroup/loadCSS/issues/53

InformationsquelleAutor kaushik gandhi

Vous devez vous connecter pour publier un commentaire.

Précontrainte

Note

Mise à jour (07/18)