Статьи

20 советов по оптимизации производительности CSS

Август 9, 2018

В этой статье мы рассмотрим 20 способов оптимизации вашего CSS, чтобы он быстрее загружался, с ним было проще работать и более эффективным.

Согласно последним отчетам HTTP Archive , веб-сайт представляет собой раздутый беспорядок с мифическим срединным веб-сайтом, требующим 1700 КБ данных, разбитых на 80 HTTP-запросов и требующим 17 секунд для полной загрузки на мобильном устройстве.

Полное руководство по снижению веса страницы содержит ряд предложений. В этой статье мы сосредоточимся на CSS. Следует признать, что CSS редко является худшим виновником, и типичный сайт использует 40 КБ, распределенных по пяти таблицам стилей. Тем не менее, есть еще способы оптимизации, которые вы можете сделать, и способы изменить способы использования CSS, которые повысят производительность сайта.

1. Научитесь использовать инструменты анализа

Вы не можете решить проблемы с производительностью, если не знаете, где находятся ошибки. Браузер DevTools — лучшее место для запуска: запустить из меню или нажать F12 , Ctrl + Shift + I или Cmd + Alt + I для Safari на macOS.

Все браузеры предлагают одинаковые возможности, и инструменты будут медленно открываться на плохо работающих страницах! Тем не менее, наиболее полезные вкладки включают в себя следующее …

Вкладка Сеть отображает график водопад активов по мере их загрузки. Для достижения наилучших результатов отключите кэш и подумайте о снижении скорости сети. Ищите файлы, которые медленно загружаются или блокируют другие. Браузер обычно блокирует рендеринг браузера, в то время как файлы CSS и JavaScript загружаются и анализируются.

На вкладке « Производительность » анализируются процессы браузера. Начните запись, выполните действие, такое как перезагрузка страницы, затем остановите запись, чтобы просмотреть результаты. Ищу:

  1. Чрезмерные действия макета / перекомпоновки, когда браузер был вынужден пересчитать положение и размер элементов страницы.
  2. Дорогие действия рисования, где пиксели изменены.
  3. Композиционные действия, в которых окрашенные части страницы объединяются для отображения на экране. Обычно это наименее ресурсоемкое действие.

Браузеры на основе Chrome предоставляют вкладку Аудит, которая запускает инструмент Google Lighthouse . Он часто используется разработчиками Progressive Web App, но также дает рекомендации по производительности CSS.

Настройки онлайн

В качестве альтернативы, используйте инструменты онлайн-анализа, которые не зависят от скорости и возможностей вашего устройства и сети. Большинство из них могут тестировать из альтернативных мест по всему миру:

2. Делай большие победы первым

CSS вряд ли станет прямой причиной проблем с производительностью. Тем не менее, он может загружать тяжелые активы, которые могут быть оптимизированы в течение нескольких минут. Примеры:

  • Активируйте HTTP / 2 и GZIP-сжатие на вашем сервере
  • Используйте сеть доставки контента (CDN), чтобы увеличить количество одновременных HTTP-соединений и реплицировать файлы в другие места по всему миру.
  • Удалить неиспользуемые файлы.

Изображения обычно являются основной причиной большого объема страниц, однако многие сайты не могут эффективно оптимизировать:

  1. Изменение размера растровых изображений. Смартфон начального уровня будет принимать мульти-мегапиксельные изображения, которые невозможно отобразить в полном объеме на самом большом экране HD. На нескольких сайтах потребуются изображения шириной более 1600 пикселей.
  2. Убедитесь, что вы используете соответствующий формат файла. Как правило, JPG лучше всего подходит для фотографий, SVG для векторных изображений и PNG для всего остального. Вы можете экспериментировать, чтобы найти оптимальный тип.
  3. Используйте инструменты изображения, чтобы уменьшить размеры файлов путем чередования метаданных и увеличения коэффициентов сжатия.

Тем не менее, имейте в виду, что x Kb данных изображения не эквивалентны x Kb кода CSS. Двоичные изображения загружаются параллельно и требуют небольшой обработки для размещения на странице. CSS блокирует рендеринг и должен быть проанализирован в объектной модели, прежде чем браузер сможет продолжить.

3. Заменить изображения с CSS-эффектами

