Дополнительный файл CSS для мобильных устройств - Как оптимизировать доставку?

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

Это также Tablesaw, которая изменяет внешний вид таблиц для моих мобильных посетителей.

Скорость страницы Google рассматривает это как критическую проблему, которая дает мне 77 баллов и говорит мне:

Устранить блокировку рендеринга JavaScript и CSS в верхнем содержании,

Оптимизировать CSS Доставка следующего:

  1. Основной файл CSS
  2. Файл Google Fonts (я не могу контролировать)
  3. CSS файл таблицы

В настоящее время пользователи мобильных телефонов получают таблицы следующим образом:

<head>
//
//
<link rel="stylesheet" type="text/css" href="/dist/tablesaw.css" media="screen and (max-width: 767px)">
//
//
</head>

Есть ли лучшая практика, чтобы сделать это, чтобы сделать Google счастливым?

Источник

1 ответ

Для оптимизации ваших CSS-файлов вы можете сделать несколько вещей..

  1. Уменьшите запросы к серверу, поэтому поместите все CSS в один файл.
  2. Сократите свой файл CSS, это означает, что весь ваш код сокращается, а каждое пустое пространство удаляется, вот сайт, где вы можете это сделать.
  3. Скопируйте критический путь CSS прямо в HTML-файл, вы можете получить это на этом сайте, если вы не знаете, как это сделать, вам, вероятно, стоит посмотреть видео об этом

Имейте в виду, что это оказывает большее влияние на очень большие файлы CSS

Источник
Другие вопросы по тегам