Якщо на сайті використовується CSS. сервер повинен передавати їх браузеру кожен раз при запиті ресурсу. І це впливає на швидкість завантаження. Чим складніше і об'ємніше файли стилів, тим довше відвідувач буде чекати, поки сайт повністю завантажиться. За допомогою стиснення CSS можна зменшити розмір коду і підвищити продуктивність сайту.
Можливості оптимізації CSS
У цій статті ми наведемо кілька прийомів, які можна використовувати для стиснення CSS і JS.- Уникайте надмірного використання вбудованих стилів CSS (розміщених в HTML), якщо це не відноситься до початку сторінки. Те ж саме стосується тегів стилів (окремих CSS-властивостей. Відхиляються від встановлених стандартів);
- Об'єднуйте декількох файлів CSS в PHP-скрипт. Таким чином, клієнт повинен викликати тільки файл PHP замість відправки HTTP-запиту для кожного файлу стилів;
- Стиснення CSS має на увазі використання скорочених форм властивостей, якщо це можливо:
замість повної форми:
Стиснення CSS: онлайн і оффлайн інструменти
До таких додатків ставляться:
Скопіюйте код CSS у поле "Input CSS" і натисніть на кнопку "Minify", щоб почати процес. В поле "Minified Output" ви побачите результат, який можна скопіювати вручну або завантажити. CSS Minifier скорочує код, видаляючи розриви рядків і пробіли, останню в списку крапку з комою. Інструмент може легко перетворювати код RGB в стислий варіант HEX.
Цей сервіс для стиснення CSS онлайн трохи відрізняється від попереднього, оскільки підтримує більше можливостей для стиснення коду. Вставте CSS-код в поле "CSS Source Code Input". Потім виберіть ступінь стиснення. У розділі "Show advanced options" можна встановити прапорець для параметрів мінімізації. Наприклад, стиснення квітів кольору, видалення останню крапку з комою і т.д. Натисніть "Compress", щоб почати процес стиснення CSS. Також інструмент надає інформацію про розмір вхідного і вихідного файлу, а також відсоток мінімізації.
Free CSS Toolbox
Безкоштовна програма для веб-розробників. Вона включає в себе цілий ряд інструментів і може виконувати форматування і перевірку CSS-коду. На вкладці меню "CSS Formatting Options" виберіть параметри CSS. які потрібно оптимізувати і запустіть стиснення, натиснувши "Re-format now". Free CSS Toolbox без проблем видаляє пробіли і кінцеві крапки з комою, мінімізує коди кольорів. Ця програма працює у всіх операційних системах, починаючи з Windows від XP і вище.
Зменшення часу завантаження завдяки оптимізації CSS
Навантаження на сервер зростає в міру того, як збільшується розмір CSS-файлів. Якщо сайт відкривається за допомогою клієнта (браузера), все CSS-дані повинні бути запитані і передані. Тому настійно рекомендується здійснювати стиснення CSS і JS онлайн. Перераховані вище інструменти допоможуть вам в цьому. Але повна оптимізація не може бути виконана за допомогою сервісів і додатків. Це завдання потрібно виконувати самостійно.
Переклад статті «CSS compression for consistent loading times» був підготовлений дружною командою проекту Сайтобудування від А до Я.