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

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

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

Minify 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

вы уменьшили файл? http://www.minifycss.com/css-compressor/

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

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

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

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

попробуйте сжать css

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

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

Если у вас есть thinkgs как

#content{
   border-radius:5px;
}

#nav{
   border-radius:5px;
}

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

.borderAll{
   border-radius:5px;
}

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

другие вещи, которые вы могли бы сделать являются :

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

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

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

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

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

• удалить последний Запятой

  h2{font-family: Arial; шрифт-цвет:#333;} лучше: h2{font-family: Arial; font-color:#333}

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

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

• использование CSS ярлыков:
  http://cssdog.com/css_shortcuts.html

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

онлайн компрессор Юи

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

попробуйте http://www.minifycss.com/ для сжатия css. Используйте элемент проверки chrome для измерения времени загрузки css

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

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

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

Я знаю, что этот вопрос получил много ответов, но я использую небольшой трюк (который требует включения 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

для меня это сделало существенные улучшения, даже для маленьких интерактивные.файл CSS.

надеюсь, что это помогает!