10 лучших советов по повышению производительности CSS
html frontend web css

10 лучших советов по повышению производительности CSS

14 ноября 2022 г.

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

1. Простые селекторы

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

НЕ делайте:

main > div.blog-section + article > * {
        /* Code here */
}

СДЕЛАТЬ:

.hero-image {
        /* Code here */
}

2. Критический встроенный CSS

Вы можете встроить важные правила CSS. Это повышает производительность за счет:

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

<style>
/* critical styles */
body { font-family: sans-serif; color: #111; }
</style>
<!-- load remaining styles -->
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="/css/main.css">
</noscript>

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

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

Правила

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

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

НЕ делайте:

/* main.css */
@import url("style1.css");
@import url("style2.css");
@import url("style3.css");

СДЕЛАТЬ:

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

4. Предварительно загрузить файлы CSS

Тег <link> предоставляет необязательный атрибут предварительной загрузки, который может начать загрузку немедленно, а не ждать реальной ссылки в HTML.

<!-- preload styles -->
<link rel="preload" href="/css/main.css" as="style" />
<!-- some code -->
<!-- load preloaded styles -->
<link rel="stylesheet" href="/css/main.css" />

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

Вместо использования единого файла 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>

6. Использовать рендеринг медиазапроса

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

<!-- core styles loaded on all devices -->
<link rel="stylesheet" href="core.css">
<!-- served to screens at least 40em wide -->
<link rel="stylesheet" media="(min-width: 40em)" href="40em.css">
<!-- served to screens at least 80em wide -->
<link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

7. Использовать изображения SVG

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

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

Пример SVG:

<svg xmlns="https://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:

.mysvgbackground {
  background: url('data:image/svg+xml;utf8,<svg xmlns="https://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;
}

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

SVG можно встраивать непосредственно в HTML-документ. Это добавляет узлы SVG непосредственно в DOM. Таким образом, все атрибуты стиля SVG можно применять с помощью CSS.

SVG в DOM:

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

Стили SVG:

circle {
  stroke-width: 1em;
}

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

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

Обратите внимание, что использование SVG в теге <img> или в качестве фонового изображения CSS означает, что они отделены от DOM, и стили CSS не будут иметь никакого эффекта.

9. Избегайте кодировки Base64

Вы можете кодировать изображения в строки base64, которые можно использовать в качестве URI данных в HTML-тегах <img> и фонах CSS.

Это уменьшает количество HTTP-запросов, но ухудшает производительность CSS:

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

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

НЕ делайте:

.background {
  background-image: url('data:image/jpg;base64,ABC123...');
}

СДЕЛАТЬ:

.svgbackground {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>');
}

10. Краткие советы

  1. Замените изображения эффектами CSS. При определении «изображения» с помощью кода CSS используется значительно меньшая пропускная способность, и его легче модифицировать или анимировать позже.
  2. Используйте современные методы компоновки — Flexbox и Сетка.
  3. Используйте анимацию CSS — переходы и анимация всегда будет быстрее, чем JavaScript.

  4. Избегайте дорогих свойств — некоторые CSS требуют больше обработки, чем другие.

  5. радиус границы

  6. тень окна
  7. текстовая тень
  8. непрозрачность
  9. преобразование
  10. фильтр
  11. позиция: фиксированная
  12. фоновый фильтр
  13. режим наложения фона

P.S. Спасибо за прочтение!

Другие статьи о фронтенд-разработке:

  1. 9 лучших советов по улучшению производительности React
  2. Некоторые маленькие секреты HTML и CSS в одной статье
  3. Вверх Менее известный HTML 5 & Советы и рекомендации по CSS 3
  4. 12 малоизвестных советов по JavaScript Рекомендации

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE