Как легко и быстро найти критический CSS для всего вашего сайта?

Как легко и быстро найти критический CSS для всего вашего сайта?

CSS стили, включенные в <link> теги, могут вызывать задержки рендеринга, поскольку браузер ожидает полной загрузки и анализа CSS перед отображением любого содержимого.

Это может привести к значительным задержкам, особенно для пользователей с мобильных сетей.

Для оптимизации загрузки страницы PageSpeed рекомендует разделить CSS на две части.

Первая часть должна быть встроенной и отвечать за оформление контента, который отображается на первом экране - над сгибом (первоначально видимая часть страницы).

Она называется критическим CSS.

Оставшуюся часть CSS можно отложить и загрузить позже, что уменьшит влияние на первоначальный рендеринг страницы.

Чтобы найти классы CSS, которые используются над сгибом, сначала нужно определить, что для вас является сгибом.

Вы можете установить высоту области просмотра браузера (ATF (above the fold) "border") на 950px для десктопа или 892px для мобил (Google Pixel 7 Pro).

Чтобы перестраховаться, вы можете просто установить высоту области просмотра в 1000px и использовать ее в качестве ATF.

Любые CSS-классы, используемые для HTML-элементов, которые видны в этой области 1000px, будут считаться критическим CSS.

Поиск критических CSS теперь стал намного проще, ведь это можно сделать с помощью скрипта NodeJS от Кристиана Хенселя.

Его скрипт просканирует страницы с вашей XML карты сайта и сохранит критикал CSS в отдельный файл.

Скрипт можно найти на Гитхабе, а инструкции, как им пользоваться, описаны в статье.

-

@wtfiv рекомендует этот инструмент:

https://jonassebastianohlsson.com/criticalpathcssgenerator/

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/1784...