Прискорення завантаження сайту: Оптимізація CSS-файлів
24.09.2007, 02:03 | Прочитано: 12801 раз | CSS та верстка | Автор Daniel Scocco (адаптація та переклад: Dutch) Друк | E-mail
Каскадні таблиці стилів роблять веб-сайти набагато більш зручними, тому що вони дозволяють браузерам кешувати стилі, застосовані до даного сайту, які розміщенні у файлі .css. Завдяки цьому, відразу ж відпадає необхідність у зчитуванні стилів кожен раз після завантаженням нової сторінки.
Незважаючи на те, що CSS у рази полегшує сайт, оптимізація CSS-файлів просто необхідна, якщо, звичайно, Ви хочете ще більше прискорити завантаження Вашого сайту.
По-перше, знайдіть всі розгруповані записи в коді та об'єднаєте їх в один рядок. Нижче будуть наведені приклади:
Замість:
margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-lefmargin-left: 20px;
Варто робити так:
margin: 10px 20px 10px 20px;
Замість:
<p class="decorated">Абзац із оформленим текстом</p> <p class="decorated">Другий абзац</p> <p class="decorated">Третій абзац</p> <p class="decorated">Четвертий абзац</p>
Варто робити так:
<div class="decorated"> <p>Абзац із оформленим текстом</p> <p>Другий абзац</p> <p>Третій абзац</p> <p>Четвертий абзац</p> </div>
По-друге, Ви також можете скористатися відмінним інструментом оптимізації css-файлів CleanCSS або програмами, на кшталт TopStyle. Даний інструмент об'єднає однакові селектори, видалить непотрібні властивості та пробіли з коду.
Деякі АЛЕ...
Оскільки провідне місце серед браузерів займає Internet Explorer, то можуть не спрацьовувати деякі згруповані записи.
Так, наприклад:
margin: 10px 20px 10px 20px;
може по різному сприйматися Internet Explorer, або взагалі не сприйматися.
Тому під час оптимізації CSS потрібно підходити з розумом, та тестувати сайт, як мінімум у IE6 та IE7, Opera і FireFox.
Оригінал статті: Speed Up Your Site – Optimize your CSS