Как оптимизировать css код
Перейти к содержимому

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

  • автор:

7 советов по оптимизации CSS для ускорения загрузки страниц

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

image

Примечание от переводившего
Большая просьба снисходительно отнестись к замеченным ошибкам и сообщить о них.
Спасибо.

1. Найдите узкие места производительности

Самое главное при всех видах оптимизации — начать с тщательного аудита. К счастью, существует много инструментов для диагностики CSS, которые могут помочь Вам найти имеющиеся узкие места в производительности. Первое и самое главное, Вы можете использовать «Инструменты разработчика» в Вашем браузере, чтобы проверить, насколько быстро загружаются данные. В большинстве браузеров открыть «Инструменты разработчика» можно, нажав клавишу F12.

Например, в «Инструментах разработчика» браузера Firefox Вы можете узнать размер и время загрузки всех CSS-файлов, загружаемых на Вашей странице, используя закладку «Network». Вы также можете проверить, насколько быстро Ваши CSS-файлы загружаются с использованием или без использования кэширования. Поскольку здесь показываются внешние CSS, такие как файлы шрифтов Google Fonts и CSS-файлы, загруженные из сторонних CDN-серверов, Вы можете найти много источников, о которых даже не знали ранее

image

Pingdom Tools и Lighthouse от Google — еще два бесплатных инструмента, которые разработчики часто используют для анализа скорости сайта и производительности интерфейса. Pingdom Tools, например, даёт Вам несколько полезных советов по оптимизации CSS, при запуске простого теста скорости вебсайта.

image

2. Минифицируйте и сжимайте CSS-файлы

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

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

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

image

3. Используйте Flexbox и CSS Grid

Если при написании CSS Вы всё еще полагаетесь исключительно на традиционную блочную модель и выравниваете элементы на странице, используя margin, padding и float, Вам следует рассмотреть переход на более современные методы, именуемые Flexbox и CSS Grid. Они позволят Вам реализовывать сложные макеты гораздо меньшим количеством кода.

Используя старые подходы, Вам придется использовать много трюков и ухищрений даже для таких простых вещей, как центрирование элементов по вертикали. Однако, это не относится к Flexbox и CSS Grid. Хотя освоение новых подходов может занять некоторое время, оно стоит того, поскольку размер Ваших CSS-файлов будет намного меньше. Это особенно актуально для Flexbox, который на данный момент имеет очень хорошую поддержку браузерами (98.3% глобально).

image

Хотя CSS Grid поддерживается браузерами не так хорошо (92.03% глобально), уже можно использовать этот подход, если Вы не должны обеспечивать поддержку старых браузеров или готовы реализовать фолбек.

image

4. Используйте тег вместо правила @import

Существует два основных метода загрузки CSS-файлов на веб-страницу:

  1. добавить в раздел HTML-страницы, используя тег
  2. импортировать из других таблиц стилей, используя CSS-объявление @import

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

5. Используйте градиенты и SVG вместо изображений

Загрузка всех изображений на веб-странице может отнимать много времени. Для сокращения этого времени, разработчики используют множество методов оптимизации изображений, таких как загрузка изображений из внешнего CDN или использование инструментов сжатия изображений, таких как TinyJPG. Эти решения могут существенно помочь, однако в некоторых ситуациях использование ресурсоёмких JPG и PNG изображений можно заменить CSS-эффектами.

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

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

Для более сложных градиентов и текстур, Вы также можете использовать генераторы, такие как CSSmatic (на изображении ниже) и ColorZilla

image

Помимо градиентов, традиционные JPG и PNG изображения Вы также можете можете заменить масштабируемой векторной графикой (SVG). Она не только быстрее загружается, но также Вам требуется загрузить лишь одну версию изображения. Это обусловлено тем, что SVG-изображение может масштабироваться до любых размеров без потери качества в связи с его векторной природой. Кроме того, Вы также можете стилизовать SVG с помощью CSS, как обычный HTML-файл.

6. Избегайте правила !important

Хотя правило !important может быть настоящей находкой в определенных ситуациях, его следует использовать только в крайнем случае. Это правило создаёт исключение из каскада. То есть, когда Вы добавляете !important в CSS-объявление, оно переопределяет любые другие объявления, даже те, которые имеют большую специфичность. Вот как выглядит его синтаксис:

