Питання оптимізації завантаження web-сторінки було актуальним завжди, навіть не дивлячись на дедалі зростаючу швидкість передачі даних в мережі. Зменшення часу завантаження сайту - це одна з найважливіших тем вебдизайну. Зазвичай основна увага приділяється зменшенню розмірів зображень та оптимізації запитів до БД. Але також варто приділити увагу і усікання непотрібних символів як в самому файлі коду сторінки так і у файлі з описами його стилів. Тим більше, що часто файл з описом стилів з'їдає досить відчутне простір трафіку.
Але це ж нас не може влаштовувати. Давайте навчимося робити все лаконічно і економічно! Розглянемо кілька способів зменшення стандартного файлу СSS і перевіримо ефективність кожного із способів на ділі, виконуючи заміри його ваги в байтах. Отже, які ж існують способи оптимізації опису стилів? Спершу, розглянемо приклад звичайного CSS файлу.
Розмір наведеного файлу 515 байт. Тепер перейдемо до процесу оптимізації. У мережі існують ресурси за допомогою яких оптимізація може відбуватися автоматично. Скористаємося послугою одного з таких ресурсів.
Перша операція, яку ми застосуємо до файлу CSS. повинна спростити наш код, видаливши непотрібні символи як, наприклад, подвійний пробіл або крапка з комою не до місця. Заходимо на www.cleancss.com/ і процессіруем наш код.
Після нескладних маніпуляцій розмір файлу зменшився до 448 байт, а це значить, що ми хоч і трохи, але зробили завантаження файлу швидше. А це вже успіх.
Стиснення стильових властивостей
Перейдемо до простих маніпуляцій, які не зіпсують читабельності, але разом з тим зменшать розмір нашого CSS файлу. Запишемо всі стильові властивості через підрядник, виключивши прогалини після знаків ';'
Тепер розмір нашого файлу зменшився до 400 байт. тобто вже менше на 115байт від початкового.
Пишемо стилі в один рядок
Тепер зменшимо наш файл ще на 20 байт, але зробимо його вже не читабельним, витягнувши весь його вміст в одну строчку.
Врахуйте, що краще працювати з нормальним СSS файлом і займатися його оптимізацією безпосередньо перед його закидачку на хостинг.