Google PageSpeed Insights Оптимизируйте код CSS

clgs · May 18, 2016

Добрый день.

Помогите привести информацию в голове в порядок.

Гугл пишет что нужно делать так

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

При этом в htmlbook указано следующее :

Цитата

тег <link> размещается всегда внутри контейнера <head>

SelenIT · May 19, 2016

Да, в данном случае в выборе между формальным соблюдением стандарта и быстротой первичной отрисовки страницы Гугл рекомендует второе. Да, формальное нарушение спеки, но в некоторых случаях оправданное. Да, удовлетворить валидатор и PageSpeed Insights одновременно не всегда возможно — выбирайте приоритеты.

Справедливости ради, сейчас WHATWG-шная спека разрешает <link rel="stylesheet"> внутри <body>, так что можно делать как-то так. По W3C-версии это по-прежнему невалидно, но... кого она волнует?)

clgs · May 18, 2016

т.е. хотите сказать что гугл имел ввиду следующее?

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <script>
	var css = document.createElement('link');
	css.type = 'text/css'; css.rel = 'stylesheet';
	css.href = 'small.css';
	document.getElementsByTagName('head')[0].appendChild(css);
    </script>
  </body>
</html>

SelenIT · May 19, 2016

2 часа назад, clgs сказал:

за <html>, это ИМХО уже перебор...

А для браузера разницы нет, за </html> или перед </body>. Закрывающие теги для <html> и <body> вообще нужны чисто для ~~красоты~~ успокоения совести кодера, по факту браузер их игнорирует и фактически эти элементы заканчиваются там, где заканчивается последнее содержимое.

Igor Schnaider · May 18, 2016

Цитата

Порядок применения правил CSS определяется путем внедрения всех элементов <style> и<link> в документ с помощью JavaScript.

Igor Schnaider · May 18, 2016

Ну, раз предлагает поместить элемент за </html>, то, вероятно, прям его и нужно брать, а не напрямую прописывать в скрипте путь к файлу. Что-то типа такого, наверное:

document.addEventListener('DOMContentLoaded', function () {
    var links = document.querySelectorAll('link');

    [].forEach.call(links, function (link) {
        document.querySelector('head').appendChild( link );
    });
});

wwt · May 19, 2016

Нужна скорость размещайте в body игнорируя валидатор (в конце концов не валидатор или спека приносит деньги владельцу сайта), а если нужно портфолио то лучше сделать как правильно, вы же показываете в нем свои знания.

ЗЫ На многих коммерческих проектах если заглянуть в код, там бывает такая мешанина что волосы начинают шевелиться во всех местах одновременно, но это оправданно если проект приносит прибыль.

Николя223 · May 19, 2016

за html? да ладно
как то меня просили гуглоидентификатор встроить в head.... притом что это ссылка. гугл диктует свои стандарты чтоли

clgs · May 19, 2016

4 часа назад, SelenIT сказал:

Да, в данном случае в выборе между формальным соблюдением стандарта и быстротой первичной отрисовки страницы Гугл рекомендует второе. Да, формальное нарушение спеки, но в некоторых случаях оправданное. Да, удовлетворить валидатор и PageSpeed Insights одновременно не всегда возможно — выбирайте приоритеты.

Справедливости ради, сейчас WHATWG-шная спека разрешает <link rel="stylesheet"> внутри <body>, так что можно делать как-то так. По W3C-версии это по-прежнему невалидно, но... кого она волнует?)

Внутри это еще понятно, но за <html>, это ИМХО уже перебор...

Sign In

Google PageSpeed Insights Оптимизируйте код CSS

Question

clgs

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

clgs

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Igor Schnaider

Link to comment

Share on other sites

Igor Schnaider

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Николя223

Link to comment

Share on other sites

clgs

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information