Я бы хотел сделать свой сайт быстрее на мобильных устройствах. К сожалению, тема WordPress, которую я использую, использует два больших CSS для блокировки рендера (Bootstrap & JS_Composer, 22 кБ и 46 кБ в сжатом виде). Обе таблицы стилей имеют охват <5% на devtools. Чтобы отказаться от огромного количества неиспользуемого CSS, я хотел бы извлечь критический CSS, необходимый для рендеринга выше сгиба, и вставить его в заголовок, а затем отправить остаток в нижний колонтитул. </p>
Я использовалпара критических генераторов CSS, в том числе sitelocity и Jonas Ohlsson, для создания критического CSS. (Я проверил, что они дали идентичные результаты.) Затем я добавил этот CSS. Я считаю, что это должно включить рендеринг выше сгиба без остатка 2 больших CSS, поэтому я отправил 2 больших CSS в нижний колонтитул, чтобы предотвратить блокировку рендеринга.
* Если я тестирую сразу после выполненияэто изменение, мой FMP улучшается на 2 полных секунды на мобильном телефоне (!) без потери функциональности на сайте. Моя оценка PageSpeed повышается на ~ 15 баллов, и Google не отмечает 2 больших CSS как блокирующие рендеринг.
Когда я тестирую несколько минут спустя, оценка FMP и PageSpeed возвращается к базовой линии, а 2CSS снова перечислены как блокировка рендеринга.
Блокировка рендеринга:
<head> <2 large CSS>
</head>
Сначала не блокирует рендеринг, а затем помечает как блокировку рендеринга (?)
<head> <critical CSS inline>
</head>
<body> <2 large CSS>
</body>
Это воспроизводимо. Когда я вытаскиваю 2 больших CSS из нижнего колонтитула и помещаю их в верхний колонтитул, а затем помещаю их НАЗАД в нижний колонтитул, процесс повторяется с *. Я не уверен, что с этим делать.
Я неправильно понимаю результаты PageSpeed? Мой подход обоснован? Или это никогда не сработает? Если это никогда не сработает, есть ли другие варианты, позволяющие отказаться от неиспользованных частей этого массивного CSS?
Ясность по любому из вышеперечисленного была бы очень признательна, большое спасибо!