Jump to content
  • 0

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


clgs
 Share

Question

Добрый день.

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

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

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

 

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 1

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

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

  • Like 1
Link to comment
Share on other sites

  • 1

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

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

 

Link to comment
Share on other sites

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

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

 

Link to comment
Share on other sites

  • 0

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

 

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy