Почему загрузка файла CSS асинхронно не разрешает запись «Отложить неиспользуемый CSS» PageSpeed?

Question

В отчете PageSpeed ​​Insights для моего сайта ( сайт здесь ) в качестве возможности указано «Отложить неиспользованный CSS».Мне неясно, что именно мне нужно сделать, чтобы решить эту проблему.Я уже гарантировал, что каждый CSS-файл в списке загружен тегом <link rel="preload">, который обеспечивает асинхронную загрузку файла ( снимки экрана ).Я даже использовал loadCSS для этого, согласно инструкциям Google .Почему это не решает «Отложить неиспользованный CSS?»Похоже, именно это я и сделал.

Я вполне уверен, что CSS-файлы загружаются асинхронно, поскольку PageSpeed ​​Insights больше не сообщает о них в разделе «Устранение ресурсов, блокирующих рендеринг» (это так и было).до).

Я видел этот предыдущий вопрос переполнения стека .На этот вопрос нет принятого ответа, плюс я считаю, что мой вопрос немного другой.В этом вопросе OP спрашивает, как решить «Отложить неиспользованный CSS».Я специально спрашиваю, почему rel=preload не разрешает «Отложить неиспользуемый CSS».

Answer 1

Чтобы решить эту проблему, вам необходимо полностью удалить правила CSS, которые не используются на странице.Асинхронная загрузка CSS-файлов не поможет в решении этой проблемы

Следовательно, при названии этой рекомендации существует двусмысленность, которая приводит к путанице.Это обсуждалось в проблеме - https://github.com/GoogleChrome/lighthouse/issues/6588

Я согласен с автором проблемы;Я также вижу многих людей, которые читают этот ярлык (с тех пор, как Google Pagespeed Insights начал использовать Lighthouse), поскольку у них все еще есть блокировка рендеринга CSS, когда они этого не делают (так как это предупреждение отображается для любого CSS, асинхронного или нет, который не используетсяна странице).Это ухудшается, потому что страница, на которую вы ссылаетесь для получения дополнительной информации, больше говорит о блокировке рендера и критических CSS, чем об «удалении неиспользуемого CSS».Он также использует «Отложить» в более типичном смысле (загружать асинхронно, а не удалять со страницы).

Чтобы устранить эту путаницу, команда Lighthouse решила переименовать эту рекомендацию в Удалить неиспользуемыеCSS в следующих выпусках (См. https://github.com/GoogleChrome/lighthouse/pull/7235)

Answer 2

В preload и defer используется javascript onload, так что ... может быть, вы используете тег noscript?

Похоже, что Pagespeed анализирует тег и показывает полученное сообщение.

Answer 3

Прежде всего мой опыт показывает, что результаты могут отличаться, и для Mobile может потребоваться некоторое время, чтобы ваши усилия окупились в счете.Desktop быстро отвечал на работу, которую я сделал, но потребовалось несколько дней, прежде чем Defer offscreen images «сработал» на Mobile.

Специально для вашей страницы я бы извлек критическую css для стилизации над сгибом и переместилсявсе таблицы стилей до </body>, сохраняя используемый вами метод loadCSS Filament Group.Я не бегло разбираюсь в WP, поэтому не могу ничего рассказать о том, как этого добиться, но поиск в Google должен решить это в кратчайшие сроки.

Пожалуйста, дайте мне знать, если я могу помочь вам.С первого взгляда на сайт, мне нравится, что ты делаешь!