Если в CSS присутствует много правил !important, браузер пользователя должен будет проводить дополнительные проверки в коде, что может дополнительно замедлить страницу. Хорошим тоном считается никогда не использовать !important для всего сайта или при создании темы или плагина. Если есть возможность, используйте это правило только в ситуациях, когда хотите переопределить CSS из сторонней библиотеки.

7. Рефакторинг CSS

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

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

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

Также не забудьте использовать систему контроля версий, такую как Git. В этом случае, если что-то пойдет не так, Вы сможете вернуться к предыдущей версии кода.

Подводя итоги

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

Кроме лучших практик оптимизации CSS, Вы можете использовать и другие техники ускорения загрузки, такие как кэширование, Google AMP и HTTPS протокол. Если Вы хотите узнать о них больше, можете также ознакомиться с нашей статьей 10-step guide to improve website loading speed.

Оптимизация кода

Оптимизированный html и css код

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

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

Решать данную проблему необходимо в первостепенном порядке, при начале работ по продвижению сайта. Что же для этого делается?

Оптимизируется объем исходного кода страниц

Не секрет, что меньший объём кода, загружается значительно быстрее, работать с ним приятнее, проще искать ошибки. При этом и поисковый робот затратит меньшее время для ознакомления со страницей посредством её сканирования, а скорость загрузки — один из немаловажных факторов ранжирования в поисковых системах. Для первоначальной оптимизации кода нужно вынести все повторяющиеся стили текстов, div-контейнеров и других элементов страницы в CSS стили и назначать их при помощи тегов class, style или id.

Выполняется уход от импорта кодов в таблице стилей

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

Ведётся беспощадная борьба с пустым кодом на страницах и неиспользуемыми стилями в CSS

При непрофессиональном ведении сайта очень часто приходиться наблюдать постепенное «захламление» странницы, особенно если пользователь её часто редактирует, пустым кодом, крайне негативно отражающемся, как на скорости загрузки, так и на валидности самой страницы. Ошибки такого плана, обычно возникают вследствие работы с редактором текста CMS без использования html-источника. В результате страница переполняется пустыми тегами типа:

и другими бесполезными и даже вредными тегами.

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

Ищутся и устраняются ошибки в HTML коде

Ни одна из поисковых систем никогда не выдаст страницу с кучей ошибок в коде, не оптимизированную или с очень низкой валидностью на хорошие позиции в естественной выдаче. Особенно данное правило касается самых крупных, а поэтому интересных для занятия их ТОП поисковиков: Яндекс и Гугол.

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

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

При этом, не стоит слишком фанатично относится к наличию ошибок в коде сайта, как таковых. Действительно, частенько встречаются не критические ошибки и даже самые крупные игроки не хотят тратить время и средства для их устранение и получения 100% валидности. Например, на главной странице Яндекса десять ошибок и пять предупреждений, а Гугол хвастает и вовсе двадцатью тремя ошибками при тех же пяти предупреждениях.

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

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

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

Что такое CSS-код

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

Это и есть CSS-код, который обычно хранится в файле style.css (иногда он может иметь другое название). Style.css содержит большое количество селекторов и отвечает за внешнее редактирование страниц сайта.

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

Как уменьшить размер CSS-кода

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

Самый быстрый способ уменьшить CSS-код — использовать специальные инструменты. Например, CssCompressor. Вставьте содержимое файла style.css в пустое поле и выберите степень сжатия кода.

Уровень Highest приведет к тому, что код трансформируется в единую очень длинную строку. Для сервера это плюс, так как ему будет проще считать информацию в таком виде. Но если вам понадобится отредактировать код, найти нужный элемент будет сложно.

Так выглядит поле для вставки кода до сжатия:

Так выглядит код до и после максимального сжатия:

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

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

Если после сокращения все работает нормально, можно приступать к ручной обработке стилей. Альтернативные инструменты для уменьшения кода: CSSResizer, Refresh-SF, CSSMinifer.

Как сократить размер CSS-кода еще больше

Для ручной чистки команд в файле style.css необходимо разбираться в технической оптимизации. Одна ошибка может привести к неправильному отображению стилей на страницах сайта.

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

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

После проверки страниц сайта на правильность загрузки скриптов и контента удалите скопированные строки из старых классов.

Еще один метод ручной чистки подразумевает тщательную проверку каждого класса:

Откройте файл style.css через программу Notepad++ или другой текстовый редактор.
Выделите нужный идентификатор, нажмите «Поиск» и «Найти в файлах».
В резервной копии сайта выберите папку с вашей темой, нажав на кнопку с троеточием.
Нажмите кнопку «Найти все». Перед вами откроется окно с найденными совпадениями:

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

При отсутствии совпадений или их мизерном количестве проверяемый идентификатор можно удалить со всеми его значениями. На скриншоте найдено одно совпадение. Значит строки 99-104 можно смело чистить.

Дополнительные способы сокращения CSS-кода

Удалить комментарии — подсказки, которые были созданы при написании кода — или заменить их на краткие версии.

Очистить строки от пробелов, оставляя код пригодным для чтения и редактирования.
Упростить команды определения оттенков. Например:
Оптимизировать отступы в строках:
Заключение

CSS-код представляет файл со списком селекторов для отображения внешнего вида страниц сайта. Размер шрифта, тональность фона, цвет рамок — все это определяется файлом style.css. Оптимизировать его величину можно ручным или автоматическим способом.

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

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

Наиболее эффективный способ сокращения CSS — использование препроцессоров, таких как Sass, Less, Stylus. С их помощью код становится более читабельным.

Эта статья — часть модуля «Аудит сайта» в Serpstat

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

Рефакторинг CSS: Оптимизация размера и производительности (часть 3)

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

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

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

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

Оптимизация размера файла стилей

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

Оптимизация и минификация

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

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

/* До - исходный и неоптимизированный код */ 
.container
padding: 24px 16px 24px 16px;
background: #222222;
>

/* После - оптимизированный код с форматированием */
.container
padding: 24px 16px;
background: #222;
>

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

/* Перед - оптимизированный код с форматированием */ 
.container
padding: 24px 16px;
background: #222;
>

/* После - оптимизированный и минифицированный код */
.containerpadding:24px 16px;background:#222>

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

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

Оптимизация медиа-запросов

Когда при написании медиа-запросов в CSS мы используем несколько файлов (PostCSS или Sass), обычно не вкладываем код в один медиа-запрос для всего проекта. Для улучшения сопровождаемости, модульности и структуры кода мы обычно пишем одни и те же выражения медиа-запросов для нескольких компонентов CSS.

Рассмотрим следующий пример неоптимизированной кодовой базы CSS.

.page  
display: grid;
grid-gap: 16px;
>

@media (min-width: 768px)
.page
grid-template-columns: 268px auto;
grid-gap: 24px;
>
>

/* . */

.products-grid
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 16px;
>

@media (min-width: 768px)
.products-grid
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
>
>

Как видите, у нас повторяется @media (min-width: 768px) для каждого компонента, что улучшает читаемость и сопровождение. Запустим оптимизацию и минификацию на этом примере кода и посмотрим, что получится.

.pagedisplay:grid;grid-gap:16px>@media (min-width: 768px).pagegrid-template-columns:268px auto;grid-gap:24px>>.products-griddisplay:grid;grid-template-columns:repeat(2,1fr);grid-gap:16px>@media (min-width: 768px).products-gridgrid-template-columns:repeat(3,1fr);grid-gap:20px>>

Это может быть немного сложно для чтения, но все, что нам нужно заметить, — это повторяющийся медиа-запрос @media (min-width: 768px) . Мы уже пришли к выводу, что хотим сократить количество символов в таблице стилей и можем вложить несколько селекторов в один медиа-запрос, так почему же минификатор не удалил дублирующееся выражение? На это есть простая причина.

Порядок правил в CSS имеет значение, поэтому для объединения дублирующихся медиа-запросов необходимо переместить блоки кода. Это приведёт к изменению порядка правил, что может вызвать нежелательные побочные эффекты в стилях.

Однако объединение медиа-запросов потенциально может сделать размер файла ещё меньше, в зависимости от кодовой базы и структуры. Такие инструменты и пакеты, как postcss-sort-media-queries, позволяют удалить дублирующиеся медиа-запросы и ещё больше уменьшить размер файла.

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

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

Удаление неиспользуемого CSS кода

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

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

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

Избавление от блокирующего рендеринг CSS

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

Пример блокирующего рендеринг CSS с зависимостью таблицы стилей и файла шрифта.

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