Редко необходимо использовать фоновые изображения для границ, теней, закругленных краев, градиентов и некоторых геометрических фигур. Определение «изображения» с помощью кода CSS использует значительно меньшую пропускную способность и его легче изменить или анимировать позже.

4. Удалите ненужные шрифты

Такие службы, как Google Fonts, позволяют легко добавлять пользовательские шрифты на любую страницу. К сожалению, одна или две строки кода могут получить сотни килобайт данных шрифта. Рекомендации:

  1. Используйте только те шрифты, которые вам нужны.
  2. Загружайте только те веса и стили, которые вам нужны — например, римские, вес 400, без курсива.
  3. Где возможно, ограничьте наборы символов. Шрифты Google позволяют выбирать определенные символы, добавляя &text=fonts.googleapis.com/css?family=Open+Sans&text=SitePon
  4. Рассмотрим переменные шрифты , которые определяют несколько весов и стилей путем интерполяции, чтобы файлы были меньше. В настоящее время поддержка ограничена Chrome, Edge и некоторыми версиями Safari, но должна быстро расти. См. Как использовать переменные шрифты .
  5. Рассмотрим шрифты ОС. Ваш веб-шрифт размером 500 КБ может быть фирменным, но кто-нибудь заметит, если вы переключитесь на общедоступные Helvetica или Arial? Многие сайты используют пользовательские веб-шрифты, поэтому стандартные шрифты ОС встречаются значительно реже, чем раньше!

5. Избегайте @import

@import Например: 

 /* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

Это кажется разумным способом загрузки небольших компонентов и шрифтов. Это не так . Правила @import

Несколько тегов <link> 

 <link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

Тем не менее, могут быть более предпочтительные варианты …

6. Конкатенация и минификация

Большинство инструментов сборки позволяют вам объединить все части в один большой файл CSS, в котором удалены ненужные пробелы, комментарии и символы.

Объединение менее необходимо с HTTP / 2 , который конвейеризует и мультиплексирует запросы. В некоторых случаях отдельные файлы могут быть полезны, если у вас есть небольшие, регулярно меняющиеся ресурсы CSS. Тем не менее, большинство сайтов, вероятно, выиграют от отправки одного файла, который немедленно кэшируется браузером.

Минификация может не принести значительных преимуществ, если у вас включен GZIP. Тем не менее, нет никаких реальных недостатков.

Наконец, вы можете рассмотреть процесс сборки, который упорядочивает свойства в декларациях. GZIP может максимизировать сжатие, когда в файле используются часто используемые строки.

7. Используйте современные методы размещения

Много лет приходилось использовать CSS float Техника взломать. Требуется много настроек кода и полей / отступов для обеспечения работы макетов. Даже в этом случае плавающие элементы будут ломаться при меньших размерах экрана, если не будут добавлены медиазапросы.

Современные альтернативы:

  • CSS Flexbox для одномерных макетов, которые (могут) переноситься на следующую строку в соответствии с шириной каждого блока. Flexbox идеально подходит для меню, галерей изображений, карточек и т. Д.
  • CSS Grid для двумерных макетов с явными строками и столбцами. Сетка идеально подходит для макетов страниц.

Оба варианта проще разработать, они используют меньше кода, могут адаптироваться к любому размеру экрана и рендериться быстрее, чем плавающие объекты, потому что браузер может изначально определить оптимальный макет.

8. Уменьшите код CSS

Самый надежный и быстрый код — это код, который вам никогда не нужно писать! Чем меньше ваша таблица стилей, тем быстрее она будет загружаться и анализироваться.

Все разработчики начинают с благих намерений, но со временем CSS может раздуться по мере увеличения количества функций. Проще сохранить старый ненужный код, чем удалить его и рискнуть что-то сломать. Несколько рекомендаций для рассмотрения:

  • Остерегайтесь больших CSS-фреймворков. Вы вряд ли будете использовать большой процент стилей, поэтому добавляйте модули только по мере необходимости.
  • Организовать CSS в меньшие файлы (частичные) с четкими обязанностями. Виджет карусели легче удалить, если CSS четко определен в widgets/_carousel.css
  • Рассмотрим методологии именования, такие как BEM, чтобы помочь разработке отдельных компонентов.
  • Избегайте глубоко вложенных объявлений Sass / препроцессора. Расширенный код может стать неожиданно большим.
  • Избегайте использования !important
  • Избегайте встроенных стилей в HTML.

Такие инструменты, как UnCSS, могут помочь удалить избыточный код путем анализа вашего HTML, но с осторожностью относитесь к состояниям CSS, вызванным взаимодействием JavaScript.

9. цепляйтесь за каскад!

Рост CSS-in-JS позволил разработчикам избежать глобального пространства имен CSS. Как правило, случайно сгенерированные имена классов создаются во время сборки, поэтому для компонентов становится невозможным конфликтовать.

Если CSS-in-JS улучшил вашу жизнь, продолжайте его использовать. Тем не менее, стоит понимать преимущества CSS-каскада, а не работать против него в каждом проекте. Например, вы можете установить шрифты по умолчанию, цвета, размеры, таблицы и поля форм, которые будут универсально применяться к каждому элементу в одном месте. Редко возникает необходимость объявлять каждый стиль в каждом компоненте.

10. Упростить селекторы

Даже самые сложные селекторы CSS анализируются за миллисекунды , но снижение сложности уменьшит размеры файлов и поможет анализировать браузер. Тебе действительно нужен такой селектор ?! 

 body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]

Опять же, опасайтесь глубокого вложения в препроцессоры, такие как Sass, где непреднамеренно могут создаваться сложные селекторы.

11. Остерегайтесь дорогой недвижимости

Некоторые свойства отображаются медленнее, чем другие. Для дополнительной шероховатости попробуйте разместить тени от блоков на всех ваших элементах! 

 *, ::before, ::after {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

Производительность браузера будет отличаться, но, в общем, все, что вызывает пересчет перед рисованием, будет стоить дороже с точки зрения производительности:

  • border-radius
  • box-shadow
  • opacity
  • transform
  • filter
  • position: fixed

12. Принять CSS анимации

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

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

13. Избегайте анимации дорогих свойств

Анимация размеров или положения элемента может привести к перераспределению всей страницы в каждом кадре. Производительность можно улучшить, если анимация влияет только на этап компоновки . Самые эффективные анимации используют:

  • opacity
  • transform

Браузеры часто используют аппаратно-ускоренный графический процессор для визуализации этих эффектов. Если ни один из них не идеален, рассмотрите возможность удаления элемента из потока страниц с помощью position: absolute

14. Укажите, какие элементы будут анимировать

Свойство will-change позволяет авторам CSS указывать, что элемент будет анимирован, поэтому браузер может заранее оптимизировать производительность. Например, чтобы объявить, что к элементу будет применено transform 

 .myelement {
  will-change: transform;
}

Можно указать любое количество свойств, разделенных запятыми. Тем не мение:

  • используйте will-change
  • не применяйте это к слишком многим элементам
  • дайте ему достаточно времени для работы: не начинайте анимацию немедленно.

15. Принять SVG изображения

Масштабируемая векторная графика (SVG) обычно используется для логотипов, диаграмм, значков и более простых диаграмм. Вместо определения цвета каждого пикселя, такого как растровые изображения JPG и PNG, SVG определяет такие формы, как линии, прямоугольники и круги в XML. Например: 

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" />
<svg>

Простые SVG меньше, чем эквивалентные растровые изображения и могут бесконечно масштабироваться без потери определения.

SVG может быть встроен непосредственно в код CSS как фоновое изображение. Это может быть идеально для небольших, многократно используемых значков и позволяет избежать дополнительных HTTP-запросов. Например: 

 .mysvgbackground {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat;
}

16. Стиль SVG с помощью CSS

Чаще всего SVG-файлы внедряются непосредственно в HTML-документ: 

 <body>
  <svg class="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
    <circle cx="400" cy="300" r="50" />
  <svg>
</body>

Это добавляет узлы SVG непосредственно в DOM. Поэтому все атрибуты стиля SVG могут быть применены с использованием CSS: 

 circle {
  stroke-width: 1em;
}

.mysvg {
  stroke-width: 5px;
  stroke: #f00;
  fill: #ff0;
}

Объем встроенного SVG-кода уменьшен, а стили CSS можно использовать повторно или анимировать по мере необходимости.

Обратите внимание, что использование SVG в <img>

17. Избегайте растровых изображений Base64

Стандартные растровые изображения JPG, PNG и GIF могут быть закодированы в строку base64 в URI данных. Например: 

 .myimg {
  background-image: url('data:image/png;base64,ABCDEFetc+etc+etc');
}

К сожалению:

  • кодировка base64 обычно на 30% больше, чем ее двоичный эквивалент
  • браузер должен проанализировать строку, прежде чем ее можно будет использовать
  • изменение изображения делает недействительным весь (кэшированный) файл CSS.

Хотя выполняется меньше HTTP-запросов, это редко дает заметное преимущество, особенно по HTTP / 2-соединениям. В общем, избегайте встраивания растровых изображений, если изображение вряд ли будет часто меняться, а результирующая строка base64 вряд ли будет превышать несколько сотен символов.

18. Рассмотрим Критический CSS

Те, кто использует инструменты анализа страниц Google, часто видят предложения «встроить критический CSS» или «сократить таблицы стилей, блокирующих рендеринг» . Загрузка файла CSS блокирует рендеринг, поэтому производительность можно улучшить, выполнив следующие шаги:

  1. Извлеките стили, используемые для визуализации элементов над сгибом. Инструменты, такие как критический CSS, могут помочь.
  2. Добавьте их в элемент <style><head>
  3. Загрузите основной файл CSS асинхронно, используя JavaScript (возможно, после загрузки страницы).

Этот метод, несомненно, повышает производительность и может принести пользу Progressive Web или одностраничным приложениям, которые имеют согласованные интерфейсы. Прибыль может быть менее очевидна для других сайтов / приложений:

  • Невозможно определить «складку», и она меняется на каждом устройстве.
  • Большинство сайтов имеют разные макеты страниц. Каждому из них может потребоваться различный критический CSS, поэтому инструмент сборки становится необходимым.
  • Динамические события, управляемые JavaScript, могут вносить значительные изменения, которые не определяются критическими инструментами CSS.
  • Техника в основном полезна для загрузки первой страницы пользователя. CSS кэшируется для последующих страниц, поэтому дополнительные встроенные стили увеличат вес страницы.

Тем не менее, Google будет любить ваш сайт и подтолкнуть его к # 1 для каждого поискового запроса. (SEO-эксперты могут процитировать меня по этому поводу. Все остальные будут знать, что это чепуха.)

19. Подумайте о прогрессивном рендеринге

Вместо того, чтобы использовать один CSS-файл для всего сайта, прогрессивный рендеринг — это метод, который определяет отдельные таблицы стилей для отдельных компонентов. Каждый загружается непосредственно перед ссылкой на компонент в HTML: 

 <head>

  <!-- core styles used across components -->
  <link rel='stylesheet' href='base.css' />

</head>
<body>

  <!-- header component -->
  <link rel='stylesheet' href='header.css' />
  <header>...</header>

  <!-- primary content -->
  <link rel='stylesheet' href='content.css' />
  <main>

    <!-- form styling -->
    <link rel='stylesheet' href='form.css' />
    <form>...</form>

  </main>

  <!-- header component -->
  <link rel='stylesheet' href='footer.css' />
  <footer>...</footer>

</body>

Каждый <link> Страница может быть использована раньше, потому что каждый компонент рендерится последовательно; верхнюю часть страницы можно просматривать, оставаясь загруженной.

Техника работает в Firefox, Edge и IE. Chrome и Safari «оптимизируют» работу, загружая все CSS-файлы и показывая белый экран, пока это происходит, но это не хуже, чем загрузка каждого в <head>

Прогрессивный рендеринг может принести пользу крупным сайтам, где отдельные страницы создаются из набора различных компонентов.

20. Учись любить CSS

Самый важный совет: понять ваши таблицы стилей!

Добавление огромного количества CSS из StackOverflow или BootStrap может дать быстрые результаты, но это также приведет к переполнению вашей кодовой базы неиспользованным мусором. Дальнейшая настройка становится чрезвычайно сложной, и приложение никогда не будет эффективным.

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

Я пропустил ваш любимый совет по производительности CSS?

41
Share: