Что означает удаление неиспользованных css в ревизии Google?

Question

Я использую аудит Google, и он говорит мне, чтобы удалить неиспользованный CSS. Я не знаю, если это css только для этой страницы или для всего сайта. CSS может быть там, но не обязательно на этой странице, но на другой странице. Может кто-нибудь сказать мне, как это работает?

Answer 1

Инструмент аудита Google сравнивает всю таблицу стилей с текущим URL-адресом, а затем сообщает, какая ее часть фактически не используется браузером.

Однако браузеру по-прежнему необходимо загрузить весь файл и затем сопоставить все CSS селекторы, которые применяются к текущему URL.

Есть много способов справиться с этим, но я считаю, что проще всего использовать внешний инструмент API, такой как Split css, который делает это для вас на основе URL.

Если у вас есть только несколько шаблонов URL в вашем веб-приложении, вы можете использовать некоторые инструменты CLI, такие как purge css или un css.

Answer 2

Он советует вам удалить ненужные CSS для этой страницы.

Однако вы правильно указали на недостаток в этом предложении, поскольку оно учитывает только текущую страницу (в исходном состоянии, очевидно, если у вас есть всплывающее меню, оно не наберет CSS для этого).

Думайте об этом больше как о рекомендации, чтобы не отправлять все Bootstrap только для например, макеты сетки и столбцов.

В целом это очень трудно исправить, просто воспользуйтесь разделом coverage на вкладке «Быстродействие» в инструментах разработчика, чтобы убедиться, что у вас нет сильно раздутых CSS файлы, и вы будете в порядке.

Очевидно, уменьшите ваши неиспользованные CSS, если это легко сделать.

Единственное, что охватывает этот пункт (в его описании, а не как часть его мониторинга), это откладывание несущественного CSS.

Вы должны отложить любые таблицы стилей, которые не являются требуется для рендеринга контента «выше сгиба» (и вставьте свой «над сгибом» CSS).

Этот момент также рассматривается в «Устранении ресурсов блокирования рендеринга», поэтому я так и не понял, почему они добавляют предложение также и в этой части, но я добавил его для полноты.

Я считаю, что это правило хорошо помогало мне при разработке темы с нуля, поскольку оно делало меня отдельным глобальным CSS и страницей * 1029. * более эффективно.

Если ваш сайт не набирает 98/100 (или у вас есть сотни килобайт CSS), и вы хотите выжать из сайта эту последнюю частичку производительности, просто уменьшите и объедините ваши CSS файлы и игнорируйте этот пункт.