Автор: Даниэль Скокко
Перевод: Всеволод Козлов

Каскадные таблицы стилей делают веб-сайты гораздо более удобными, т.к. они позволяют браузерам кэшировать стили, применимые к данному сайту, находящиеся в файле .css. Благодаря этому, сразу же отпадает необходимость в считывании стилей из раза в раз с загрузкой каждой новой страницы.

Несмотря на то, что CSS в разы облегчает сайт, оптимизация CSS-файлов просто необходима, если, конечно, Вы хотите ещё более ускорить загрузку Вашего сайта.

Во-первых, найдите все разгруппированные записи в коде и объедините их в одну строку. Ниже будут приведены примеры:

Вместо:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-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. Данный инструмент объединит одинаковые селекторы, удалит бесполезные свойства и пробелы из кода.

Ускорение загрузки Вашего сайта:

  1. Оптимизация изображений
  2. Форматы изображений
  3. Оптимизация CSS-файлов
  4. Использование слэша на конце ссылок
  5. Указание атрибутов Height и Width для всех изображений
  6. Уменьшение количества HTTP запросов

Оригинал статьи: Speed Up Your Site – Optimize your CSS
















Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: