Как подключить css для оптимизации работы сайта для Pagespeed Insights?

Question

[Evgeniy-Web]

Всем привет! Много искал в интернете, на этом форуме, но ничего не помогает. Pagespeed Insights выдает: "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы", а именно ругается на файл css, который сейчас просто тегом link подключен в head, я пробовал взять кусок кода css, отвечающий за шапку сайта, удалить его и тегом style поместить его в head, а <link rel="stylesheet" href="css/style.css"/> кинуть в самый конец кода, в результате Pagespeed Insights убрал эту проблему из списка, но при этом жутко снизил баллы оптимизации, как оказалось, из-за того, что <link rel="stylesheet" href="css/style.css"/> стал подключатся после всего html кода во время загрузки сайта сначала появляется css код , а потом уже собственно сайт. Попытка поместить <link rel="stylesheet" href="css/style.css"/> выше всего контента, приводила к тому, что сайт начал загружаться как раньше хорошо, но Pagespeed Insights снова выдавал ошибку оптимизации css, хоть и вернул те утерянные баллы, странные дела, пожалуйста, скажите, чего именно хочет Pagespeed Insights?

Comments

[Ярослав Иванов]

Плохо начинать вопрос с врарья. Есть куча гайдов от "как правильно подключать файлы" до "как обмануть Гуго Пейдж спид " и что делать если в первые секунды сайт грузится без стилей. Во-вторых если вас так это напрягает то Пейдж спид это не более чем рекомендация а не обязательное требование.

Answer 1

[Site Developer]

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

Забей на этой бред и фейковый сервис.

Но сайт, конечно, оппа.. надо оптимизировать. Девку тоже

Comments

[Evgeniy-Web]

Спасибо, буду пытаться оптимизировать другим путем

Answer 2

[zooks]

Суть в том, что нужно выделить критический CSS и заинлайнить в HEAD (т.е. через <style></style>).
Остальные подключить перед закрывающим BODY через <link>.

Comments

[Evgeniy-Web]

Я так делал, Pagespeed Insights говорит, что все норм, проблема решена, а сам при этом порядка 20 баллов снимает, плюс появляется баг, который я описал ранее(

[zooks]

Evgeniy-Web: Не нужно дожимать баллы до 100. Но стоит обратить внимание на рекомендации. По своему большому опыту в оптимизации считаю, что вынос критического CSS чаще всего не требуется. Обратите внимание на другие пункты, указанные в PageSpeed.

[zooks]

Evgeniy-Web: у вас половину CSS занимает картинка в base64. Так делать не надо.

[Алексей Струков]

zooks: тоже считаю, что вынос css это бред. Однако "зелененькие" циферки там получить важно. Клиенты взяли моду проверять сайты этим сервисом и теперь имеют формальное право утверждать, что "сайт то некачественно сделан, гугл врать не будет, давайте скидку или переделывайте".

[Evgeniy-Web]

Алексей Струков: Алексей, а как все таки выносить этот css? Просто если его подключать после контента, то возникает баг, при загрузке сайта сначала вылазеет код, а потом загружается сам сайт

[zooks]

Алексей Струков: как они могут говорить про некачественный сайт, если это отдельная работа по оптимизации, затрагивающая работы на сервере? Так что с клиентом нужно вести диалог, объяснять что к чему, находить компромисс.

[Evgeniy-Web]

zooks: Да, бонально можно показать им результат с другого сайта оптимизатора, но все равно этот гугл странный, проверял один свой сайт, он ему на ПК выдал 26/100, проверил на норм ресурсе - 99/100 :)

[Evgeniy-Web]

zooks: Кстате, можешь подсказать сайт, на котором можно проверить оптимизацию на моб устройстве? Я сейчас проверяю tools.pingdom.com, но там вроде только ПК

[zooks]

Evgeniy-Web: https://gtmetrix.com/ умеет проверять через мобильный браузер.

[Алексей Струков]

Evgeniy-Web: я его динамически добавляю в head после загрузки страницы.
По факту получается скорость загрузки 10 миллисекунд, но гугл хитрый - он ждет пока загрузятся все ресурсы и лишь потом выдает результат своих тестов. Поэтому получается, что он видит link на css в начале страницы и ругается.

[Алексей Струков]

zooks: а что там за работы на сервере затрагиваются?
У меня проблема только с CSS, которая относится к фронтенду.
Все прочее, кеширование и т.д. работает нормально.
А компромисс проще искать, когда валидатор показывает хороший результат)

[zooks]

Алексей Струков: валидатор должен показывать хороший результат всегда, чего не скажешь о PageSpeed.

[Алексей Струков]

zooks: я его как раз и имел ввиду под валидатором.
Валидатор скорости загрузки)

Answer 3

[Дамир]

Не стоит гнаться за 100% в GPSI, это не стоит того ни в оптимизации, ни в дальнейшей поддержке сайта.
Достаточно подключить сжатый css в head и сжатый js перед