Above-the-Fold CSS — как ускорить загрузку сайта не замедлив разработку

[seokirill]

А где научная работа, поиск решения, открытие?
Просто «используйте это»?
)':

[http2]

А мне просто плевать на глупые подсказки этого PageSpeed Insights. :)

А так да, решение интересное. :)

[Deka87]

Не знаю, как это влияет на ранжирование в Google или поведение посетителей, но на оплату от клиента это влияет напрямую!

[shurupkirov]

решение пригодно для статических сайтов, так ведь?

[sashamorozov]

К сожалению, это всё не слишком подходит для динамических сайтов, на том же React, например.

[parrker]

Я правильно понимаю, что нужный CSS будет сгенерирован и вставлен только в один файл (index.html)? Как быть со всеми остальными?

[Deka87]

Правильно! В моем случае я просто скопировал данный код для каждой страницы, но для больших проектов придется придумать более изощренное решение.

[copyhold]

Проведя ряд экспериментов с разными утилитами для «abovethefold css» я выяснил, что все они не справляются со скрытыми элементами.
Так если у вас вверху страницы сложное меню с картинками, утилиты добавят их. Хотя на самом деле для отображения они не нужны.
То же часто бывает и с формами заказов например.

Поэтому для себя выбрал все таки вручную. Ну, почти вручную — postcss-critical-css