Categories: CSS

Прискорюємо свій CSS

Ви коли-небудь думали про розмір файлів CSS-стилів на своєму сайті? Адже якщо ці файли мають велику вагу, це негативно позначиться на завантаженні (відображенні) сторінки.

Хоча CSS-файли сайту в основному важать небагато, вони дуже важливі в момент завантаження сайту в браузері. Оскільки браузер блокує відображення сторінки до повного завантаження CSS, ці файли повинні бути максимально легкими.

У сьогоднішній статті ми розглянемо декілька порад, які допоможуть вам зменшити розмір CSS-файлів, а також прискорити рендеринг сторінок сайту.

  1. Використовуйте інструменти для очищення CSS

В одній з попередніх статей ми розглядали інструменти, які допомагають оптимізувати CSS-стилі. Використовуйте подібні інструменти, щоб пройти валідацію коду, знайти помилки в коді, видалити дублікати набору правил і видалити невикористовувані CSS-стилі.

  1. Використовуйте урізані селектори

Коли справа доходить до CSS, спрацьовує правило «чим менше, тим краще» (Стислість – сестра таланту). Використання коротких селекторів допоможе зменшити десятки кілобайтів при досить великих файлах стилів. Візьмемо, наприклад, такий селектор:

aside ul li.item-list

Його можна використовувати в більш урізаному вигляді:

.item-list

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

В ідеалі селектор повинен бути якомога коротшим, але це не означає, що ви повинні повністю обрізати всі селектори. Іноді доводиться використовувати більш глибокий селектор, особливо для сторінки зі складним DOM. Тому, використовуйте здоровий підхід і знаходьте правильний баланс.

  1. Використовуйте скорочені властивості

Ця порада схожа на тривіальну, але ви будете здивовані тим, як часто непотрібні властивості використовуються практично марно. Нижче наведено приклад декількох таких властивостей:

font-size: 25px;
line-height: 1.5;
font-family: "Roboto",arial,sans-serif;

Тут використовується досить багато CSS-стилів! Давайте зменшимо це:

font: 25px/1.5 "Roboto",arial,sans-serif;

Скорочена властивість font містить кілька декларацій в зручному однорядковому вигляді, який займає набагато менше місця.

У прикладі, показаному вище, короткий запис менше приблизно на 40% за розширений запис. Це може здатися нечитабельним, але коли подібний синтаксис увійде в вашу практику, він стане для вас набагато практичнішим.

Властивість font – це не єдина скорочена версія, яку можна використовувати подібним способом. Наприклад, відступи (padding і margin) можна використовуватися замість більш довгих записів властивостей, наприклад margin-bottom, padding-right і т.д.

А що робити, якщо вам пізніше потрібно буде перевизначити одну з властивостей? Наприклад, припустимо, що у вас є елемент списку (li), розмір шрифту якого повинен збільшитися на великих екранах. В цьому випадку вам потрібно тільки використовувати розширений запис властивості розміру шрифту:

.item-list {
  font: 25px/1.5 "Roboto",arial,sans-serif;
}
@media (min-width: 1920px){
 .item-list {
   font-size: 35px;
 }
}

Цей похід дуже зручний і гнучкий. Вам не потрібно переписувати все правило, якщо вам потрібно змінити будь-яку частину властивості основного шрифту.

  1. Використовуйте підказку ресурсу попереднього завантаження (preload)

Значення preload атрибута rel елемента <link> дозволяє робити декларативні запити на ресурси, які можуть знадобитися відразу після завантаження сторінки. Попереднє завантаження гарантує, що ресурси будуть доступні заздалегідь, і з меншою ймовірністю заблокують перший рендеринг сторінки, що призведе до підвищення відтворення.

Наприклад, для попереднього завантаження файлу CSS стилів, ви можете вказати його в тезі <link>:

<link rel="preload" href="/css/styles.css" as="style">

Або як HTTP-заголовок:

Link: </css/styles.css>; rel=preload; as=style

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

Tags: CSS3HTML5

Recent Posts

Як вивчити німецьку мову легко і весело? З допомогою Beste Freunde!

Німецька часто вважається складною мовою. Так, німецька лексика має «важкий» характер. Так, є дійсно дуже… Read More

27/09/2020

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Інструкція по завантаженню відео з сервісу TikTok (безкоштовно та без watermark)

Якщо ви ще не чули про TikTok, тоді рекомендуємо вам спочатку ознайомитися з цим коротким… Read More

17/09/2020

Що є в бюджетному ноутбуці – на які характеристики розраховувати?

Пройшли ті часи, коли пристойний ноутбук коштував від 1000 доларів. Сьогодні можна купити досить непоганий… Read More

16/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020