» » » Как сократить CSS и ускорить загрузку сайта
logotip

Как сократить CSS и ускорить загрузку сайта

Всем привет! Сегодня на seo-mayak.com мы продолжим выполнять рекомендации PageSpeed и разберем пункт «Сократите CSS», что позволит еще немного ускорить загрузку сайта.

После выхода статьи «Как включить gzip сжатие и кратно ускорить сайт» мне написал один мой читатель и посетовал на то, что он не может включить статическое gzip сжатие, так как его сайт еще находится в стадии становления и ему приходиться постоянно редактировать файлы.

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

sokratit css

Наверно самое большое влияние на скорость загрузки сайте оказывают изображения. Если анализ PageSpeed определил в красную зону пункты «Оптимизируйте изображения», «Предоставьте изображения с нужными пропорциями» и «Укажите размеры изображений», то чем раньше Вы приступите к выполнению данных рекомендаций, тем меньше Вам впоследствии придется возится с картинками. Т.е. лучше заранее оптимизировать изображения и уже потом загружать их на сервер.

Также на любой стадии развития сайта можно приступать к работе над пунктом «Используйте кэш браузера». В одной из следующих статей я обязательно расскажу, как включить кэширование данных в браузере, конечно без использования каких-либо плагинов, так что подписывайтесь на обновления блога.

В общем, все что касается кеша и изображений, за исключением пункта «Объедините изображения в CSS-спрайты» можно начинать выполнять хоть с самого рождения проекта.

А такие рекомендации как: «Сократите CSS», «Сократите JavaScript», «Сократите HTML», «Включите gzip сжатие» (имеется в виду статическое gzip сжатие), «Встройте небольшие CSS», «Встройте небольшие ресурсы JavaScript», «Объедините изображения в CSS-спрайты» лучше выполнять на уже сформировавшихся ресурсах, так как в ходе работ придется сжимать, изменять содержание файлов, что затруднит последующие их редактирование.

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

Итак, если Вы закончили с дизайном сайта и его функционалом, то самое время приступить к сокращению объема файлов, которые подгружаются вместе с основным контентом, а это css-файлы, js-файлы и html-файлы, что позволит ускорить загрузку сайта.

Про сокращение js и html файлов мы поговорим в другой раз, а сейчас я расскажу, как сократить CSS. Поехали!

Технология удаления «мертвых» стилей

Прежде всего надо провести тщательную ревизию в файле style.css и выявить стили, которые не используются в шаблоне.

Но как определить какие стили используются, а какие нет? На самом деле сложного в этом ничего нет. Если у Вас нет свежей резервной копии файлов, то сделайте ее с помощью FTP клиента FileZilla.

Затем в редакторе Notepad++ открываем файл style.css, выделяем любой класс или идентификатор (выделать надо только слово, без точки или решетки) и во вкладке «Поиск» выбираем пункт «Найти в файлах»:

sokratit css1

В открывшимся окне жмем на кнопку «…», как показано на скриншоте:

sokratit css2

И в резервной копии фалов ищем папку с темой:

sokratit css3

Далее жмем на кнопку «Найти все»:

sokratit css4.1

После чего в редакторе появится дополнительное окно с результатами поиска:

sokratit css5

В моем случаи результаты таковы. Notepad++ нашел только одно совпадение, которое находится в файле style.css.

О чем это говорит? А говорит это о том, что данный идентификатор не используется в шаблоне и все стили, прописанные для него, бесполезны и просто засоряют файл.

Поэтому смело удаляем данный идентификатор со всеми селекторами и их значениями:

sokratit css6

Давайте рассмотрим другой пример. Я произвольно выбрал класс и результат поиска показал следующее:

sokratit css7

Видно, что класс «homepage_post» используется в файлах шаблона, таких как: 404.php, archve.php, index.php, page.php, search.php и sindle.php.

Из этого следует, что данный класс и все стили прописанные для него, работают и удалять их не надо.

Если в файлах Вашей темы используются функции post_class() и body_class(), советую ознакомится с данным материалом, чтобы не удалить лишнего.

Надеюсь понятно. Таким способом проверьте все классы и идентификаторы. Уверен, что вы обязательно найдете «мертвые стили», избавившись от которых, сократите код CSS. Работа конечно нудная, но проделать ее надо, если мы хотим ускорить загрузку сайта. Идем дальше.

