Как загружать CSS чтобы добиться высокой оценки в Google PageSpeed Insights?

Question

[Q Q]

Привет.

Загружаю CSS обычным способом:

<link rel="stylesheet" href="/css/style.css">

Получаю "Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение".

Файл весит 120 КБ, я полностью удаляю всё с него, делаю его пустым, запускаю Google PageSpeed Insights, он всё равно ругается на него, т.е. ему без разницы сколько он весит, главное чтобы его там не было. Куда его ставить и как вообще загружать CSS?

UPD:

Все предложенные варианты не решают проблему, PageSpeed отслеживает подключение стиля куда бы я его не ставил, будь то в head или в низ страницы и "ругается". Нашел такой вариант, который сделал PageSpeed 100/100:

function rocketCSS(e) {
    var t = new XMLHttpRequest;
    t.onreadystatechange = function(){
        if(4==t.readyState && 200==t.status){
            var e = document.head||document.getElementsByTagName("head")[0];
            var n = document.createElement("style");
            n.type = "text/css";
            n.styleSheet
                ? n.styleSheet.cssText = t.responseText
                : n.appendChild(document.createTextNode(t.responseText));
            e.appendChild(n);
        }
    };
    t.open("GET",e,!0);
    t.send();
}

rocketCSS('/style.css');

Answer 1

[Алексей Николаев]

Игнорирую это правило, при этом оценка 94 \ 100. По хорошему, убирать файл стилей из head можно только тогда, когда у вас сгенерирован правильный critical path, т.е. критичные для отображения стили, размещенные инлайново в тэге style. Во всех остальных случаях либо костыли, либо неприятный эффект FOUC (Flash of unstyled content), когда пользователь видит содержимое страницы до того, как стили загрузятся. Так быть не должно.

Answer 2

[crazyivan_ru]

В идеале вам нужно собрать все стили в один файл, стили подключать скриптом, например, так:

<script>jQuery("head").append("<link rel="stylesheet" type="text/css" href="/путь_до_файла_стилей.css">");</script>

а все скрипты вставить в конце страницы - прямо перед закрывающим тегом </body>, плюс, если у вас могут быть пользователи с отключенным javascript'ом в браузере (мало ли), нужно будет продублировать подключение файла стилей внутри тегов <noscript></noscript>, например, так:

<noscript><link rel="stylesheet" type="text/css" href="/путь_до_файла_стилей.css" /></noscript>

Comments

[Ваня Зюзгин]

Можете рассказать зачем JS, если он там не нужен?

[Serj-One]

Ваня Зюзгин: Не обращайте внимания, он несёт бред. При вызове его скрипта при doc ready, способ равносилен размещению стилей в конце страницы, а при вызове как есть не имеет смысла в принципе.

Answer 3

[Андрей Федоров]

Вам нужно:
1. Выделить из своего большого файла CSS все правила, которые влияют на отображение первой 1000px страницы. Сервис - https://jonassebastianohlsson.com/criticalpathcssg...
2. Разместить этот CSS в HTML-файле, разделе head, между тегами style.
3. Полный CSS-файл загружать с помощью JS размещенного в конце страницы.

var ms=document.createElement("link");ms.rel="stylesheet";ms.href="style.css";document.getElementsByTagName("head")[0].appendChild(ms);

У меня по Google PageSpeed Insights 98/100 по мобильным и десктопам, 100/100 удобство. 2 очка не добрал потому что использую скрипты Я.Метрики и G.Аналитка - ругается на кэширование. Потенциально можно исправить, но в ущерб актуальных версий этих скриптов.

Comments

[Q Q]

Google PageSpeed все равно говорит о блокировки содержимого из-за .css файла, даже если тот грузится через JS.

[Андрей Федоров]

Значит у вас еще что там есть. Дайте ссылку на страницу.

[Андрей Федоров]

Serj-One: Тут обсуждается совершенно конкретная проблема - как сделать чтобы конкретный сервис реагировал на код определенным образом. Т.ч. вопрос не в блокировании как таковом, а в реакции GPI

[Андрей Федоров]

Serj-One: А как же валидный код? )

[Андрей Федоров]

Serj-One: Погодите, вы считаете, что метатег link можно ставить перед закрывающим body и это валидно? Или я вас не понял.

Answer 4

[Ваня Зюзгин]

По рекомендациям Google, его нужно переместить вниз, до вызова JS. Из личного опыта могу сказать, что отображению сайта это не мешает.

Answer 5

[Андрей]

либо скриптом добавлять стили, либо в тег

Answer 6

[crescent]

Тоже, как некоторые тут пишут, не рекомендую это делать.

Скорость загрузки от конкретно этой рекомендации не растет, но появляется эффект FOUC (Flash of unstyled content), когда пользователь видит содержимое страницы до того, как стили загрузятся. От этого падает конверсия и увеличаваются отказы. Получаем обратные эффект - гораздо более сильный, чем положительный эффект от pagespeed