Как оптимизировать css код

Оптимизировать CSS код

Хочу оптимизировать CSS и применить background-repeat:repeat; один раз, чтобы не повторять к каждому коду. Хочу заметить, что «.post-» это публикация-пост и мне приходится в ручную в CSS файле, для нужных мне публикаций прописывать background. Как правильно будет выглядеть код?

Отслеживать
задан 25 янв 2019 в 11:59
97 1 1 серебряный знак 9 9 бронзовых знаков

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

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

body *[class^="post-"] body *[ID^="post-"]

данная запись означает применить стиль всем элементам, чей класс|ID НАЧИНАЕТСЯ c «post-» .

Для специфичности (мало ли, у вас не только нужные блоки имеют класс с таким же префиксом) можно указать более специфичным селектором, типа

body .post-content div[class^="post-"]

Отслеживать
ответ дан 25 янв 2019 в 13:18
Инквизитор Инквизитор
5,935 1 1 золотой знак 6 6 серебряных знаков 25 25 бронзовых знаков
@ИнквизиторЯ подкорректировал вопрос, а то что-то не те ответы, что нужно.
25 янв 2019 в 15:52

1) классы по определению разные И

2) селектор вида *[class^=»post-«] <. >применять нельзя (например, у вас помимо нужных элементов присутствуют такие, которые трогать нельзя) И

3) x-путь для этих элементов тоже разный (т.е., задать стиль для них и только для них путем указания чего-то наподобие body .content .topic > .post-container > .post-header + div + div > div:first-child нельзя),

тогда все, что вы можете сделать, это оптимизировать конструкции для каждого поста отдельно путем объединения записи свойств background-image и background-repeat в общее свойство background . Короче будет.

Как оптимизировать CSS?

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

Как и оптимизация программного кода, оптимизация CSS нужна для ускорения загрузки страниц и экономии трафика. Поскольку файл CSS весит до 100 кб, многие не поймут всей важности его оптимизации, но если подсчитать, сколько времени и трафика можно сэкономить на оптимизированном файле в год, вы поймёте, насколько её недооценивали.

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

Во-первых, обязательно используйте обобщённые свойства. Вы можете сэкономить несколько строчек, если вместо margin-bottom, margin-left, margin-right и margin-top будете использовать один margin со значениями четырёх предыдущих, например: body < margin: 10px 2px 10px 5px; >.

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

Никто не сомневается в важности комментариев. Устранив их полностью, вам будет сложнее найти нужную часть кода без плагина Firebug. Но не стоит забывать, что львиную долю содержимого файла style.css занимают именно они. Для того, чтобы исправить это недоразумение, рекомендуется использовать более краткие описания. К примеру, вместо ///* длинного лирического отступления */// можно использовать запоминающееся /* Logo */.

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

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

Среди российских сервисов достойные результаты показал оптимизатор CSS на сайте CY-PR.com. Его функционал практически не отличается от CleanCSS. При стандартных настройках коэффициент сжатия может достигать 25%, при максимальных — свыше 30%. К несчастью, отсутствует экспорт в файл.

Другие сервисы описывать не имеет смысла, так как работают они по той же схеме, что и вышеупомянутые CleanCSS.com и CY-PR.com, но они есть и вполне работоспособны.

Улучшаем производительность сайта с помощью CSS

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

• CSS блокирует рендеринг: каждый и @import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;
• CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;
• Код CSS со временем может разрастаться. Выявление неиспользуемых стилей может быть сложной задачей, а их удаление может привести к хаосу, но разработчики выбирают лёгкий путь и добавляют больше свойств. Таблица стилей становится всё больше. Отсюда вывод: чем больше файл, тем дольше время загрузки и обработки.

Следующие советы помогут вам оптимизировать ваш CSS код.

Используйте инструменты анализа производительности CSS

Все браузеры предлагают панель DevTools, которая обычно открывается из меню «Дополнительные инструменты» или с помощью сочетаний клавиш Ctrl | Cmd + Shift + i или F12. Панель «Network» — отличное место для начала. После обновления она показывает диаграмму загрузок ресурсов.

Более длинные полосы выделяют ресурсы с медленной загрузкой или блокировкой рендеринга (белые полосы).

Панель Lighthouse, доступная в Chrome, Edge, Opera и т.д, может оценивать показатели вашего сайта и предлагать рекомендации по производительности. Также браузеры предоставляют панель «sources», помогающую найти неиспользуемые CSS свойства, отмеченные красной рамкой.

Учтите несколько вещей:

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

Большинство DevTools предлагают панель производительности. В основном она используется для оценки JavaScript, но может определить пики загрузки ЦП и макета при изменении CSS.

Топ онлайн инструментов которые подскажут вам об улучшении CSS:

Улучшаем перфоманс не касаясь кода CSS

• Перейти на более удобный и быстрый хостинг или возможность использовать сеть CDN;
• Активный HTTP/2 и выше;
• Включить GZIP или лучшее сжатие;
• Убедитесь, что ваши браузеры могут кэшировать ваш CSS, установите соответствующие заголовки HTTP, такие как Expires , Last-Modified .

Предварительно загрузите таблицы стилей

Тег позволяет запускать CSS загрузку до того, как на неё будет сделана ссылка. Это может быть удобно, когда ссылки на таблицы стилей идут после других ресурсов или у вас есть @import .

     < !-- preload CSS file -->  

Главное — не злоупотребляйте предзагрузкой. Если загружать всё подряд, то ваш сайт не станет быстрее волшебным образом, а наоборот.

Удалите неиспользуемые стили и файлы

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

Используйте шрифт ОС

Использование шрифтов ОС поможет сэкономить сотни килобайт и избежать таких проблем, как мигание нестилизованного или просто текста.

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

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

Размещайте файлы шрифтов локально

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

Web Open Font Format 2.0(WOFF2) — единственная версия файла, которая вам нужна. Поддерживается всеми браузерами, в том числе новыми. Вы также должны определить соответствующий font-display параметр загрузки в вашем CSS.

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

• swap — использует первый резервный шрифт OC, пока шрифт не станет доступным. Текст всегда читается, но мигание нестилизованного текста может раздражать, если два набора символов разного размера.
• fallback — компромисс между FOIT и FOUT. Текст невидим около 100 мс. Затем используется веб‑шрифт, если он доступен. Если нет, он возвращается к swap
• optional — тот же, что и fallback и после загрузки веб‑шрифта, но замена шрифта не происходит. Он появляется при загрузке следующей страницы.

Используйте HTML вместо CSS @import

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

@import url("main.css"); @import url("base.css"); @import url("footer.css");

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

Объединяйте и минимизируйте свои таблицы стилей

HTTP/2 лучше обслуживает несколько таблиц стилей, чем HTTP/1. Но для одного файла требуется один заголовок и его можно сжимать и кэшировать более эффективно. Вы можете использовать любое количество файлов во время разработки, но используйте шаг сборки для объединения и минимизации в единую таблицу стилей. Такие инструменты как препроцессор SASS и PostCSS, помогут вам в этом случае.

Используйте современные CSS Layouts

Старые методы расположения элементов на странице, например, float или table , сложны в управлении и требуют большего количества кода для управления интервалами и медиа‑запросами. Если они есть в вашем проекте, то пришло время переключиться на:

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

Замените изображения CSS эффектами

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

Никогда не используйте растровые изображения в кодировке base64

Вы можете встроить изображения в CSS, используя кодировку в base64, которые преобразуют пиксели в текстовые символы.

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

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

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

Стилизуйте SVG с помощью CSS

Часто SVG код вставляют прямо в HTML. Покажу на примере:

• Удалить атрибут стиля SVG из вашего HTML;
• Использовать одно и то же изображение с разными стилями для разных разделов или страниц;
• Анимировать.

circle

Будьте осторожны с CSS фреймворками

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

• Фреймворки могут содержать значительный объем кода, но вы, вероятно, используете лишь небольшую часть стилей. По возможности убедитесь, что вы используете только те функции, которые вам нужны;
• Может быть сложно переопределить стили фреймворка, когда они представляют собой не совсем то, что вам нужно. По итогу выйдет, что вы используете два набора стилей, а нужно было один.

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

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

А ещё следите за новыми селекторами, которые помогут преобразовать селекторы следующим образом:

article section.primary:not(:first-child) h1, article section.primary:not(:first-child) h2, article section.primary:not(:first-child) p, article section.secondary:not(:first-child) h1, article section.secondary:not(:first-child) h2, article section.secondary:not(:first-child) p

Такой же вариант, но только с новым селектором:

article section:not(:first-child):where(.primary, .secondary) :where(h1, h2, p)

Используйте CSS-переходы и анимацию

Переходы и анимация на CSS будут более плавными, чем эффекты на основе JavaScript, которые изменяют те же свойства. Однако лучше избегать анимации свойств, вызывающих изменения размеров элементов ( width , height , padding , border ) или положение ( top , bottom , left , right , margin ). Это может привести к перерисовке всей страницы в каждом кадре анимации.

Эффектные свойства анимации включают в себя:

• opacity : прозрачность;
• filter : размытие, контраст и т.д;
• transform : перемещение, поворот и т. д.

Используйте will-change при необходимости

Свойство will-change позволяет заранее сообщить браузеру об изменениях (анимациях, перемещениях) которые могут произойти с элементом. Так браузер успеет оптимизировать выполнение этих изменений, до того как это произойдет.

Чтобы включить will-change , нужно добавить следующее правило для элемента, который будет изменяться. Пример:

• auto — не указывает никакого конкретного свойства, браузер будет работать как обычно. Значение по умолчанию.
• scroll-position — указывает, что ожидается изменение положения элемента при прокрутке страницы. Браузер заранее готовится и отрисовывает содержимое за пределами видимой части страницы.
• contents — указывает, что ожидается изменение содержимого элемента. Браузер ограничивает или полностью прекращает кэширование элемента и отрисовывает его с нуля при каждом изменении его содержимого.

• Не стоит использовать will-change для большого числа элементов. Браузер и так пытается максимально оптимизировать работу страницы. Если заставить его отслеживать все возможные изменения элементов, это вызовет больший расход ресурсов и может замедлить работу.
• will-change — используется как крайнее средство, если есть видимые задержки в работе сайта;
• will-change — необходимо включать до изменения состояния элемента. Если применить свойство в процессе изменения состояния, оно не успеет сработать и не даст никакого эффекта;
• will-change лучше назначать через JS, так как можно его отключать после завершения изменения элемента.

Такой код не сработает:

/* Изменение элемента происходит при наведении курсора */ .element:hover < /* нужно подготовиться к изменению, которое уже происходит, код не сработает */ will-change: transform; transition: transform 2s; transform: rotate(30deg) scale(1.5); >

Если изменение происходит при наведении курсора на элемент, то можно включать will-change при наведении на родительский элемент.

.element < transition: opacity 0.3s linear; >/* включаем will-change для элемента, когда мышка наводится на его родительский элемент */ .parent:hover .element < will-change: opacity; >/* применение изменения, когда мышка наведена на элемент */ .element:hover

Обработка HTTP заголовка Save-Data

Заголовок HTTP Save‑Data указывает, что пользователь запросил сокращенные данные. Браузеры могут отмечать эту опцию как «lite» или «turbo» режим. Когда она включена, Save‑Data заголовок отправляется с каждым запросом браузера.

GET /main.css HTTP/2.0 Host: mysite.com Save-Data: on

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

Клиентский JavaScript тоже может обнаружить эту Save‑Data опцию. Следующий код добавляет класс к элементу, когда Save‑Data не включен.

if ('connection' in navigator && !navigator.connection.saveData)

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

/* no hero image by default */ header < background-color: #ceb; background-image: none; >/* hero image when Save-Data is not enabled */ .fullUX header

Медиа‑запрос prefers-reduced-data предлагает альтернативу только на CSS, но пока не поддерживается ни в одном браузере. Пример:

header < background-color: #ceb; background-image: none; >@media (prefers-reduced-data: no-preference) < header < background-image: url('bigimg.jpg'); >>

Рассмотрите критический встроенный CSS

Есть некоторые инструменты, например, Lighthouse, который может порекомендовать вам «встроить критический CSS».

• Определение основных стилей, используемых элементами в верхней части страницы, которые видны при загрузке страницы;
• Загрузка оставшегося CSS асинхронно, чтобы избежать блокировки рендеринга.

В следующем примере оставшийся CSS загружается в виде « print » таблицы стилей, которую браузер загружает асинхронно с более низким приоритетом. Код onload переключает его обратно на стандартную таблицу стилей для всех носителей после его загрузки. Гарантирует , что он ещё загружается, если JavaScript не включён. Пример:

body

Этот метод заметно повышает производительность и может нести пользу сайтам или одностраничным приложениям.

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

Создайте таблицы стилей для устройств

Единая (встроенная) таблица стилей, содержащая код для всех устройств, удобна для большинства сайтов. Однако если ваша кодовая база велика или дизайн мобильных и десктопных приложений значительно различается, вы можете создать таблицы стилей для конкретных устройств. Пример:

Contain CSS

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

Свойство contain поддерживает одно и несколько следующих значений в списке, разделенном пробелами:

• none : нет сдерживания (по умолчанию);
• layout : изолировать элемент от остальной части страницы: его содержимое не повлияет на расположение других элементов;
• paint : обрезать элемент до определённого размера без видимого переполнения;
• size : встроенные и блочные размеры элемента не зависят от содержимого — нет необходимости вычислить размер дочерних элементов;
• inline-size : аналогично size , но применяется только к встроенным размерам.

Ещё доступны два конкретных значения:

• strict : применить все правила сдерживания, кроме none ;
• content : применить layout и paint .

Рассмотрим такой пример: есть большой список ul , на нем установлен contain: strict ;. При изменении содержимого любого дочернего li элемента браузера он не будет пересчитывать размер или положение этого элемента, других элементов в списке или любых элементов на странице. Рендеринг быстрее.

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

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

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

Вы можете использовать нативные веб‑компоненты или ссылаться на меньшие файлы CSS непосредственно перед тем, как компонент появится в вашем HTML. Пример:

     
header content
   
title
  
widget content
 
   

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

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

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

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

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

• По умолчанию CSS компонента отвечает за его стиль. Он загружается и кэшируется только тогда, когда этот компонент используется;
• Компонентный CSS может быть более лаконичным, чем страничный CSS, потому что ему не нужны сложные или специфические для размещения селекторы.

Компоненты могут отображать теневые :part элементы, поэтому возможны ограниченные внешние стили.

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

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

• Организуйте свой CSS в файлы меньшего размера с отдельными функциями, например, верхний и нижний колонтитулы, элементы формы, таблицы и меню;
• Автоматизируйте процесс сборки для создания единой таблицы стилей и автоматического обновления с помощью такого инструмента, как Browsersync;
• Документируйте свой код;
• Используйте инструменты linting и браузерные DevTools, чтобы убедиться, что вы установили допустимые свойства и значения;
• Реализовывайте переиспользуемые компоненты, стили и т.д.

Заключение

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

• css
• css-фреймворк
• производительность
• производительность сайта

• Блог компании Usetech
• CSS

Как писать правильный оптимизированный CSS?

И это только верхушка айсберга. Мы используем препроцессор SASS, возможно есть какие-нибудь настройки компиляции, чтобы оптимизировать css-код или отдельные утилиты под gulp?

• Вопрос задан более трёх лет назад
• 308 просмотров

4 комментария

Простой 4 комментария

Csso для gulp попробуйте, это от яндекса вроде, там есть структурная оптимизация (только все проверяйте — некоторые свойства оптимизации могут ломать верстку)

Dubrovin @Dubrovin Автор вопроса

Konstantin Abaiev, спасибо! тоже уже наткнулся на CSSO.
А не знаете есть ли какой нибудь линтер для SCSS под PHPStorm ?

Dubrovin, насчет линтеров не подскажу
pavelkunyavskiy @pavelkunyavskiy
Ох ты ж божечки, вот это чудо-оптимизация, бугагашечка.
Решения вопроса 1
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Dubrovin @Dubrovin Автор вопроса
Спасибо за отличную статью!
Ответы на вопрос 4

это не совсем одно и то же. Свойство font неизменно изменит все 3 атрибута, в то время как font-weight, font-size и font-family изменят по одному, не повлияв на другие 2. То есть если вам нужно, грубо говоря, инициализировать отображение, стоит начать со свойства font, но если в какой-то момент возникает необходимость переопределить значение одного лишь из свойств (модификатор какой), то тогда логичнее использовать свойства по отдельности.

В таком случае, если возникнет необходимость, скажем, изменить font-family везде, Вам не придется шарахаться по коду и искать все вхождения этого шрифта, а изменить его лишь в 1 месте. Лично я практически всегда использую второй вариант, пара лишних байт сайт не утяжелят.

Ответ написан более трёх лет назад
Нравится 1 9 комментариев
Dubrovin @Dubrovin Автор вопроса

Спасибо за ответ. Да, вы правы, не совсем одно и то же, если переопределять свойства, но хотелось бы чтобы IDE подсказывала когда свойства действительно можно объединить.