Стоит ли усилий 100 PageSpeed и как побороть render blocking css?

Question

[account-4]

Тест Google PageSpeed дает мне результат 91. Никак не могу побороть render blocking css, при том, что CSS у меня совсем не большой, и визуально я не могу воссоздать эту ситуацию когда не рендерится above-the-fold контент и не пониманию за что так снижается оценка.

Единственный путь - это инлайнить часть стилей в head? А как подбирать какие стили инлайнить? Это же гемор какой.

Стоит ли это таких усилий? Считается ли нормальным результат 91 для мобайл и 100 для десктопа?

Comments

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

https://developers.google.com/speed/pagespeed/insi...
Я себе сделал. Счастливее не стал.

[account-4]

Ярослав Иванов: :) Интереснее конечно на более большом проекте, чем сайт-визитка. Мой пример - это многостраничный, довольно нагруженный сайт.

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

account-4: А какая разница одностраничник или крупные интернет магазин ? Разница в не загруженности а всего в трех правилах: Правильно распологать скрипты(async если можно), правильно подгружать css(хоть 1 кб хоть 1мб) и правильно сжимать картинки.

[account-4]

Ярослав Иванов: интересует второе. На каждой странице CSS может отличатся. И как тут быть?

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

account-4: кто в здравом уме делает на каждой странице css ?) и даже это можно адаптировать.

[account-4]

Ярослав Иванов: здрасте. Естественно речь о above-the-fold - он то разный на кажлой странице. Вы похоже не очень в теме.

Answer 1

[Назар Мокринский]

Всё это формальные параметры и оценки, которые даны не для слепого следования, а для того чтобы оценить ситуацию и понять что можно оптимизировать.

Если Google говорит что есть CSS блокирующий рендер, но вы-то знаете что это не проблема - то так тому и быть, не стоит сильно париться по этому поводу. Всегда критически анализируйте оценку и не гонитесь за абстрактными попугаями если это не имеет практического смысла.

Comments

[Евгений Кузовлев]

Еще бы до прожектов и клиентов донести это

[account-4]

Евгений Кузовлев: а клиенты 100 требуют?

[Евгений Кузовлев]

account-4: бывает, но в итоге сходимся просто на зеленой зоне

Answer 2

[Саша Улыч]

Inline стили в head, выбрать только те стили которые отображаются при загрузке первого экрана. К примеру на лендингах, это header+section-1. И все будет ок)

Comments

[account-4]

Далеко не лендинги, а много страничники. Структура может отличатся, не представляю как это делать совершенно. Это просто бред.

[Саша Улыч]

ну чаще всего первым идет header, его и вынести в инлайн стиль.

Answer 3

[Фёдор]

Есть более важные факторы ранжирования и более важные вещи, на которые стоит потратить время, чем гнаться за красивыми циферками, которые может быть, когда-нибудь дадут микроприрост к чему-нибудь.