Optimisation de la livraison CSS: comment reporter le chargement css?

j'essaie de optimiser la livraison CSS en suivant la documentation de google pour les développeurs https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

comme vous pouvez le voir dans l'exemple de lining un petit fichier CSS le CSS critique inlined dans la tête et le petit original.css est chargé après onload de la page . 

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

My question concernant cet exemple:

comment charger un grand fichier css après avoir chargé la page?

49
demandé sur Andrew Barber 2013-10-15 10:47:04

5 réponses

si cela ne vous dérange pas d'utiliser jQuery, voici un simple extrait de code pour vous aider. (Sinon, commentez et j'écrirai un exemple pur-js 

function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />"));
    }
};

il suffit de l'appeler dans votre fonction $(document).ready() ou window.onload et vous êtes prêt à partir.

Pour le #2, pourquoi ne pas l'essayer? Désactiver Javascript dans votre navigateur et voir!

à propos , il est étonnant de constater à quel point une simple recherche sur google peut être vous; pour la requête "post load css" , c'était la quatrième coup... http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

43
répondu Fred 2015-07-05 16:37:39

une petite modification à la fonction fournie par Fred pour la rendre plus efficace et libre de jQuery. J'utilise cette fonction dans la production pour mes sites web 

        // to defer the loading of stylesheets
        // just add it right before the </body> tag
        // and before any javaScript file inclusion (for performance)  
        function loadStyleSheet(src){
            if (document.createStyleSheet) document.createStyleSheet(src);
            else {
                var stylesheet = document.createElement('link');
                stylesheet.href = src;
                stylesheet.rel = 'stylesheet';
                stylesheet.type = 'text/css';
                document.getElementsByTagName('head')[0].appendChild(stylesheet);
            }
        }
31
répondu Salvi Pascual 2015-11-07 09:51:49

en plus de la réponse de Fred:

Solution à l'aide de jQuery et Noscript 

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        if($("body").size()>0){
                if (document.createStyleSheet){
                    document.createStyleSheet('style.css');
                }
                else {
                    $("head").append($("<link rel='stylesheet' 
                    href='style.css' 
                    type='text/css' media='screen' />"));
                }
            }
        });
    </script>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

de http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

utilisant pur Javascript & Noscript 

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    <script type="text/javascript">
          var stylesheet = document.createElement('link');
          stylesheet.href = 'style.css';
          stylesheet.rel = 'stylesheet';
          stylesheet.type = 'text/css';
          document.getElementsByTagName('head')[0].appendChild(stylesheet);
    </script>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
10
répondu RafaSashi 2014-01-12 16:08:29

Essayez cet extrait de

le auteur affirme qu'il a été publié par L'équipe PageSpeed de Google 

<script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'yourCSSfile.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>
8
répondu Raja Khoury 2015-10-12 18:48:57

avertissement: body{background-image: url("http://example.com/image.jpg");} dans les fichiers css rendra vos fichiers CSS toujours rendre-blocage.

si vous avez essayé toutes les solutions ci-dessus et que vous recevez toujours l'avertissement de blocage des rendus de PageSpeed insights, alors vous avez probablement cette règle de style dans vos fichiers css. Après des heures de tests, il s'avère que cette règle est ce qui fait que tout de mon css doit être signalé comme des ressources de blocage des rendus à PageSpeed insights. J'ai trouvé le même problème a été discuté avant .

Je ne sais pas pourquoi body{background-image: url(...) faites ça pour tous les fichiers css!, bien que j'ai différentes ressources d'images dans le fichier pour les boutons, icônes, ...etc.

j'ai corrigé ceci en déplaçant cette règle du fichier .css et en la mettant dans les styles inline. Malheureusement, vous aurez à briser votre plan css et mettre la règle dans tous vos layouts fichiers HTML au lieu d'être dans 1 fichier css qui est importé dans toutes vos mises en page HTML, mais les années 90 et la couleur verte dans PageSpeed insights le méritent.

2
répondu Accountant م 2018-08-22 02:10:14