Объединение файлов CSS

Теперь, когда мы избавились от «мертвых» стилей, можно приступать ко второму этапу сокращения CSS.

В некоторый шаблонах может использоваться несколько файлов стилей. Они могут по разному называться, но все они должны иметь расширение .css. Эти файлы также стоит проверить на «мертвые» стили.

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

После чего, дополнительные файлы стилей можно удалить. Также надо избавиться от кодов подключения удаленных файлов, которые находятся в header.php.

Важно! Будьте аккуратны при объединении файлов стилей! Всегда оставляйте возможность вернуть все на свои места, если что-то пойдет не так.

Обязательно делайте копии и чем больше будет резервных копий, тем лучше. Этим Вы избавите себя от лишних проблем. В любой случаи, если что будет непонятно, лучше спросите в комментариях и я постараюсь разъяснить тот или иной момент более подробно.

Но если Вы боитесь лезть в коды, то лучше этого не делать. Как говориться, страх плохой советчик. Значит Вы еще не готовы и лучше не торопится. Обучайтесь, набирайтесь опыту, вернутся к проведению данных работ никогда не поздно или в крайнем случаи обратитесь к человеку, у которого есть опыт и нет страха.

Как сократить CSS

Итак, мы имеем один файл style.css. Теперь на надо сократить его объем (не путать с сжатием файлов).

Технология сокращения CSS довольно простая. Надо убрать ненужные комментарии, пробелы, табуляции и пустые строки. Опять же пределы сокращения CSS могут быть разные. Все зависит от того, собираетесь ли Вы редактировать файл style.css в будущем.

Что касается меня, то я постоянно редактирую стили и уверен, что многие веб-мастера делают тоже самое. Сокращение CSS можно разделить на три вида: прогрессивное, умеренное и щадящие.

Прогрессивное сокращение CSS подразумевает размещение всех классов, идентификаторов и их селекторов в одной строке. Т,е, в файле style.css, после такого сокращения, останется только одна строка, но очень длинная.

Серверу будет требоваться гораздо меньше времени на подгрузку такого файла, но редактировать его будет весьма неудобно, хотя с помощью функции поиска в редакторе Notepad++ найти нужный класс или идентификатор не составит особого труда.

Для реализации прогрессивного сокращения можно воспользоваться сервисом
csscompressor.com. Копируем содержимое файла style.css и вставляем в поле на странице сервиса:

podsvetka koda8

Выбираем наибольшее сжатие «Highest (no readability, smallest size)» и жмем на кнопку «Compress».

Мой подопытный css код имел исходный размер 10240 байт. После сокращения он похудел примерно на 43% и стал весить 6546 байт:

sokratit css18

При щадящем сокращении CSS, на одной строке размещается класс или идентификатор, селекторы и их значения, а следующий класс прописывается уже с новой строки. Например:

sokratit css8.9

Чтобы не заниматься нудной работой и вручную не удалять все пробелы табуляции и т.д, можно воспользоваться вышеописанным сервисом csscompressor.com, только перед сокращением, в настройках надо выбрать строчку «High (moderate readability, smaller size)»:

sokratit css19

Также можно воспользоваться расширением PageSpeed для браузера Mozilla Firefox. Для этого, в результатах анализа выбираем пункт «Сократите CSS», жмем на стрелочку рядом с ним. Затем кликаем по ссылке «optimizet version»:

 sokratit css8.1

И  PageSpeed предоставит нам щадящее сокращении CSS кода:

sokratit css15

Останется только скопировать и вставить код в файл style.css.

Умеренное сокращение CSS — это вручную доработанное щадящие сокращение. Данный способ я использую сам. Заключается он в том, что в одну строку помещаются стили, отвечающие за определенный участок сайта, при этом я помечаю каждую строчку, соответствующим комментарием:

sokratit css16

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

После реализации любого из вышеперечисленных способов, пункт «Сократить CSS» должен оказаться в зеленой зане, что конечно поможет ускорить загрузку сайта.

До встречи!

С уважением, Виталий Кириллов