За последние несколько месяцев показатель Largest Contentful Paint (LCP) стал важной метрикой. LCP важен не только для производительности, но и для SEO — сайты с лучшими показателями LCP лучше ранжируются в результатах поиска. Удаление блокирующих рендеринг ресурсов, таких как CSS, является одним из способов повышения показателя LCP.

Однако если отложить загрузку и обработку таблицы стилей, то это приведёт к появлению Flash Of Unstyled Content (FOUC) — содержимое будет отображаться пользователю сразу, а стили будут загружены и применены несколько мгновений спустя. Такое переключение может выглядеть неожиданно и даже сбить с толку некоторых пользователей.

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

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

Этот CSS встраивается в HTML под тегом style , поэтому стили загружаются и анализируются вместе с HTML-файлом. Хотя это приведёт к некоторому увеличению размера HTML-файла (который также должен быть минифицирован), все остальные некритичные CSS будут отложены и не будут загружаться сразу, и сайт будет отображаться быстрее. В целом, преимущества перевешивают увеличение размера HTML-файла.

head> 
style type="text/css"> style>
head>

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

Откладывание стилей

Как именно сделать CSS неблокируемым? Мы знаем, что на него нельзя ссылаться в элементе HTML head при первой загрузке HTML-страницы. Этот способ описал в своей статье Demian Renzulli.

В HTML не существует (пока) встроенного подхода для оптимизации или откладывания загрузки блокирующих рендеринг ресурсов, поэтому нам необходимо использовать JavaScript для вставки некритичных таблиц стилей в HTML-разметку после первоначального рендеринга. Также необходимо убедиться в том, что эти стили будут загружены неоптимальным (блокирующим рендеринг) способом, если пользователь посещает страницу с отключённым JavaScript в браузере.

  
link rel="preload" as="style" href="path/to/stylesheet.css" onload="this.onload=null;this.rel='stylesheet'">


noscript>
link rel="stylesheet" href="path/to/stylesheet.css">
noscript>

С помощью ссылки rel=»preload» as=»style» обеспечивается асинхронный запрос файла таблицы стилей, а JavaScript-обработчик onload обеспечивает загрузку и обработку файла браузером после завершения загрузки HTML-документа. Для того чтобы эта функция не выполнялась несколько раз и не вызывала ненужных повторных рендеров, необходимо произвести очистку, поэтому для onload нужно установить значение null .

Именно так работает Smashing Magazine со своими таблицами стилей. Каждый шаблон (главная страница, категории статей, страницы статей и т.д.) имеет специфический для шаблона критический CSS, встроенный в тег style HTML в элементе head , и отложенную таблицу стилей main.css , которая содержит все некритические стили.

Однако вместо переключения параметра rel здесь мы видим, как медиа-запрос переключается с автоматически отложенного низкоприоритетного print медиа на высокоприоритетный атрибут all после завершения загрузки страницы. Это альтернативный, не менее жизнеспособный подход к отсрочке загрузки некритичных таблиц стилей.

link href="/css/main.css" media="print" onload="this.media='all'" rel="stylesheet">

Разделение и условная загрузка стилей с помощью медиа-запросов

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

link href="print.css" rel="stylesheet" media="print"> 
link href="mobile.css" rel="stylesheet" media="all">
link href="tablet.css" rel="stylesheet" media="screen and (min-width: 768px)">
link href="desktop.css" rel="stylesheet" media="screen and (min-width: 1366px)">

Таким образом, если используется подход mobile-first, то стили для экранов большего размера не будут загружаться и разбираться на мобильных устройствах, которые могут работать в медленных или ненадёжных сетях.

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

Откладывание загрузки файлов шрифтов и стилей

Откладывание таблиц стилей шрифтов (например, файлов Google Font) также может быть полезно для начальной производительности рендеринга. Мы пришли к выводу, что таблицы стилей блокируют рендеринг, но и файлы шрифтов, на которые ссылается таблица стилей, тоже. Файлы шрифтов также вносят значительную долю накладных расходов в начальную производительность рендеринга.

Загрузка таблиц стилей и файлов шрифтов — сложная тема, и для того, чтобы объяснить все возможные подходы, потребовалась бы целая новая статья. К счастью, Zach Leatherman описал множество эффективных стратегий в этом замечательном исчерпывающем руководстве и обобщил плюсы и минусы каждого подхода. Если вы используете шрифты Google Fonts, Harry Roberts описал стратегию для наиболее быстрой загрузки шрифтов Google Fonts.

