ручна

Привіт! Мене звуть Рікардо Прієто, і я працюю (і пишу) над веб-дизайном, версткою та досвідом роботи в SiloCreativo, звідки ми допомагаємо людям розробляти свої проекти за допомогою підручників, порад та ресурсів.

Знижка 20%
Теми WordPress, такі як Divi, за 1 долар кожна

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

Той факт, що веб-сайт важить мало і швидко завантажується, є очевидним вдосконаленням UX (User Experience), оскільки відвідувачі отримують вміст раніше та взаємодіють з ним. Але це також пов'язано з іншими перевагами, такими як менше споживання даних і навіть економія заряду акумулятора пристрою.

Це вже було важливо деякий час тому. Але рішенням Google було включити швидкість завантаження серед факторів, що визначають позиціонування в пошуковій системі, що змусило нас усіх збожеволіти від SEO, який намагається зменшити десяті частки часу завантаження та заощадити трохи kb, де це можливо.

Це породило те, що ми називаємо WPO (Оптимізація веб-продуктивності) - сфера роботи, де мета полягає максимально оптимізувати завантаження веб-сторінок за допомогою методів стиснення та оптимізації вмісту.

Як зменшити вагу ваших файлів CSS

Вперед, існує багато методів зменшення ваги файлів CSS. Найвідоміші переживають згрупувати всі таблиці стилів вашого веб-сайту в одному файлі, зменшити його і подавати його стиснутий за допомогою Gzip. Тоді ми могли б активувати кеш згаданого файлу, так що коли відвідувач повернеться, їм не доведеться завантажувати файл CSS знову.

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

Всі вони починаються з дуже основного принципу: кожен символ важить приблизно 1 байт. Якщо ми зменшимо кількість символів, то зможемо зменшити вагу файлу, чи не так це просто? Давайте подивимося, як це зробити. (Примітка: насправді правило 1 символ = 1 байт не завжди є таким, це набагато складніша проблема, коли входить тип кодування та тип символу, але для ілюстрації наступних моментів ми будемо приймати цю еквівалентність назавжди ).

1. Скорочені властивості в CSS

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

Зменшення кількості символів і, отже, розміру є значним.

Зліва ми визначаємо відступ, використовуючи 4 властивості. Праворуч ми визначаємо відступ елемента в один рядок із скороченою властивістю.

Як загальне правило, доки ми заявляємо більше одного значення властивості, яке може бути використано як скорочення, воно буде варте використання.

2. Пробіли та вкладки в CSS. Яка займає менше?

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

Щоб отримати уявлення, вкладка вважається символом, тому до загальної ваги буде додано 1 байт. Пробіл також враховує 1 байт, але для досягнення того ж рівня відступу нам потрібні 4 пробіли (4 байти).

Відступ CSS з вкладкою

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

3. Префікси для сумісності браузера, які більше не потрібні в CSS

Коли нова властивість CSS починає інтерпретуватися між браузерами, звичайно використовувати певні префікси, щоб гарантувати його сумісність у найбільшій кількості браузерів та їх версіях.

Однак з часом ці браузери інтегрують цю властивість без використання будь-якого типу префікса. Це не погана ідея перевірити наші файли CSS на наявність цих префіксів, які більше не є корисними. Хорошим інструментом для пошуку сумісності властивостей є Can I Use. У цьому прикладі властивість переходу більше не потребує стільки префіксів.

Чи можу я використати хороший ресурс, якщо ви хочете знати новини та сумісність неправильно названого CSS4.

4. Пропустити одиницю CSS, коли значення дорівнює нулю

У CSS значення 0 завжди дорівнює 0. Не має значення, до якого підрозділу ми маємо на увазі, оскільки ця інформація буде проігнорована. Тут ми точно можемо заощадити кілька байтів.

5. Оптимізуйте десяткові значення в CSS

Ось два питання, які нам потрібно розглянути. З одного боку, будь-яке десяткове значення менше 1 і більше 0 не вимагає використання 0 перед точкою, яка вказує на початок десятків. Подібним чином можна зменшити будь-яке десяткове значення, яке має кінець 0 для того, щоб зберегти нам ще один байт.

6. Коротший код кольору CSS

У нас є кілька способів оголосити значення кольорів у CSS: RGB, HEX або назва кольору. Ідеальним тут було б використовувати те, що ми займаємо менше байт.

Висновок: інтегруйте завдання WPO з фази компонування

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

Маючи це на увазі, це нам допомагає краще інтегруватися з рештою команди та оптимізувати з першої хвилини всі таблиці стилів, які ми створюємо.

Можливо, деякі поради, перелічені в цій статті, є дуже очевидними, але ніколи не завадить переглянути їх мати більше контролю над CSS, який ми пишемо. Якщо ви хочете переглянути інші основи CSS, я рекомендую цю статтю про те, що таке CSS. Якщо ви шукаєте щось більш просунуте, ви можете почати з цієї статті про CSS Grid або про медіазапити в CSS.

А ви, які ще принципи та правила ви знаєте, щоб зменшити вагу наших файлів CSS?