« Оптимизация WordPress. Нагрузка на сервер и как ее снизить
« PageSpeed — реальное ускорение сайта
« Как включить gzip сжатие и кратно ускорить сайт
« Как включить кэш браузера на стороне пользователя

Комментарии: 39

  1. Наталья:

    Спасибо за статью, Виталий!

    Помню, тоже возилась с этим файлом стилей. Почти в два раза сократила, кучу ненужного убрала. Вот только до его компрессии руки не доходят. Несмотря на то, что работы над дизайном позади, все равно иногда приходится заглядывать в этот файл, чтобы что-то отредактировать или добавить новый стиль. А перспектива искать что-то в одной строке или даже в десяти не очень радует. Так что лично я пока предпочитаю удобство в ущерб скорости загрузки.

    Позвольте, Виталий, отметить один момент. Способ удаления «мертвых» стилей не такой простой. С помощью блокнота можно обнаружить только те стили, которые упоминаются в файлах-шаблонах. А как же содержимое страниц, которое хранится в БД?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Наталья! Вы правильно подметили. Те стили, которые предусмотрены для тегов заголовков h3, h4 и т.д. Служебных тегов, типа: code, img, blockquote, a, ul, ol, li, а также для тегов таблиц: table, tr, td — не относятся к классам или идентификаторам, о которых шла речь в статье. Конечно их не надо удалять! Хотя ревизию в них также навести можно. И я еще раз всех предупреждаю, перед началом работ, надо обязательно делать резервные копии, с которых можно восстановить, случайно удаленные, нужные стили.

      Ответить
  2. Юлия:

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

    Ответить
    • Виталий Кириллов:

      Полностью с Вами согласен Юлия. НО! Жизнь блогера и не обещала быть легкой.

      Ответить
  3. Ирина Жигалова:

    Сократила стили, скорость загрузки, наверное, немного увеличилась. Правда, про «мёртвые» стили ничего не поняла — как понять, что нужно, а что нет? Думаю, когда-нибудь разберусь с этим.
    Спасибо, Виталий, за полезную серию статей!

    Ответить
  4. Анна:

    Виталий, а вы возьметесь за такую работу выполнить все рекомендации PageSpeed на сайте и сколько это будет стоить?

    Ответить
    • Виталий Кириллов:

      Анна напишите мне через форму обратной связи.

      Ответить
  5. Дмитрий:

    Спасибо за подробное объяснение! Попытаюсь выполнить все описанное на своем блоге, с виду все просто, так что должно получиться.

    Ответить
  6. Василий:

    97/100 — это прекрасный результат! Я только сейчас взялся за преобразование сайта, в будущем буду уходить с joomla, надоела она мне, плодит дубли. Возьмусь на написание с нуля. О многих сервисах, упомянутых здесь я даже и не слышал, хотя гугл постоянно напоминает о необходимости сокращения. Спасибо.

    Ответить
  7. Odessit:

    Я может куда-то не туда смотрю, но например на эту страницу, результат показывает 80/100?

    Ответить
    • Виталий Кириллов:

      C момента написания статьи многое изменилось, да и дополнения PageSpeed для Firefox уже нет .

      Ответить
  8. Борис:

    Совершенно замечательная практическая статья!!! Особенная благодарность за методику обнаружения никчемных блоков CSS! А статья по компрессии стилей и скриптов тут же дала результаты.. Пока не могу добить вопрос кеширования, на одном сайте получается, на другом нет, хотя и тема и сервер один и тот же… Буду добивать! Спасибо Вам за столь детальный опыт!

    Ответить
  9. Ринат:

    А если нужно добавить новый стиль, то просто добавляешь с новой строки его и потом обратно на csscompressor.com нужно идти и заново все уменьшать?

    Ответить
  10. Lucky:

    Сжал вчера свой Style.css на треть = ) и гугл дал добро, с CSS проблем больше нет.

    Вот только чистить я не стал, так как на производительность сильно не повлияет, так как сжатие на треть всего файла — дало всего несколько процентов ускорения.

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

    Но на всякий случай сохранил копии, так как компрессор в первую очередь трет все описания к стилям.

    Автору еще одно спасибо за полезный материал!

    Ответить
  11. Leo88:

    «Для своего блога я выполнил почти все рекомендации PageSpeed — 97/100, после чего в результатах анализа не осталось ни красных зон, ни желтых, а приятно радуют глаз сплошные зеленые галочки»

    В данное время 85/100 для компа и 78/100 для моьайла. Почему резвость и слово не держите?

    Ответить
    • Виталий Кириллов:

      Я конечно убрал из статьи текст цитаты, которую вы привели в комментарии и изображение тоже убрал, хотя к старым статьям я редко возвращаюсь и что-то там правлю.
      Уважаемый Leo88, вы смотрели на дату выхода статьи? С того времени много воды утекло и много что изменилось. Расширение PageSpeed для Mazilla Firefox теперь вообще не существует, также убрали соответствующее расширение для Chrome. Остался только онлайн сервис developers.google.com, алгоритмы и интерфейс которого значительно отличаются. Не думаю, что вы смогли набрать себе очков, проведя столь «тщательный» анализ моего блога!

      Ответить
  12. Евгений:

    Виталий привет! У меня проблемка с оптимизацией css. Суть такая: у меня наблоге выводятся скрипты в заголовке, в файле header.php, вот такой функцией: <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <?php wp_head(); ?> , на что ГуглСпидТестер очень сильно ругается, что выводятся в шапке шаблона js и css . Я почитал немного о функции wp_enqueue_script и чтобы сделать вывод скриптов в футере, до закрывающего тега body нужно прописать true для in_footer вот только я не знаю, как это сделать/ Подскажи, если знаешь как?

    Ответить
    • Виталий Кириллов:

      В файл functions.php вставляете такую функцию:

      function mayak_scripts() {
      	 if (is_singular())
      	 wp_enqueue_script('javascript', 'путь до скрипта');           
      }
      add_action( 'wp_footer', 'mayak_scripts' );
      
      Ответить
    • Евгений:

      Я пока до этого не дошел или такого нет. Но то, что пройдено было, в материалах не было, по-моим вопросам. Просто я еще сам люблю в этих кодах копаться, и кстаати проблему с js файлами уже решил, перекинул их в футер. С css тоже разобрался, 1 из 5 файлов, что загружаются в шапке — уже удачно присоединил к основному css. В общем вопрос отпадает!

      Ответить
  13. Евгений:

    Виталий, со сжатием все понятно, а как быть с объединением файлов css темы в один? Ни на одном ресурсе большого пространства интернета не нашел пошаговой инструкции, может ты напишешь в комментарии? или даже отдельную статью можно этому посвятить…а то через плагин w3 cache объединение не проходит, почему-то, как все пишут и speedinsite ругается, что не проведена оптимизация!

    Ответить
    • Виталий Кириллов:

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

      Ответить
  14. witos1:

    Щас попробуем.

    Ответить
  15. Владимир:

    Здравствуйте Виталий!
    Мне очень понравились Ваши статьи. Они понятны, конкретны и актуальны. Я сейчас занимаюсь оптимизацией своего блога, поэтому Ваши статьи – это как раз именно то, что нужно, поэтому я подписался на обновления. Правда Интернет развивается очень быстро, поэтому дата публикации поста действительно имеет большое значение.
    Прочитав комментарии, я тоже хочу задать свой вопрос, который для меня сейчас является и актуальным и срочным. Вы и Ваши читатели упоминали о спрайтах иллюстраций. Я тоже изучал этот вопрос, поскольку это может существенно ускорить загрузку сайта. В Интернете есть руководства по этому вопросу, но, насколько я понял, спрайты можно делать только для фоновых изображений. Вы об этом не упоминаете, считаете ли Вы, что спрайты можно делать и для обычных изображений? Дело в том, что спрайт из фоновых изображений управляется средствами CSS, а вот как управлять спрайтом из обычных изображений?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Владимир. Дело в том, что фоновые или любые другие служебные изображения подключаются к шаблону с помощью CSS и именно из них создают CSS-страйты. Если картинки выводятся в HTML, то создать из них страйт не представляю возможным.

      Ответить
  16. Анатолий:

    Здравствуйте, Виталий. Мне очень понравились Ваша статья и рекомендации, но к сожалению для меня это пока очень сложно. Я только пытаюсь со всем этим разобраться. Может быть Вы возьметесь за такую работу, как устранение рекомендаций PageSpeed Insights. За ранее спасибо, за ответ.

    Ответить
  17. Юрий:

    Сжал программой стили вышло в 2 раза меньше, случайно попал на ваш сайт. Спасибо!

    Ответить
  18. Владимир:

    Здравствуйте Виталий!
    Статья очень нужная. Огромное спасибо. Однако хотелось бы уточнить один момент. Вы пишете «Если у Вас нет свежей резервной копии файлов, то сделайте ее», но не уточняете, каких файлов. Мне кажется, что достаточно скопировать файлы темы, или Вы считаете, что надо копировать весь функционал блога (всю папку public и искать по всем вложенным в нее папкам и файлам).
    Спасибо.

    Ответить
    • Виталий Кириллов:

      Владимир, тут кто как хочет. Каму-то удобней все файлы копировать, чтобы была копия и корня сайта и плагинов. Кому-то будет достаточно темы. Лично я делаю полную копию.

      Ответить
  19. Елена:

    Виталий,здравствуйте.
    Спасибо за статью. Небольшое уточнение по зачистке. То есть, удалять необходимо те идентификаторы стилей, которые прописаны только в этом фале css и в единичном варианте? И удалять их сразу на сервере или в резервной копии на компьютере, а потом загружать?.
    Мой style.css содержит аж 1500 строк. и весит 35500 байт. У меня предупреждения постоянно при проверках, что надо сократить css. Подскажите пожалуйста, в файле style.css до какого значения искать неиспользуемые идентификаторы?
    спасибо

    Ответить
    • Виталий Кириллов:

      Сократить файл можно с помощью сервиса, адрес в тексте статьи.
      Удаление не используемых классов и идентификаторов задача сложная. В статье все расписано.
      Что значит «до какого значения искать» мне непонятно.

      Ответить
  20. Lucky:

    Как сжать, почистить и объединить .css понятно, а вот куда его запихнуть, так чтобы гугл pagespeed/insights не ругался и не просил удалить css из верха сайта?

    Но если с верху убираешь, то стили грузятся с задержкой и это тоже плохо.

    Как можно решить этот вопрос?

    Ответить
    • Виталий Кириллов:

      Надо разделять стили. Т.е, все, что не относится к отображению верхней части сайта (без прокрутки), вполне бы могло подгружаться после загрузки страницы. Следовательно и подключатся эти стили должны в футере.
      А те стили, которые напрямую отвечают за отображение верхней части сайта, должны подключатся в header, в области head.

      Ответить
      • Lucky:

        Хорошо, но ведь есть сайты, где гугл выдает 100 из 100 и css у них куда то спрятаны, вот живой пример: silazdorovyaDOTru
        Как такое возможно? куда они запихивают свой основной css ???

        Ответить
        • Виталий Кириллов:

          Там нет css подключения, т.к. весь css код, в сокращенном виде выведен в header.

          Ответить
          • Lucky:

            Ухты, ну гугл рекомендует так вставлять не большие файлы, а тут как бы огромный файл, но при этом гугл не ругается =)

            А как Вы относитесь к такой реализации css на сайте?

            Ответить
            • Lucky:

              Посмотрел, у меня stely в 2 раза больше по размеру, при максимальном сжатии, гляну как гугл на это отреагирует =)

              Ответить
  21. Сергей:

    Спасибо за статью.
    Попробовал, сжимает, но вот программа Compressor вносит какие то изменения и начинаются ошибки, пробовал вначале удалить все комменты, затем по частям, только 1/3 удалось сжать. В других 2/3 частях при сжатии возникаю баги. Так и оставил, долго искать их.

    Страница на которой экспериментировал — infobg.ru/hotel.htm
    На главной старый стиль(нет адаптивной верстки), не успел еще поменять.

    Ответить
  22. Сергей:

    Может в этом проблема?
    код:
    .carousel {
    padding: 0.5em 0 0.5em 0;
    }
    после супер легкого компресса:
    .carousel
    {
    padding:.5em 0
    }

    Ответить
    • Виталий Кириллов:

      Это одно и тоже, просто второй вариант в сокращении.

      Ответить

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

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS