Оптимизация доставки CSS: как отложить загрузку css?

Я пытаюсь Оптимизация доставки CSS следуя документации google для разработчиков https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

Как вы можете видеть в Примере вставки небольшого CSS-файла критический CSS в inlined в голове и оригинальные маленькие.css загружается после загрузки страницы.

<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>

мой вопрос относительно этого примера:

Как загрузить большой файл css после загрузки страницы?

49
css deferred-loading google-pagespeed html javascript

5 ответов

если вы не против использования jQuery, вот простой фрагмент кода, чтобы помочь вам. (В противном случае прокомментируйте, и я напишу пример pure-js

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

просто позвоните в свой $(document).ready() или

43

небольшая модификация функции, предоставленной Фредом, чтобы сделать ее более эффективной и свободной от jQuery. Я использую эту функцию в производстве для своих веб-сайтов

        // 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

В дополнение к ответу Фреда:

решение с использованием 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>

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

использование чистого 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

попробуйте этот фрагмент

на автор утверждает, что он был опубликован командой PageSpeed 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

предупреждение: body{background-image: url("http://example.com/image.jpg");} в css-файлах ваши css-файлы по-прежнему будут блокироваться.

Если вы пробовали все решения выше, и вы все еще получаете предупреждение блокировки рендеринга от PageSpeed insights, то у вас, вероятно, есть это правило стиля в ваших css-файлах. После многочасовых тестов выясняется, что это правило и есть то, что делает все моего css, который будет помечен как ресурсы блокировки рендеринга в PageSpeed insights. Я обнаружил, что та же проблема была обсуждали до.

Я не знаю, почему body{background-image: url(...) сделайте это для всех файлов css!, хотя у меня есть разные ресурсы изображений в файле для кнопок, значков,...так далее.

я исправил это, переместив это правило из .css file и поместите его в встроенные стили. К сожалению, вам придется нарушить свой план css и поместить правило во все ваши макеты HTML-файлов вместо того, чтобы быть в 1 css-файл, который импортируется во все ваши HTML-макеты, но 90-е и зеленый цвет в Файле PageSpeed выводы заслуживают этого.

2