Всем привет! Сегодня на seo-mayak.com мы продолжим выполнять рекомендации PageSpeed и разберем пункт «Сократите CSS», что позволит еще немного ускорить загрузку сайта.
После выхода статьи «Как включить gzip сжатие и кратно ускорить сайт» мне написал один мой читатель и посетовал на то, что он не может включить статическое gzip сжатие, так как его сайт еще находится в стадии становления и ему приходиться постоянно редактировать файлы.
В связи с этим хотел бы сказать несколько слов о том, когда или на какой стадии развития сайта стоит приступать к работе с рекомендациями PageSpeed, а также о последовательности выполнения тех или иных пунктов.
Наверно самое большое влияние на скорость загрузки сайте оказывают изображения. Если анализ PageSpeed определил в красную зону пункты «Оптимизируйте изображения», «Предоставьте изображения с нужными пропорциями» и «Укажите размеры изображений», то чем раньше Вы приступите к выполнению данных рекомендаций, тем меньше Вам впоследствии придется возится с картинками. Т.е. лучше заранее оптимизировать изображения и уже потом загружать их на сервер.
Также на любой стадии развития сайта можно приступать к работе над пунктом «Используйте кэш браузера». В одной из следующих статей я обязательно расскажу, как включить кэширование данных в браузере, конечно без использования каких-либо плагинов, так что подписывайтесь на обновления блога.
В общем, все что касается кеша и изображений, за исключением пункта «Объедините изображения в CSS-спрайты» можно начинать выполнять хоть с самого рождения проекта.
А такие рекомендации как: «Сократите CSS», «Сократите JavaScript», «Сократите HTML», «Включите gzip сжатие» (имеется в виду статическое gzip сжатие), «Встройте небольшие CSS», «Встройте небольшие ресурсы JavaScript», «Объедините изображения в CSS-спрайты» лучше выполнять на уже сформировавшихся ресурсах, так как в ходе работ придется сжимать, изменять содержание файлов, что затруднит последующие их редактирование.
Что касается мох познаний в сайтостроении, то я без особого труда могу разобраться: хоть в сжатых файлах, хоть не в сжатых, так что для опытных веб-мастеров это не большая проблема, что нельзя сказать про новичков.
Итак, если Вы закончили с дизайном сайта и его функционалом, то самое время приступить к сокращению объема файлов, которые подгружаются вместе с основным контентом, а это css-файлы, js-файлы и html-файлы, что позволит ускорить загрузку сайта.
Про сокращение js и html файлов мы поговорим в другой раз, а сейчас я расскажу, как сократить CSS. Поехали!
Технология удаления «мертвых» стилей
Прежде всего надо провести тщательную ревизию в файле style.css и выявить стили, которые не используются в шаблоне.
Но как определить какие стили используются, а какие нет? На самом деле сложного в этом ничего нет. Если у Вас нет свежей резервной копии файлов, то сделайте ее с помощью FTP клиента FileZilla.
Затем в редакторе Notepad++ открываем файл style.css, выделяем любой класс или идентификатор (выделать надо только слово, без точки или решетки) и во вкладке «Поиск» выбираем пункт «Найти в файлах»:
В открывшимся окне жмем на кнопку «…», как показано на скриншоте:
И в резервной копии фалов ищем папку с темой:
Далее жмем на кнопку «Найти все»:
После чего в редакторе появится дополнительное окно с результатами поиска:
В моем случаи результаты таковы. Notepad++ нашел только одно совпадение, которое находится в файле style.css.
О чем это говорит? А говорит это о том, что данный идентификатор не используется в шаблоне и все стили, прописанные для него, бесполезны и просто засоряют файл.
Поэтому смело удаляем данный идентификатор со всеми селекторами и их значениями:
Давайте рассмотрим другой пример. Я произвольно выбрал класс и результат поиска показал следующее:
Видно, что класс «homepage_post» используется в файлах шаблона, таких как: 404.php, archve.php, index.php, page.php, search.php и sindle.php.
Из этого следует, что данный класс и все стили прописанные для него, работают и удалять их не надо.
Надеюсь понятно. Таким способом проверьте все классы и идентификаторы. Уверен, что вы обязательно найдете «мертвые стили», избавившись от которых, сократите код CSS. Работа конечно нудная, но проделать ее надо, если мы хотим ускорить загрузку сайта. Идем дальше.
Объединение файлов CSS
Теперь, когда мы избавились от «мертвых» стилей, можно приступать ко второму этапу сокращения CSS.
В некоторый шаблонах может использоваться несколько файлов стилей. Они могут по разному называться, но все они должны иметь расширение .css. Эти файлы также стоит проверить на «мертвые» стили.
Наша задача состоит в том, чтобы объединить все файлы стилей, в один файл. Это не сложно, просто скопируйте содержимое дополнительных файлов стилей и вставьте в самый конец основного файла -style.css.
После чего, дополнительные файлы стилей можно удалить. Также надо избавиться от кодов подключения удаленных файлов, которые находятся в header.php.
Обязательно делайте копии и чем больше будет резервных копий, тем лучше. Этим Вы избавите себя от лишних проблем. В любой случаи, если что будет непонятно, лучше спросите в комментариях и я постараюсь разъяснить тот или иной момент более подробно.
Но если Вы боитесь лезть в коды, то лучше этого не делать. Как говориться, страх плохой советчик. Значит Вы еще не готовы и лучше не торопится. Обучайтесь, набирайтесь опыту, вернутся к проведению данных работ никогда не поздно или в крайнем случаи обратитесь к человеку, у которого есть опыт и нет страха.
Как сократить CSS
Итак, мы имеем один файл style.css. Теперь на надо сократить его объем (не путать с сжатием файлов).
Технология сокращения CSS довольно простая. Надо убрать ненужные комментарии, пробелы, табуляции и пустые строки. Опять же пределы сокращения CSS могут быть разные. Все зависит от того, собираетесь ли Вы редактировать файл style.css в будущем.
Что касается меня, то я постоянно редактирую стили и уверен, что многие веб-мастера делают тоже самое. Сокращение CSS можно разделить на три вида: прогрессивное, умеренное и щадящие.
Прогрессивное сокращение CSS подразумевает размещение всех классов, идентификаторов и их селекторов в одной строке. Т,е, в файле style.css, после такого сокращения, останется только одна строка, но очень длинная.
Серверу будет требоваться гораздо меньше времени на подгрузку такого файла, но редактировать его будет весьма неудобно, хотя с помощью функции поиска в редакторе Notepad++ найти нужный класс или идентификатор не составит особого труда.
Для реализации прогрессивного сокращения можно воспользоваться сервисом
csscompressor.com. Копируем содержимое файла style.css и вставляем в поле на странице сервиса:
Выбираем наибольшее сжатие «Highest (no readability, smallest size)» и жмем на кнопку «Compress».
Мой подопытный css код имел исходный размер 10240 байт. После сокращения он похудел примерно на 43% и стал весить 6546 байт:
Чтобы не заниматься нудной работой и вручную не удалять все пробелы табуляции и т.д, можно воспользоваться вышеописанным сервисом csscompressor.com, только перед сокращением, в настройках надо выбрать строчку «High (moderate readability, smaller size)»:
Также можно воспользоваться расширением PageSpeed для браузера Mozilla Firefox. Для этого, в результатах анализа выбираем пункт «Сократите CSS», жмем на стрелочку рядом с ним. Затем кликаем по ссылке «optimizet version»:
И PageSpeed предоставит нам щадящее сокращении CSS кода:
Останется только скопировать и вставить код в файл style.css.
Умеренное сокращение CSS — это вручную доработанное щадящие сокращение. Данный способ я использую сам. Заключается он в том, что в одну строку помещаются стили, отвечающие за определенный участок сайта, при этом я помечаю каждую строчку, соответствующим комментарием:
В общей сложности у меня получилось 38 строк, но при желании можно сделать еще меньше.
После реализации любого из вышеперечисленных способов, пункт «Сократить CSS» должен оказаться в зеленой зане, что конечно поможет ускорить загрузку сайта.
До встречи!
С уважением, Виталий Кириллов
« Оптимизация WordPress. Нагрузка на сервер и как ее снизить
« PageSpeed — реальное ускорение сайта
« Как включить gzip сжатие и кратно ускорить сайт
« Как включить кэш браузера на стороне пользователя
Спасибо за статью, Виталий!
Помню, тоже возилась с этим файлом стилей. Почти в два раза сократила, кучу ненужного убрала. Вот только до его компрессии руки не доходят. Несмотря на то, что работы над дизайном позади, все равно иногда приходится заглядывать в этот файл, чтобы что-то отредактировать или добавить новый стиль. А перспектива искать что-то в одной строке или даже в десяти не очень радует. Так что лично я пока предпочитаю удобство в ущерб скорости загрузки.
Позвольте, Виталий, отметить один момент. Способ удаления «мертвых» стилей не такой простой. С помощью блокнота можно обнаружить только те стили, которые упоминаются в файлах-шаблонах. А как же содержимое страниц, которое хранится в БД?
Здравствуйте Наталья! Вы правильно подметили. Те стили, которые предусмотрены для тегов заголовков h3, h4 и т.д. Служебных тегов, типа: code, img, blockquote, a, ul, ol, li, а также для тегов таблиц: table, tr, td — не относятся к классам или идентификаторам, о которых шла речь в статье. Конечно их не надо удалять! Хотя ревизию в них также навести можно. И я еще раз всех предупреждаю, перед началом работ, надо обязательно делать резервные копии, с которых можно восстановить, случайно удаленные, нужные стили.
Сложная и кропотливая работа, но ее нужно сделать, чтобы сайт работал быстрее и не терять посетителей из-за долгой загрузки.
Полностью с Вами согласен Юлия. НО! Жизнь блогера и не обещала быть легкой.
Сократила стили, скорость загрузки, наверное, немного увеличилась. Правда, про «мёртвые» стили ничего не поняла — как понять, что нужно, а что нет? Думаю, когда-нибудь разберусь с этим.
Спасибо, Виталий, за полезную серию статей!
Виталий, а вы возьметесь за такую работу выполнить все рекомендации PageSpeed на сайте и сколько это будет стоить?
Анна напишите мне через форму обратной связи.
Спасибо за подробное объяснение! Попытаюсь выполнить все описанное на своем блоге, с виду все просто, так что должно получиться.
97/100 — это прекрасный результат! Я только сейчас взялся за преобразование сайта, в будущем буду уходить с joomla, надоела она мне, плодит дубли. Возьмусь на написание с нуля. О многих сервисах, упомянутых здесь я даже и не слышал, хотя гугл постоянно напоминает о необходимости сокращения. Спасибо.
Я может куда-то не туда смотрю, но например на эту страницу, результат показывает 80/100?
C момента написания статьи многое изменилось, да и дополнения PageSpeed для Firefox уже нет .
Совершенно замечательная практическая статья!!! Особенная благодарность за методику обнаружения никчемных блоков CSS! А статья по компрессии стилей и скриптов тут же дала результаты.. Пока не могу добить вопрос кеширования, на одном сайте получается, на другом нет, хотя и тема и сервер один и тот же… Буду добивать! Спасибо Вам за столь детальный опыт!
А если нужно добавить новый стиль, то просто добавляешь с новой строки его и потом обратно на csscompressor.com нужно идти и заново все уменьшать?
Сжал вчера свой Style.css на треть = ) и гугл дал добро, с CSS проблем больше нет.
Вот только чистить я не стал, так как на производительность сильно не повлияет, так как сжатие на треть всего файла — дало всего несколько процентов ускорения.
Поэтому если Вы не про в чистке и у вас не сайт миллионник с продажами, считаю можно обойтись и простым сжатием, я до стандарта сжимал.
Но на всякий случай сохранил копии, так как компрессор в первую очередь трет все описания к стилям.
Автору еще одно спасибо за полезный материал!
«Для своего блога я выполнил почти все рекомендации PageSpeed — 97/100, после чего в результатах анализа не осталось ни красных зон, ни желтых, а приятно радуют глаз сплошные зеленые галочки»
В данное время 85/100 для компа и 78/100 для моьайла. Почему резвость и слово не держите?
Я конечно убрал из статьи текст цитаты, которую вы привели в комментарии и изображение тоже убрал, хотя к старым статьям я редко возвращаюсь и что-то там правлю.
Уважаемый Leo88, вы смотрели на дату выхода статьи? С того времени много воды утекло и много что изменилось. Расширение PageSpeed для Mazilla Firefox теперь вообще не существует, также убрали соответствующее расширение для Chrome. Остался только онлайн сервис developers.google.com, алгоритмы и интерфейс которого значительно отличаются. Не думаю, что вы смогли набрать себе очков, проведя столь «тщательный» анализ моего блога!
Виталий привет! У меня проблемка с оптимизацией 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. В общем вопрос отпадает!
Виталий, со сжатием все понятно, а как быть с объединением файлов css темы в один? Ни на одном ресурсе большого пространства интернета не нашел пошаговой инструкции, может ты напишешь в комментарии? или даже отдельную статью можно этому посвятить…а то через плагин w3 cache объединение не проходит, почему-то, как все пишут и speedinsite ругается, что не проведена оптимизация!
Каждый случаи индивидуален, поэтому экспериментируйте. Возможно и напишу в будущем, хотя по-мне сложного в объединении файлов ничего нет. Просто копируешь содержимое одного файла и вставляешь в другой (основной).
Щас попробуем.
Здравствуйте Виталий!
Мне очень понравились Ваши статьи. Они понятны, конкретны и актуальны. Я сейчас занимаюсь оптимизацией своего блога, поэтому Ваши статьи – это как раз именно то, что нужно, поэтому я подписался на обновления. Правда Интернет развивается очень быстро, поэтому дата публикации поста действительно имеет большое значение.
Прочитав комментарии, я тоже хочу задать свой вопрос, который для меня сейчас является и актуальным и срочным. Вы и Ваши читатели упоминали о спрайтах иллюстраций. Я тоже изучал этот вопрос, поскольку это может существенно ускорить загрузку сайта. В Интернете есть руководства по этому вопросу, но, насколько я понял, спрайты можно делать только для фоновых изображений. Вы об этом не упоминаете, считаете ли Вы, что спрайты можно делать и для обычных изображений? Дело в том, что спрайт из фоновых изображений управляется средствами CSS, а вот как управлять спрайтом из обычных изображений?
Здравствуйте Владимир. Дело в том, что фоновые или любые другие служебные изображения подключаются к шаблону с помощью CSS и именно из них создают CSS-страйты. Если картинки выводятся в HTML, то создать из них страйт не представляю возможным.
Здравствуйте, Виталий. Мне очень понравились Ваша статья и рекомендации, но к сожалению для меня это пока очень сложно. Я только пытаюсь со всем этим разобраться. Может быть Вы возьметесь за такую работу, как устранение рекомендаций PageSpeed Insights. За ранее спасибо, за ответ.
Сжал программой стили вышло в 2 раза меньше, случайно попал на ваш сайт. Спасибо!
Здравствуйте Виталий!
Статья очень нужная. Огромное спасибо. Однако хотелось бы уточнить один момент. Вы пишете «Если у Вас нет свежей резервной копии файлов, то сделайте ее», но не уточняете, каких файлов. Мне кажется, что достаточно скопировать файлы темы, или Вы считаете, что надо копировать весь функционал блога (всю папку public и искать по всем вложенным в нее папкам и файлам).
Спасибо.
Владимир, тут кто как хочет. Каму-то удобней все файлы копировать, чтобы была копия и корня сайта и плагинов. Кому-то будет достаточно темы. Лично я делаю полную копию.
Виталий,здравствуйте.
Спасибо за статью. Небольшое уточнение по зачистке. То есть, удалять необходимо те идентификаторы стилей, которые прописаны только в этом фале css и в единичном варианте? И удалять их сразу на сервере или в резервной копии на компьютере, а потом загружать?.
Мой style.css содержит аж 1500 строк. и весит 35500 байт. У меня предупреждения постоянно при проверках, что надо сократить css. Подскажите пожалуйста, в файле style.css до какого значения искать неиспользуемые идентификаторы?
спасибо
Сократить файл можно с помощью сервиса, адрес в тексте статьи.
Удаление не используемых классов и идентификаторов задача сложная. В статье все расписано.
Что значит «до какого значения искать» мне непонятно.
Как сжать, почистить и объединить .css понятно, а вот куда его запихнуть, так чтобы гугл pagespeed/insights не ругался и не просил удалить css из верха сайта?
Но если с верху убираешь, то стили грузятся с задержкой и это тоже плохо.
Как можно решить этот вопрос?
Надо разделять стили. Т.е, все, что не относится к отображению верхней части сайта (без прокрутки), вполне бы могло подгружаться после загрузки страницы. Следовательно и подключатся эти стили должны в футере.
А те стили, которые напрямую отвечают за отображение верхней части сайта, должны подключатся в header, в области head.
Хорошо, но ведь есть сайты, где гугл выдает 100 из 100 и css у них куда то спрятаны, вот живой пример: silazdorovyaDOTru
Как такое возможно? куда они запихивают свой основной css ???
Там нет css подключения, т.к. весь css код, в сокращенном виде выведен в header.
Ухты, ну гугл рекомендует так вставлять не большие файлы, а тут как бы огромный файл, но при этом гугл не ругается =)
А как Вы относитесь к такой реализации css на сайте?
Посмотрел, у меня stely в 2 раза больше по размеру, при максимальном сжатии, гляну как гугл на это отреагирует =)
Спасибо за статью.
Попробовал, сжимает, но вот программа Compressor вносит какие то изменения и начинаются ошибки, пробовал вначале удалить все комменты, затем по частям, только 1/3 удалось сжать. В других 2/3 частях при сжатии возникаю баги. Так и оставил, долго искать их.
Страница на которой экспериментировал —
infobg.ru/hotel.htmНа главной старый стиль(нет адаптивной верстки), не успел еще поменять.
Может в этом проблема?
код:
.carousel {
padding: 0.5em 0 0.5em 0;
}
после супер легкого компресса:
.carousel
{
padding:.5em 0
}
Это одно и тоже, просто второй вариант в сокращении.
Здравствуйте! Ваши статьи — БОМБА!!!
Как сжать CSS — понятно, но не пойму с некоторыми стилями, как говорится ХУ из ХУ.
Как понять какой тут стиль, если их на строке пишется 2 ?
span.big {
font-size: 13px;
}
p.bot4px {
font-size: 11px;
margin: 0;
padding: 0 0 4px 0;
color: #afafaf;
}
.order-gateway input[type="submit"]:hover,
.post-block .post-left {
width: auto;
}
Разъясните, пожалуйста!!!
Здравствуйте Сергей!
Классы в css файле прописывается начиная с точки (.post-block).
Все html теги (p) прописываются так как они есть (input).
Изучайте css, язык не сложный, тем более в интернете полно бесплатных курсов.
Полезная статья насчёт css ни разу ещё с этим не сталкивался, сейчас буду пробовать. Если чего-то не получится напишу здесь.
Виталий, про нотепад уже не раз слышала, но пользоваться необходимости особой не возникало. Хочу неиспользуемые стили удалить. Не пойму, откуда данные брать — где базу сохранять (на хостинге) и как открывать. Посмотрела, что при установке нотепада спрашивает дополнительную загрузку трех элементов. Они нужны?
А еще возник вопрос. Если удаляю ненужные элементы в стилях, то после обновлений темы вордпресса не появятся старые данные? Сейчас работаю в дочерней теме со всеми правками. Там «хлам» не держу. И сжимать почему-то не страшно. В смысле, что, если знаешь, что из старого подправить нужно, то контрл+шифт в помощь … и дело «техники».
контр+эф..
после хостинге — вопрос
Как открыть в редакторе Notebad++ файл style.css?? копаюсь уже 3 часа, никак открыть не могу