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

В данной статье мы рассмотрим 20 приемов оптимизации CSS, которые повысят производительность веб-сайта.

Используйте аналитические инструменты

Используйте инструменты разработчика, встроенные во все наиболее популярные браузеры. Чтобы запустить их, нажмите F12, Ctrl+ Shift+ I или Cmd+ Alt+ I в Safari(macOS).

Наиболее полезные вкладки включают в себя следующие данные:

  • «Сеть» — графики загрузки ресурсов. Для получения достоверных результатов отключите кэш. Ищите файлы, которые загружаются медленно или блокируют загрузку иных. Браузер обычно блокирует рендеринг при загрузке и парсинге файлов CSS и JavaScript.
  • «Производительность» — включает данные о процессах браузера. Начните запись, выполните какое-либо действие(к примеру, перезагрузите страницу), далее остановите запись и посмотрите результаты. Обратите внимание на:
  1. Excessive layout/reflow – действия, при которых браузер вынужден пересчитывать положение и размер элементов страницы.
  2. Expensive paint – затратные действия отрисовки.
  3. Compositing – действия, при которых отрисованные части страницы объединяются для выведения на экране. Это наименее ресурсоемкие процессы.

Браузеры на основе движка Chrome, предлагают вкладку «Аудит». В ней можно запустить инструмент Google Lighthouse. Он предлагает рекомендации по производительности CSS.

Онлайн-инструменты

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

  • Pingdom Website Speed Test;
  • GTmetrix;
  • Google PageSpeed ​​Insights;
  • WebPagetest;

В первую очередь выполняйте основные задачи

Код CSS может загружать объемные ресурсы, которые можно оптимизировать. Примеры:

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

Картинки являются основной причиной большого объема веб-страниц. Так что:

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

Замените картинки эффектами CSS

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

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

Рекомендации:

  1. Используйте только те шрифты, которые необходимы.
  2. Загружайте только те значения толщины и стили, которые нужны.
  3. Ограничьте наборы символов. Google Fonts может выбирать определенные символы, добавляя значение &text= к URL-адресу шрифта. Например, fonts.googleapis.com/css?family=Open+Sans&text=SitePon для выведения «SitePoint» при помощи Open Sans.
  4. Используйте вариативные шрифты, которые определяют пару толщин и стилей путем интерполяции, чтобы файлы были меньше.

Избегайте @import

Правило @import может импортировать CSS в другой файл. Например:

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

Но правила @import могут быть вложенными, так что браузер должен загружать и анализировать каждый файл последовательно.

Пару тегов <link> в HTML могут загружать файлы CSS параллельно. Это более эффективно, особенно при использовании HTTP/2:

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

Конкатенация и минимизация

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

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

Также GZIP может максимизировать сжатие, когда в файле часто используются повторяющиеся строки.

Используйте современные способы компоновки

Много лет нам приходилось использовать CSS float для верстки страниц. Но существуют более эффективные технологии:

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

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

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

Со временем CSS может раздуться по мере увеличения числа возможностей. Рекомендации по решению данной проблемы:

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

Такие инструменты, как UnCSS, могут помочь удалить избыточный программный код.

Следуйте каскаду!

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

Упростите селекторы

Упрощение селекторов уменьшит размер CSS-файлов и поможет браузеру быстрее их анализировать. Вам действительно нужен такой селектор?!

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

Остерегайтесь использования ресурсоемких свойств

Некоторые свойства работают медленнее, чем иные. К примеру, если необходимо добавить тени для всех элементов:

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

Все свойства, которые требуют перерасчета перед рендерингом страницы, потребляют больше ресурсов:

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

Применяйте CSS-анимацию

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

Избегайте анимирования ресурсоемких свойств

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

  • opacity;
  • transform.

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

Свойство will-change может указать, какой элемент будет анимирован. Так что браузер может заранее оптимизировать производительность. К примеру:

.myelement { will-change: transform;}

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

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

Применяйте SVG-изображения

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

<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;}

Стилизуйте 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 можно без проблем использовать повторно или анимировать по мере необходимости.

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

Стандартные растровые картинки JPG, PNG и GIF могут быть закодированы при помощи base64. К примеру:

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

Но это неправильный подход:

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

Несмотря на то, что выполняется меньше HTTP-запросов, это редко дает заметное преимущество, особенно по сравнению с HTTP/2-соединениями.

Критический CSS

Загрузка файла CSS блокирует рендеринг, так что производительность можно без проблем улучшить, выполнив следующие шаги:

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

Этот способ повышает производительность и может оказаться полезным для прогрессивных веб-приложений или одностраничных приложений. Преимущества могут быть менее очевидны для иных типов веб-сайтов. Причины этого:

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

Прогрессивный рендеринг

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

<head> <!-- основные стили, используемые для различных компонентов --> <link rel='stylesheet' href='base.css' /></head><body> <!-- компоненты хедера --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- основной контент --> <link rel='stylesheet' href='content.css' /> <main>  <!-- стили форм -->    <link rel='stylesheet' href='form.css' />    <form>...</form>  </main>  <!-- компонент футера -->  <link rel='stylesheet' href='footer.css' />  <footer>...</footer></body>

Каждый элемент <link> по-прежнему блокирует рендеринг, но на более короткое время. Так как файл меньше.

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

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

Научитесь любить CSS

Добавление огромного числа CSS из StackOverflow или Bootstrap может дать быстрые результаты. Но это также приведет к переполнению CSS неиспользуемым кодом.

CSS без проблем изучить, но трудно освоить. Более глубокое знание основ CSS поможет вам повысить производительность веб-сайта.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *