RSS
На даний час 4083 розширень для Joomla!

Головна arrow CSS arrow Прискорення завантаження сайту: Оптимізація CSS-файлів

Прискорення завантаження сайту: Оптимізація CSS-файлів

23.09.2007 | 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




 

Додати коментар


Захисний код
Оновити

Додати на БобрдобрДодати на MemoriДодати на news2.ruДодати на Моё МестоДодати на Моё МестоДодати на NewslandДодати на СМИ2Додати на Ваау!Додати на Mr. WongДодати на GoogleДодати на YahooДодати на DiggДодати на Del.icoi.usДодати на SlashdotДодати на BlogmarksДодати на TechnoratiДодати на NewsvineДодати на BlinkbitsДодати на Folkd