Винесення стилів відображення різних елементів сторінок в окремий файл безумовно прискорює завантаження сторінок сайту, оскільки CSS-файл кешується браузером (якщо така функція йому дозволена) і в подальшому підвантажує його не з Інтернету, а прямо з вашого комп'ютера.
Але навіть в такому випадку можна отримати ще більший ефект від використання каскадних таблиць стилів (які часом займають десятки кілобайт коду), оптимізувавши цей самий CSS.
І ось тут на допомогу приходять прості і зручні у використанні он-лайн сервіси - CSS-оптимізатори.
Шляхом пошуку в Гуглі знайшлося кілька подібних інструментів, готових допомогти вирішити поставлене завдання (всі сервіси буржуйські):
Що виконують дані сервіси для отримання результату. Вони об'єднують однорідні класи, видаляють непотрібні властивості, прогалини, відступи і так далі. В результаті виходить нечитабельним для веб-майстра код, проте при оптимізації найбільшого в розмірі файлу CSS різниця в завантаженні сторінок стає значною.
Багато користувачів широкосмугового Інтернету не побачать в цьому сенсу, оскільки більшість сайтів у них відкривається швидко. Але уявіть собі: якщо кожен сайт стане завантажуватися хоча б на 10% швидше. то скільки часу Ви збережете за тиждень, місяць? А за рік? При цьому варто враховувати і факт низького споживання каналу. Вона теж може стати вражаючою. Адже (перефразую відоме прислів'я) кілобайт мегабайт береже;).
Для тестування результатів оптимізації я використовував файли CSS наступний сайтів:
Щоб нічого не ускладнювати, настройки оптимізаторів я залишав за замовчуванням. Будемо вважати, що вони оптимальні і призначені для середнього користувача.
Перший тест Хабрахабр з його 40.69 кілобайтовий CSS.
Наступними йдуть «Новини 2.0». Розмір CSS - 18.15 KB.
- CSS Optimizer / 10.46 KB / 42.34% / Ніяких змін не відбулося, крім незначного збільшення шрифту в двох рядках. В цілому на юзабіліті це ніяк не позначилося.
- Clean CSS / 11.40 KB / 38.7% / Все залишилося на місці.
- CSS Compressor / 8.94 KB / 50.74% / Збільшилися відступи, втратили центрування деякі елементи, зіпсувалися стилі для деяких типів посилань.
Тепер тести iXBT.com. Розмір CSS - 15.47 KB.
- CSS Optimizer / 11.60 KB / 25.06% / Права колонка спливає вниз, що однозначно позначається на юзабіліті.
- Clean CSS / 11.74 KB / 24.4% / Зовсім незначна зміна відступів в деяких місцях.
- CSS Compressor / 7.32 KB / 51.75% / Цілковите спотворення зовнішнього вигляду сторінки. Її просто не впізнати.
Останнім в тест потрапляє CSS мого блогу. Його розмір - 12.02 KB.
- CSS Optimizer / 7.60 KB / 36.75% / Зникає білий фон, змінюються відступи деяких елементів і висота рядків.
- Clean CSS / 9.65 KB / 24.5% / Все на своїх місцях.
- CSS Compressor / 4.74 kB / 60.54% / Повністю втрачається форматування сторінки. «Ні в які ворота не лізе».
Оптимальні результати в співвідношенні якість / розмір показав сервіс Clean CSS. CSS, оптимізований через нього, на всіх тестованих сайтах все залишив на своїх місцях. Причому розмір файлу в середньому скорочується на цілу третину. Крім цього сам код, при налаштуваннях за замовчуванням, не згрібається в купу, а залишається таким же читаним, як в початковому варіанті.
Більш того, сервіс показує повний лог змін, тобто що і в якому рядку було підкориговано, а код відображається з підсвічуванням синтаксису. Тому даний сервіс заслуговує похвали і його сміливо можна використовувати для цілей оптимізації CSS файлів.
Користуватися іншими двома варіантами - CSS Optimizer і CSS Compressor - варто тільки в конкретному випадку, «примірявши» на сайті коректність роботи оптимізованого стильового файлу.
Таким чином, оптимізація CSS може значно прискорити завантаження сайтів без необхідності внесення кардинальних змін до структури сторінок. Та й чи варто враховувати, що все ще більшу частину інтернет-користувач підключається по діалапу.
Перед оптимізацією CSS-файлів за допомогою одного із зазначених інструментів я б порадив зберігати оригінальний, легкий для читання файл стилів. щоб в майбутньому можна було, як і раніше, з зручністю вносити в нього необхідні поправки.
Онлайн-покер є останнім часом вельми популярним заняттям, яке дозволяє людям стає фінансово забезпеченими. Ти можеш завантажити покер і стати одним з них.