web-dev-qa-db-fra.com

Optimisation de la distribution CSS: comment différer le chargement des fichiers CSS?

J'essaie d'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 d'insertion d'un petit fichier CSS, le CSS critique est inséré dans l'en-tête et le fichier original small.css est chargé après le chargement 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>

Ma question concernant cet exemple:

Comment charger un gros fichier css après avoir chargé la page?

javascripthtmlcssgoogle-pagespeeddeferred-loading
58
RafaSashi

Si cela ne vous dérange pas d'utiliser jQuery, voici un extrait de code simple qui vous aidera. (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+" />"));
    }
};

Appelez simplement ceci dans votre fonction $(document).ready() ou window.onload Et vous voilà prêt à partir.

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

Au fait , il est étonnant de voir jusqu'où une simple recherche sur Google peut vous mener; pour la requête "post load css", il s'agissait du quatrième résultat ... http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

47
Fred

Une petite modification à la fonction fournie par Fred pour le rendre plus efficace et sans jQuery. J'utilise cette fonction en 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);
            }
        }
34
Salvi Pascual

En plus de la réponse de Fred:

Solution utilisant jQuery & 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>

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

Utilisation de Javascript pur & 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
RafaSashi

Essayez cet extrait

Le auteur affirme qu'il a été publié par l'équipe de Google PageSpeed

<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>
9
Raja Khoury

AVERTISSEMENT: body{background-image: url("http://example.com/image.jpg");} dans les fichiers CSS rendra vos fichiers CSS toujours bloquants lors du rendu.

Si vous avez essayé toutes les solutions ci-dessus et que vous obtenez toujours l'avertissement de blocage de rendu de PageSpeed ​​insights, 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 rend [~ # ~] tout [~ # ~] de mon css être marqué comme rendu ressources de blocage à l'aide des informations PageSpeed. J'ai trouvé le même problème a été discuté auparavant .

Je ne sais pas pourquoi body{background-image: url(...) le fait pour tous les fichiers CSS!, Même si le fichier contient des ressources images différentes pour les boutons, les icônes, ... etc.

J'ai corrigé cela en déplaçant cette règle du .css fichier et le mettre dans les styles en ligne. Malheureusement, vous devrez casser votre plan CSS et insérer la règle dans toutes vos présentations. Les fichiers HTML au lieu d'être dans un fichier css importé dans toutes vos présentations HTML, mais les années 90 et la couleur verte dans PageSpeed ​​insights le méritent bien.

2
Accountant م