Ускорение сайта. Оптимизация CSS

Опубликовано: 3 Сентябрь 2010Автор ratemir

Каскадные таблицы стилей делают сайты более эффективными и удобными, так как они позволяют кешировать информацию о стилях связанных с файлом .css на Вашем сайте. Поэтому, отпадает необходимость считывания этих данных при последующих загрузках страниц. Следовательно, скорость открытия страниц в браузерах укорачивается. Даже если стили CSS (Cascading Style Sheets), сами по себе являются очень эффективным инструментом, всё равно они требуют оптимизации.

Для этого существуют правила привидения кода стилей к оптимальному виду, что ускорит работу веб-сайта. Добавляя или удаляя значения кода, прежде всего обратите внимание на строчки в файле CSS, которые можно объединить. Например, вместо:

margin-top: 9px;
margin-right: 20px;
margin-bottom: 11px;
margin-left: 22px;

Можно прописать:

margin: 9px 20px 11px 22px;

С другой стороны, если Вы хотите ограничить только одну сторону элемента сайта, то следует:

вместо
margin: 0px 0px 0px 22px;
прописать
margin-left: 22px;

Так как в этом случае, автоматически определяется, только одна сторона(левая), а в трансформации трёх других сторон надобности нет, потому-что они равны 0.

Мы также можем сократить CSS, если используются одинаковые значения атрибутов «margin» и «padding». Вот примеры:

margin: 9px 22px 11px 22px;
заменить на
margin: 9px 22px 11px;

Мы видим, что значение 22рх обозначает противоположные(правую и левую) стороны элемента и они в свою очередь идентичны. Поэтому, пропущенное четвертое поле(left) будет автоматически заполняться значением второго поля(right). Если к тому же, значения верхнего(top) и нижнего(bottom) полей одинаковы, то следует использовать следующий пример:

вместо
margin: 9px 22px 9px 22px;
пишем
margin: 9px 22px;

В CSS есть много атрибутов, которые можно укоротить, но «margin» и «padding» на мой взгляд являются самыми распространенными.

В коде HTML используются идентификаторы стилей «class» и «id». Их использование тоже потдается оптимизации. Например, вместо следующих строк:

<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 или CSS_Compressor. Там просто нужно скопировать содержимое Вашего файла .css в соответствующую форму сервиса. Например, как на рисунке ниже:

Оптимизация CSS

После нажатия на кнопку (1) Вы получите оптимизированный код. То есть произойдет объединение аналогичных селекторов, удалятся ненужные свойства, пробелы и так далее.



Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

Оставить комментарий

Наверх