Минификация CSS или как ускорить ваш сайт. Часть 1

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

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

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

Что такое минификация CSS

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

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

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

Рассмотрим CSS-код в примере ниже:

/* heading elements */

body {

    color: #33475b

}

h1 {

    font-size: 2rem;

    font-weight: 700;

    line-height: 2.75rem

}

h2 {

    font-size: 1.625rem;

    font-weight: 700;

    line-height: 2.25rem

}

h3 {

    font-size: 1.5rem;

    font-weight: 500;

    line-height: 2.125rem

}

/* other elements */

p, span {

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.75rem

}

blockquote {

    font-size: 1.5rem;

    font-weight: 400;

    line-height: 2.375rem

}

ol, ul {

    list-style: none

}

table {

    border-collapse: collapse;

    border-spacing: 0

}

button {

    appearance: none;

    font: inherit;

    margin: 0

}

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

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

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

Вот как выглядит CSS-код после минификации:

body{color:#33475b}h1{font-size:2rem;font-weight:700;line-height:2.75rem}h2{font-size:1.625rem;font-weight:700;line-height:2.25rem}h3{font-size:1.5rem;font-weight:500;line-height:2.125rem}p,span{font-size:1rem;font-weight:400;line-height:1.75rem}blockquote{font-size:1.5rem;font-weight:400;line-height:2.375rem}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}button{appearance:none;font:inherit;margin:0}

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

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

Зачем минимизировать CSS

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

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

Есть две основные причины минификации CSS. Рассмотрим подробнее каждую из них:

1. Для файлов меньшего размера нужно меньше времени и ресурсов, чтобы извлечь и сжать их на исходном сервере, отправить клиенту и загрузить браузером.
2. Вторая причина связана с отображением страницы веб-сайта в браузере. Как только браузер загружает страницу, он анализирует ее HTML-файл сверху вниз перед отображением. Когда браузер сталкивается со ссылкой на внешний файл CSS, он приостанавливает синтаксический анализ HTML для обработки внешнего кода CSS. Пользователи не видят содержимое страницы, пока браузер не обработает все связанные CSS. Вот почему CSS называют ресурсом «блокировки рендеринга».

^{Источник: hubspot.com}