От автора: в современном Интернете время загрузки страницы является одним из самых важных показателей веб-сайта. Даже миллисекунды могут оказать огромное влияние на конечный результат, а медленная загрузка страниц может легко разрушить ваши показатели конверсии. Есть много инструментов и методов, которые вы можете использовать для ускорения сайта. В этой статье мы рассмотрим лучшие советы по оптимизации CSS, которые можно использовать для повышения производительности интерфейса.
1. Найдите узкие места производительности
Самая важная вещь при всех видах оптимизации — тщательный аудит. К счастью, есть много инструментов диагностики CSS, которые могут помочь вам найти узкие места. Прежде всего, вы можете использовать DevTools веб-браузера, чтобы проверить, насколько быстро загружаются активы. В большинстве браузеров вы можете открыть DevTools, нажав кнопку F12.
Например, в Firefox DevTools вы можете проверить размер и время загрузки всех CSS-файлов, загружаемых страницей, используя вкладку Сеть. Вы также можете проверить, насколько быстро CSS загружается с кэшированием и без него. Поскольку DevTools также показывает внешний CSS, такой как файлы Google Font и ресурсы CSS, извлеченные со сторонних CDN, вы можете найти множество источников, о которых даже не знали раньше.
Pingdom Tools и Lighthouse от Google — два других бесплатных инструмента, которые часто используют разработчики для анализа скорости работы сайта и производительности интерфейса. Например, Pingdom Tools предоставит вам несколько полезных советов по оптимизации CSS, если вы запускаете простой тест скорости сайта.
2. Минимизация и сжатие файлы CSS
Большинство веб-сайтов используют несколько CSS-файлов. Хотя в большинстве случаев модульный CSS считается наилучшей практикой, загрузка всех файлов может занять некоторое время. Но это как раз та причина, по которой существуют инструменты минимизации и сжатия CSS. Если вы используете их с умом, вы можете значительно улучшить время загрузки страницы.
Существуют онлайн-инструменты, такие как CSS Minify, которые позволяют минимизировать файл CSS, скопировав его в простую форму. Этот тип инструментов может подойти для небольших проектов. Однако их использование может стать громоздким и трудоемким в случае масштабных проектов, которые поставляются с несколькими файлами CSS. В таких случаях лучше выбрать автоматизированное решение.
В наши дни большинство инструментов сборки позволяют автоматически выполнять сжатие кода. Например, Webpack по умолчанию возвращает все файлы как минимизированный пакет. PostCSS также имеет интеллектуальные плагины, такие как CSS Nano, которые не только минимизируют файлы, но и пропускают их через множество целевых оптимизаций.
3. Используйте Flexbox и CSS Grid
Если вы все еще полагаетесь только на традиционную блочную модель при написании CSS и выравниваете элементы на экране, используя поля, отступы и плавающие элементы, вам следует рассмотреть возможность использования более современных модулей макета, а именно flexbox и CSS Grid. Эти новые модели позволяют реализовывать сложные макеты с помощью гораздо меньшего количества кода.
При использовании старых методов вам нужно применять множество хитростей и настроек, даже для таких простых вещей, как центрирование элементов по вертикали. Однако с flexbox и CSS Grid все проще. Несмотря на то, что для освоения новых модулей макета может потребоваться некоторое время, оно того стоит, так как ваши CSS-файлы будут намного меньше. Это особенно верно для flexbox, который к настоящему моменту имеет довольно хорошую поддержку браузеров (в настоящее время 98,3% во всем мире).
Хотя поддержка браузерами CSS Grid ниже (в настоящее время в мире она составляет 92,03%), вы все равно можете использовать ее, если вам не требуется поддержка старых браузеров или вы хотите предоставить запасной вариант.
4. Используйте тег link вместо правил @import
Есть два основных метода, которые вы можете использовать, чтобы загружать файлы CSS на веб-страницу:
добавив их в раздел
HTML-страницы с помощью тега link,импортировать их из других таблиц стилей, используя правило CSS @import.
Вам необходимо добавить правило @import в начало основного файла CSS. В большинстве случаев оно используется для загрузки небольших ресурсов, таких как шрифты и другие элементы дизайна. Поначалу это может показаться хорошим решением, однако браузеру требуется намного больше времени для загрузки дополнительных таблиц стилей, чем когда HTML-страница загружает их напрямую с помощью тегов link.
Когда вы добавляете несколько HTML-файлов на HTML-страницу, всегда обращайте внимание на специфичность CSS. Сначала добавьте наиболее общую таблицу стилей, а затем перейдите к более конкретным. Вам нужно выполнять это таким образом, потому что таблицы стилей, которые вы добавляете позже, переопределяют правила предыдущих файлов CSS. Вот пример того, как файлы CSS добавляются в правильном порядке:
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="page.css"> <link rel="stylesheet" href="component.css">
5. Используйте градиенты и SVG вместо изображений
Загрузка всех изображений на веб-странице может занять много времени. Разработчики используют много методов оптимизации изображений, например, загрузку изображений из внешнего CDN или использование инструментов сжатия изображений, таких как TinyJPG. Эти решения могут сильно помочь, однако часто вы можете заменить ресурсоемкие изображения JPG и PNG нативными эффектами CSS.
Например, вы можете использовать градиенты вместо огромных фоновых изображений, которые могут замедлить работу браузера вашего пользователя. Вы можете использовать функции градиента CSS для создания линейных, радиальных и повторяющихся градиентов. С помощью этих встроенных функций CSS вы можете определять не только цвета, но и угол наклона.
Например, следующее правило создает красивый градиентный фон, который загружается намного быстрее, чем любые изображения:
div { background: linear-gradient(45deg, lightgreen, royalblue);
}Для более сложных градиентов и текстур вы также можете использовать генераторы, такие как CSSmatic (на изображении ниже) и ColorZilla.
Помимо градиентов, вы также можете заменить традиционные изображения JPG и PNG масштабируемой векторной графикой (SVG). SVG не только загружаются быстрее, но вам также нужно включить только одну версию изображения. Потому что SVG может масштабироваться до любого размера без потери качества из-за своей векторной природы. Кроме того, вы также можете стилизовать SVG с помощью CSS, как будто это обычный HTML-файл.
6. Избегайте правила !important
Хотя в некоторых случаях правило !important может быть подходящим решением, вы должны использовать его только в качестве крайней меры. Это правило создает исключение из каскада. Следовательно, когда вы добавляете !important в объявление CSS, оно переопределяет любые другие объявления, даже те, которые имеют более высокую специфичность. Вот как выглядит его синтаксис:
h1 { margin-bottom: 20px !important;
}Если в CSS слишком много правил !important, браузер пользователя должен будет выполнить дополнительные проверки кода, что может значительно замедлить страницу. Как правило, никогда не используйте !important для CSS сайта или при создании темы или плагина. Если возможно, используйте его, только если вы хотите переопределить CSS из сторонней библиотеки.
7. Рассмотрите рефакторинг CSS
Хотя рефакторинг CSS редко бывает простой задачей, существует много случаев, когда он может значительно улучшить производительность сайта. Например, когда ваши CSS-файлы слишком велики, или вы унаследовали кодовую базу, или у вас медленное время загрузки страницы, которое серьезно ухудшает показатели конверсии. Цель CSS-рефакторинга — сделать ваш код более чистым, более простым в обслуживании и быстрее загружаемым.
Рефакторинг CSS — это многошаговый процесс, в ходе которого вам нужно проанализировать каждый аспект базы кода CSS. Вам нужно проверить несколько вещей, таких как:
есть ли у вас какие-либо неиспользуемые или дублирующие правила или ресурсы CSS,
можете ли вы использовать более современные методы, такие как flexbox и CSS grid,
используете ли вы слишком много специфичности (вы можете рассчитать это с помощью калькулятора визуальной специфичности),
разумна ли структура ваших CSS-файлов (например, легче поддерживать файлы меньшего размера, чем большие),
стоит ли использовать автоматизированный инструмент для сборки,
и много других.
Прежде чем приступить к рефакторингу, также установите измеримые цели и выберите критерии, которые вы будете использовать, такие как время загрузки страницы или время до первого отображения, чтобы вы могли сравнить их значения до и после.
Также не забудьте использовать инструмент контроля версий, такой как Git. Таким образом, если что-то пойдет не так, вы можете вернуться к предыдущей версии кода.
Завершение
Есть много советов по оптимизации CSS, которые вы можете использовать для повышения производительности своего сайта. Большинство из них просты в реализации, но могут оказать значительное влияние на время загрузки страницы. Более быстрая загрузка страниц не только улучшает пользовательский опыт, но и помогает получить более высокий рейтинг в Google и других поисковых системах.
Помимо рекомендаций по оптимизации CSS, вы можете использовать множество других методов для повышения скорости загрузки, таких как кэширование, Google AMP и протокол HTTPS.
Источник: https://onextrapixel.com
Редакция: Команда webformyself.