Как оптимизировать CSS файл для скорости

Question

Интересно, как можно оптимизировать CSS-файл для более быстрой загрузки, сейчас мой CSS-файл содержит около 2400 строк и его размер составляет 54 КБ.Ни один из графических элементов не превышает 4 КБ, поэтому я считаю, что CSS является причиной того, что мой веб-сайт медленно / рендерится / загружается.

Это просто основной CSS, на некоторых страницах я загружаю дополнительные CSS-файлы.

Answer 1

Это много CSS.Хотя инструмент минимизации CSS является хорошей идеей, вам может потребоваться выполнить ручную передачу файла и найти правила, которые можно объединить.Например:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;

может быть уменьшено до:

margin: 10px 5px 0 5px;

И даже далее:

margin: 10px 5px 0;

Аналогично, границы могут быть уменьшены:

border-width: 2px;
border-color: #123456;
border-style: solid;

Это может быть выражено как:

border: 2px solid #123456;

background, padding и шрифты - это некоторые из других правил, которые можно записать так, чтобы они были намного короче и эффективнее.Вот хорошая статья о сочетаниях клавиш CSS .

Минимизаторы CSS являются полезными инструментами, но я не уверен, что они способны переставить ваш код в формат ярлыков.

Answer 2

Вы можете минимизировать код CSS, используя следующие инструменты:

CSSMin http://code.google.com/p/cssmin

Сократить http://code.google.com/p/minify

YUI http://developer.yahoo.com/yui/compressor

CSS Minifier http://www.artofscaling.com/css-minifier

CSS Tidy http://csstidy.sourceforge.net

Answer 3

Помимо сжатия, вам следует рассмотреть возможность разделения вашего CSS-файла на несколько файлов.Если у вас есть определенные классы, которые когда-либо используются только на определенной странице, у вас должен быть файл CSS для этой конкретной страницы, который больше нигде не загружается.

Вы также должны убедиться, что вы правильно наследуете элементы стилячтобы не переписывать одни и те же элементы снова и снова.

Answer 4

Вы минимизировали файл? http://www.minifycss.com/css-compressor/

Я бы не сказал, что 2400 строк CSS чрезмерны. Так, может быть, проблема скорости - это что-то еще? Проверьте подключаемый модуль веб-разработчика для своего браузера и посмотрите, сколько ресурсов загружается.

Попробуйте объединить изображения в спрайты, используя SmushIt для сжатия изображений и минимизации ваших css / js.

Answer 5

Попытайтесь сжать свой CSS

• http://www.lotterypost.com/css-compress.aspx

Вам также следует помнить, что вы не пишете один и тот же код снова и снова и используете классыдля вещей, которые используются очень часто.

Если у вас есть такие пометки, как

#content{
   border-radius:5px;
}

#nav{
   border-radius:5px;
}

Так что вы должны использовать что-то вроде:

.borderAll{
   border-radius:5px;
}

и добавить эти классы в

вашего div'а * Другие вещи, которые вы могли бы сделать:

• Использование изображений спрайтов:

"CSS-спрайты являются предпочтительным методом сокращенияколичество запросов изображений. Объедините ваши фоновые изображения в одно изображение и используйте CSS background-image и background-position для отображения нужного сегмента изображения. "- Yahoo Developer Rule

• Всегда помещайте свой CSS-файл в верхнюю часть заголовка

"При исследовании производительности в Yahoo !, мы обнаружили, чтоПри перемещении таблиц стилей в документ HEAD заставляет страницы загружаться быстрее. Это связано с тем, что размещение таблиц стилей в HEAD позволяет странице отображать постепенно. "

• Используйте Link вместо @ import
• Уменьшить разрывы строк

• Удалить последнюю точку с запятой

  h2 {font-family: Arial; font-color: # 333;} лучше: h2 {font-family:Arial; font-color: # 333}

• Простые цвета:

вместо #FFFFFF используйте #FFF, #AABBCC используйте# ABC

• Использование сочетаний клавиш CSS:
  http://cssdog.com/css_shortcuts.html

Answer 6

Если сайт загружается медленно, я сомневаюсь, что CSS-файл размером 54 КБ является худшей из ваших проблем. Это не так уж и много - плюс, как только пользователь загрузит его один раз, браузер будет кэшировать его, чтобы он не создавал постоянно медленную загрузку страниц. Использовали ли вы какие-либо инструменты для анализа времени загрузки отдельных ресурсов на вашем сайте? Проверьте панель Net в Firebug; Вы можете получить медленный ответ от внешнего сайта, если у вас есть ссылки на внешние ресурсы, что замедляет все на вашем собственном сайте.

Тем не менее, вы все равно можете извлечь выгоду из минимизации своего CSS-файла, чтобы сжать его, что поможет вам увеличить время загрузки, если вы все еще хотите. Google для «минимизировать CSS» для множества хороших ресурсов по этой теме, включая загружаемые и онлайн-инструменты для создания минимизированной версии вашей таблицы стилей :) Удачи!

Answer 7

Попробуйте http://www.minifycss.com/, чтобы сжать CSS.Используйте элемент проверки Chrome для измерения времени загрузки CSS

Answer 8

Вы всегда можете попробовать минимизировать свой CSS, используя что-то вроде ссылки ниже:

Онлайн YUI Compressor

Я бы также предложил использовать Firebug, чтобы увидеть, что вас выводитпока.Вы можете увидеть, как файлы загружаются и сколько времени они занимают на вкладке NET.

Answer 9

Я знаю, что на этот вопрос было получено много ответов, но я использую небольшую хитрость (для которой требуется JavaScript), которая кажется действительно эффективной - даже для браузера, такого как Chrome, который пытается отображать страницы как можно скорее.

Если ваш сжатый и оптимизированный файл все еще слишком медленный, это может помочь.

Часто большая часть CSS предназначена для интерактивного контента; такие как: hover,: focus и т. д. Эти стили не нужно загружать сразу, и вы можете загрузить их после полной загрузки страницы.

Поэтому я бы порекомендовал переместить все стили: hover и: focus или просто любой стиль класса, который используется для контента, видимого только при взаимодействии, в отдельный файл CSS. Затем загрузите этот отдельный файл после того, как основное содержимое HTML будет полностью отображено в JavaScript (пример Jquery):

$(document).ready(function ()
{
    //Render Interactive CSS:
    var Link = document.createElement('link'); Link.rel = 'stylesheet';
    Link.href = '[Relative Interactive CSS File URL]';
    var Head = document.getElementsByTagName('head')[0];
    Head.parentNode.insertBefore(Link, Head);
}

Ссылаясь на это руководство: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

Для меня это существенно улучшилось даже для небольших файлов Interactive.css.

Надеюсь, это поможет!

Answer 10

Вы можете использовать CSS-минимизатор , чтобы уменьшить размер, вы также должны включить сжатие на веб-сервере, и вы должны кэшировать CSS (что вы также можете достичь, настроиввеб-сервер для этого).