Если вы решите отсрочить таблицы стилей шрифтов, то в результате получите Flash of Unstyled Text (FOUT). Первоначально страница будет отображаться с резервным шрифтом до тех пор, пока не будут загружены и разобраны файлы отложенных шрифтов и таблицы стилей, после чего будут применены новые стили. Это изменение может быть очень заметным и, в зависимости от конкретного случая, может вызвать смещение макета и запутать пользователей.

Barry Pollard описал некоторые стратегии, которые могут помочь нам справиться с FOUT, и рассказал о готовящейся функции CSS size-adjust, обеспечивающей более простой и естественный способ борьбы с FOUT.

Оптимизации на стороне сервера

Сжатие HTTP

В дополнение к минификации и оптимизации размера файлов, статических активов, таких как HTML, CSS-файлы, JavaScript-файлы и т.д. Для дополнительного уменьшения размера загружаемых файлов можно использовать алгоритмы сжатия HTTP, такие, как Gzip и Brotli.

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

Кэширование таблиц стилей

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

Управление кэшированием может осуществляться с помощью HTTP-заголовка Cache-Control на уровне сервера (например, с помощью файла .htaccess на сервере Apache).

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

Cache-Control: public, max-age=604800

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

Cache-Control: public, max-age=604800, immutable

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

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

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

  • Добавление строки запроса к имени файла. Например, styles.css?v=1.0.1 . Однако некоторые CDN могут полностью игнорировать или удалять строку запроса из имени файла, в результате чего файл застревает в кэше пользователя и никогда не обновляется.
  • Изменение имени файла или добавление хэша. Например, styles.a1bc2.css или styles.v1.0.1.css . Это более надёжно и эффективно, чем добавление строки запроса к имени файла.

CDN или собственный хостинг

Сеть доставки контента (CDN) — группа географически распределённых серверов, которые обычно используются для надёжной и быстрой доставки статических активов, таких как изображения, видео, HTML-файлы, CSS-файлы, файлы JavaScript и т.д.

Хотя CDN могут показаться отличной альтернативой самостоятельному размещению статических ресурсов, Harry Roberts провёл глубокое исследование на эту тему и пришёл к выводу, что самостоятельное размещение ресурсов более выгодно с точки зрения производительности.

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

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

Аудит размера и производительности CSS-файлов

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

Давайте проведём аудит производительности сайта, упомянутого в первой статье цикла, — сайта с 2 МБ минифицированного CSS.

Для начала посмотрим на разбивку контента, чтобы определить, какие ресурсы занимают наибольшую пропускную способность. Из приведённых ниже графиков видно, что больше всего запросов приходится на изображения, что означает необходимость их «ленивой» загрузки. Из второго графика видно, что наибольший размер имеют файлы стилей и JavaScript. Это верный признак того, что эти файлы необходимо либо минифицировать и оптимизировать, либо провести рефакторинг, либо разбить на несколько файлов и загружать их асинхронно.

Разбивка содержимого по типу MIME (при первом просмотре).

Ещё больше выводов мы можем сделать на основе графиков Web Vitals. Взглянув на график Largest Contentful Paint (LCP), мы можем получить подробный обзор ресурсов, блокирующих рендеринг, и того, насколько сильно они влияют на начальный рендеринг.

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

График для Largest Contentful Paint, который происходит за 8561 мс.

Заключение

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

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

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

Части цикла статей Рефакторинг CSS

  1. Часть 1: Рефакторинг CSS: Введение
  2. Часть 2: Рефакторинг CSS: Стратегия, регрессионное тестирование и сопровождение
  3. Часть 3: Рефакторинг CSS: Оптимизация размера и производительности

Ссылки

  • Render Blocking CSS Ilya Grigorik
  • Откладывание некритичных CSS Demian Renzulli
  • A Comprehensive Guide To Font Loading Strategies Zach Leatherman
  • A New Way To Reduce Font Loading Impact: CSS Font Descriptors Barry Pollard
  • Self-Host Your Static Assets Harry Roberts
  • Оптимизация загрузки и рендеринга веб-шрифтов Ilya Grigorik

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

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