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

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

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

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


css optimization pagespeed-insights pagespeed
person cag8f    schedule 04.03.2019    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Чтобы решить эту проблему, вам необходимо полностью удалить правила 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)

person Prayag Verma    schedule 05.03.2019
comment
Удалить стили, которые не используются на странице или в верхней части страницы? - person Peter Svegrup; 06.03.2019
comment
@PeterSvegrup Эта рекомендация предназначена для всех неиспользуемых стилей на странице и не ограничивается критическим CSS, иначе говоря, если на странице есть встроенный CSS-код сгиба, который присутствует на странице, и некоторые из них не требуются, тогда эта рекомендация будет включать и его. - person Prayag Verma; 06.03.2019
comment
@PrayagVerma Хорошо, спасибо, что указали на проблему с GitHub. Я вижу, что запрос на перенос уже был объединен. Итак, я прав, что мы увидим изменение названия этой «возможности» при следующем обновлении Lighthouse? - person cag8f; 07.03.2019
comment
@ cag8f В настоящее время ярлык выпуска 4.2 (github.com/GoogleChrome/lighthouse/labels/4.2) не добавлен в объединенный PR. Поэтому нам придется подождать и посмотреть, в какой из следующих выпусков это изменение будет интегрировано. - person Prayag Verma; 07.03.2019

arrow_upward
0
arrow_downward

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

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

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

person Peter Svegrup    schedule 04.03.2019
comment
Чтобы было ясно, в PageSpeed ​​Insights этот раздел «Отложить неиспользуемый CSS» отображается как в моем отчете для настольных компьютеров, так и в моем отчете для мобильных устройств. Могу я спросить, почему перемещение таблиц стилей до </body> поможет, особенно если они уже загружены асинхронно? Кажется, это не имеет значения? Если только я чего-то не понимаю. Спасибо за добрые слова о моем сайте. - person cag8f; 07.03.2019

arrow_upward
0
arrow_downward

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

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

person Diego Hellin    schedule 09.04.2019