Як реалізувати асинхронну завантаження css спеціально для pagespeed insights

Спасибі, що знайшли час на відповідь.
Даний спосіб добре себе показує на невеликих сторінках. Всі CSS сторінки вміщуються в рядок. Тут же є проект на

30 тис рядків css-правил, причому правила тягнуться аж з першого запуску сайту, ніхто ніколи не займався ніякої чищенням і упорядкуванням. Крім самого старого "ядра" - мініфіцірованная маса яка відповідає "за все потроху" сюди додаються CSS купи фреймворків + фікси, які вносяться в процесі супроводу. Виділити логічно з цього гордієвого вузла той самий критичний CSS, який можна заінлайніть, неможливо. Автоматичні засоби дають такий critical css, що верстка починає розвалюватися.

Салават Ситдиков. з точки зору w3c - так, я порушив. Однак, в даному випадку (з огляду на розрізненості валідаторів-гігантів), я готовий проміняти час роботи JS-надбудови на завантаження CSS через onload на невірну розмітку і поставити хак: умова для приховування линка від w3c валідатора.
Тут, на жаль, вони не домовилися з гуглом.)

У footer. Або повісити на document.ready

1. Комбінувати все css в один. Мінімізувати їх.
2. Включити стиснення для них. Якщо стоїть nginx, модуль gzip_static і разом з мінімізованої версією відразу зберігати стислу (style.css.min.gz)
3. У блоці head мати critical css для головної, для внутрішніх подругражть свій. Або використовувати об'єднаний critical для головної і внутрішніх.

Салават Ситдиков. Якщо все CSS комбінувати в один, то починає лага верстка. Поділ логіки і візуалізації - це не про цей проект.
critical css так само викликає збої в роботі верстки, хоча і дає хороші бали.

Схожі статті