Гугл дает вредные советы?

256

15 сентября 2017, 18:58

Читал статьи гугла по оптимизации страниц для ускорения загрузки и наткнулся на интересный пример здесь: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

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

<link> назодится за тегом <html>

Что это? Опечатка или так делать нормально?

Answer 1

В английской версии этой статьи, видимо более новой, отображается весьма отличающийся пример:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <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 = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Answer 2

Это не вредный совет. Метатег link особенно с объемным css-файлом, размещенный там где он должен быть (в секции head) откладывает рендер станицы до полной загрузки css. В коде примера сделаны 2 вещи: 1. В head размещен inline-css. Это методика называется critical path css и позволяет отобразить правильно или почти правильно первую 1000 пикселей страницы. 2. Откладывает загрузку полного файла стилей почти до конца рендера страницы. Второй момент да, не соответствует спецификации, но это легко исправить заменив его простым js-кодом, добавляющим в секцию head тег link c полным css.