Какие техники используются для критического CSS и ленивой загрузки стилей?

Критический CSS включает стили, необходимые для отображения контента, находящегося "выше сгиба" (above the fold), и встраивается непосредственно в HTML-документ, чтобы ускорить первую отрисовку. 

После этого оставшиеся стили можно загружать асинхронно, используя атрибуты rel="preload" или media="print" с последующим изменением на media="all", чтобы отложить их применение до загрузки страницы. Это предотвращает блокировку отрисовки основной страницы, а после полной загрузки позволяет сделать стили активными для всех устройств.

Ленивая загрузка стилей позволяет подключать CSS-файлы по мере необходимости: например, с помощью JavaScript для загрузки стилей при скроллинге к определенной секции или используя атрибут media для подключения стилей при выполнении заданного условия. 

Также можно применять сборщики и инструменты, такие как Webpack и critical, которые автоматически выделяют критические стили и упрощают процесс оптимизации.

Пример использования ленивой загрузки:

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

В этом примере стили загружаются асинхронно, так как media="print" изначально предотвращает их применение к экранному отображению. После загрузки атрибут изменяется на media="all", и стили начинают применяться ко всем типам устройств.