>
Оптимизация и сжатие CSS в Page Speed — как отключить внешние файлы стилей и объединить их в один для ускорения загрузки
Здравствуйте, уважаемые читатели блога Сегодня я хочу нарушить традицию (писать во все рубрики равномерно) и предложить вашему вниманию вторую часть статьи про то, как повысить скорость загрузки сайта, которую можно прочитать тут.
Дело в том, что гораздо проще писать, что называется, по горячим следам, а не вспоминать потом: «а как я смог это сделать?», что бывает довольно затруднительно, особенно по прошествии некоторого времени.
Давайте дальше продолжим пытаться увеличивать скорость с помощью такого инструмента как Page Speed, который устанавливается как дополнение к Мазиле или Хрому. В принципе, наверное, зря я сказал в предыдущей статье, что этот плагин сам ничего для ускорения вашего проекта сделать не может, а только дает рекомендации на что именно следует обратиться свое внимание в первую очередь. Оказывается, и сам он на что-то может сгодиться.
Оптимизация и сжатие CSS в Page Speed
В прошлой статье мы подробно рассмотрели, как установить плагин Page Speed и как настроить оптимальным образом кэширование статических объектов (изображений, скриптов, стилей) в браузерах пользователей.
После произведенных нами настроек Web сервера, этот плагин уже перестал ругаться на сильное снижение скорости из-за «Leverage browser caching»:
Следующая по важности рекомендация и одновременно замечание, которое теперь присутствует в его окне при анализе скорости загрузки моего блога — это «Minify CSS» (оптимизация, сжатие файлов со стилевым оформлением, про которые вы можете почитать подробнее в статьях моего справочника по CSS, находящегося здесь).
По сути, Пейдж Спид указывает на то, что практически все стилевые файлы, которые подгружаются в браузер посетителя вместе с web страницей моего блога, могут быть существенно оптимизированы (сжаты) для снижения их веса.
Если щелкнуть по плюсику рядом с «Minify CSS», то откроется список объектов, которые желательно было бы подвергнуть оптимизации (сжать):
Но самое замечательное то, что всю работу по оптимизации (сжатию) сделает сам плагин. Посмотрите внимательно, в конце строчки с названием каждого неоптимизированного стилевого файла в его окне вам будет предложено посмотреть оптимизированную (сжатую) версию, а при желании и скачать максимально избавленный от мусора файлик таблиц каскадных стилей, который позволит, пусть и немного, но повысить скорость загрузки сайта.
Оптимизация заключается в удалении из них всех ненужных пробелов и комментариев, которые никак не влияют на работу вашего ресурса, но зато своим, пусть и маленьким, но все же дополнительным весом замедляют его загрузку.
Например, мой неоптимизированный style.css, идущий в комплекте с темой WordPress, состоял из почти 2000 строк, а после того как произошла оптимизация, удалось уменьшить количество строк в нем до 400, а сам файлик похудел на одну пятую своего изначального веса. Да и внешний вид прописанных в нем свойств после этого мне нравится гораздо больше.
Судите сами, так выглядел он до того, как мне удалось его сжать в Page Speed:
А так выглядит после его оптимизации:
Итак, для этого вам нужно будет всего-навсего скачать по ссылке «Save as» сжатую версию. Скачали?
Теперь подключаетесь по FTP, заходите в ту папку где у вас живет оригинальный файл таблиц стилей (см. путь в окне Page Speed) и заменяете старый не сжатый на новый (тот, который вам оптимизировали), не забыв дать ему такое же название, как и у оригинала, иначе таблицы каскадных стилей работать не будут. Усе, наслаждаетесь теми миллисекундами, на которые ускорилась загрузка вашего сайта.
Но кроме основного файла CSS, который обычно идет вместе с используемой вами темой оформления, в окне Пейдж Спида вы можете увидеть так же и те стилевые файлики, которые используются установленными у вас плагинами и расширениями для Вордпресс (или любого другого используемого вами движка). В принципе, вы можете точно так же их сжать, как было рассмотрено чуть выше.
Как объединить внешние CSS в один общий файл
Но самым оптимальным вариантом было бы объединить все внешние CSS в один, а уже потом его сжать средствами Page Speed. Это будет идеальный вариант, позволяющий выгадать еще несколько миллисекунд в скорости загрузки. Собственно, и сам плагин подсказывает именно такой вариант в поле «Combine external CSS»:
Здесь он нам предлагает объединить все найденные им внешние файлы (внешние скрипты тоже можно будет объединить в один — «Combine external JavaScript»), подгружаемые в браузер посетителей, в один общий, но при этом нужно будет обязательно отключить все лишние файлы стилей. Проблема возникает в том, что многие из них создают и подключают плагины или другие расширения вашего движка.
Можно, конечно же, залезть в код плагина и отключить стили оттуда, но если вы обновите данное расширение, то возможно придется опять копаться во внутренностях плагина для повторного отключения. Для WordPress есть способ решить эту задачу централизовано, посредством известного вам файла functions.php, который должен присутствовать в папке с используемой вами темой оформления:
Если functions.php вы не найдете, то можете его просто создать, например, в редакторе Notepad++ и загрузить в папку с темой оформления WordPress. Но, наверняка, он все же найдется. В него вам нужно будет добавить небольшой кусочек PHP кода, такого вида:
Тем самым мы отменяем регистрацию стилей оформления некоторых плагинов в WordPress. В результате чего отдельные CSS файлы этих плагинов не будут подгружаться в браузеры посетителей.
И даже в случае обновления какого-либо из них ничего не изменится и вам не нужно будет повторно копаться в их коде. Ну, а т.к. они обновляются довольно часто, то таким хитрым способом отключения мы сильно сэкономим наше время и нервы.
Вроде бы все просто — отключили и все, можно про это забыть. Так, да не так. Предварительно ведь еще нужно найти в коде каждого WP плагина (в котором отключаем подгрузку стилей) тот регистр, который отвечает за их подключение.
Если вы внимательнее посмотрите на приведенный выше код, то заметите строки, где перечислены эти самые регистры:
Т.е., например, для замечательного WordPress плагина постраничной навигации WP-PageNavi регистр будет называться «wp-pagenavi», а для плагина Comment Form Quicktags — «cfq». Если вы используете те же самые расширения, что и я, то можете не лазить в их PHP код, а позаимствовать регистры из приведенного кода.
Но с отключением у всех плагинов, имеющих свои собственные файлы стилевого оформления, вам нужно не забыть скопировать все содержимое этих самых отключаемых CSS, для объединения в общий файл из папки с темой оформления (у меня style.css называется). Понятно, да?
Иначе, например, SyntaxHighlighter Evolved, с помощью которого так красиво оформлен приведенный чуть выше код, не будет работать должным образом. В общем, вся красота пропадет, т.к. именно в стилях этого плагина задается такое красивое и подсвеченное представление различного кода на страницах моего блога.
Но просто скопировав код из всех файликов плагинов, не забудьте еще об одной особенности работы каскадных таблиц стилей. Очень часто в них в качестве фона (с помощью свойства background, описанного тут) используются изображения (картинки), а вот путь до них чаще всего задают в относительном виде (тут читайте про URL, относительные и абсолютные ссылки).
Наверное, вы представляете о чем идет речь. Такое CSS свойство может, например, иметь такой вид:
Запись url(flags.png) означает, что картинку под названием flags.png нужно будет искать в той же самой папке, где находится сам файл таблиц каскадных стилей. Но дело в том, что когда вы скопируете содержимое всех стилей плагинов, то в них наверняка будут использоваться такие вот относительные пути до изображений.
А это приведет к тому, что WordPress не сможет найти нужные картинки по указанному относительному пути. Ведь они по прежнему остались в папках с плагинами. Поэтому при объединении CSS нужно в обязательном порядке заменять относительные пути до фоновых изображений на абсолютные, имеющие примерно такой вид:
После того, как вы это сделаете, все фоновые картинки используемые плагинами, у которых вы отключили их собственные стили, вернутся на свои места. Так, думаю, что с этим вы справитесь.
Кстати, после того, как у вас весь стилевой код будет находиться в одном общем файлике, не забудьте его еще раз сжать через Page Speed, найдя в его окне строку под названием Minify CSS и щелкнув по плюсику рядом с этой надписью, а затем скопировав оптимизированный файлик «Save as». Далее замените им оригинальный файл в папке с используемой вами темой оформления WordPress.
Отключение внешних CSS для ускорения сайта на примере
Давайте теперь на конкретном примере я попробую показать, где нужно искать название регистра WordPress плагина, позволяющего отключить подгрузку его стилевого оформления. Собственно, для поиска нужного регистра нам нужен будет файлик с расширением PHP из папки с этим плагином. Вообще, все они живут в одной и той же папке:
Следовательно, именно здесь следует искать нужный каталог. Давайте рассмотрим для примера SyntaxHighlighter Evolved, т.к. у него довольно не типичная ситуация, заключающаяся в использовании нескольких файлов стилей в зависимости от того, какие варианты оформления вы выбрали в настройках этого плагина.
Как видите, у меня выбран вид, который был во второй версии плагина, а цветовая схема SyntaxHighlighter используется дефолтная. Теперь мне нужно будет перейти в его папку, подключившись к блогу по ФТП:
скопировать содержимое двух CSS файликов, которые мы планируем отключить: shCore.css и shThemeDefault.css , т.к. именно на них нам показывает пальцем Page Speed (ну, и в настройках у меня выбрана дефолтная тема, для которой, вполне логично, нужен CSS с соответствующим названием).
После этого открываете на редактирование:
Затем осуществляете поиск с помощью возможностей Notepad++, о всех достоинствах которого тут читайте. Искать нужно что-нибудь содержащее «CSS». В syntaxhighlighter.php это будет участок кода:
Смотрим, какие именно регистры позволят нам отключить подгрузку стилей shCore.css и shThemeDefault.css . Копируем их названия (в моем случае это будут: syntaxhighlighter-theme-default и syntaxhighlighter-core ) и добавляем в functions.php (из папки с вашей темой оформления) две дополнительные строчки в описанный чуть выше кусочек кода:
И так повторяете для каждого плагина Вордпресса, у которых вы планируете отключить подгрузку стилей. Надеюсь, что вам все стало ясно и понятно. Если нет, то попробуйте перечитать еще раз, ибо тема не слишком уж и простая для понимания, хотя я и пытаюсь излишне не усложнять и не утяжелять текст (кому нужны подробности, ведь чем проще — тем лучше).
В итоге всех проведенных манипуляций у вас в functions.php будет целый список строк с регистрами плагинов, чьи стили нужно отключить. А в одном общем файле CSS, из папки с темой оформления, будет содержать весь стилевой код вашего сайта. Еще раз напомню — не забудьте сжать или, другими словами, провести оптимизацию style.css через Page Speed описанным выше способом.
Сжатию посвящен третий ролик из 6 видеоуроков по теме ускорения сайта, которые, на мой взгляд, имеет смысл посмотреть целиком, чтобы воспринимать картинку оптимизации в целом (нужный ролик можно выбрать из выпадающего списка в левом верхнем углу окна плеера):
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Подборки по теме:
Комментарии и отзывы
По сжатию CSS — http://blog.wadmin.ru/2011/01/compress-css-part-1/
Для Joomla! есть неплохой плагин CssJsCompress, правда мне его пришлось настраивать под себя некоторое время.
Юрий, а этот плагин будет работать для связки joomla+virtuemart?
О, большое спасибо за статью. Я как раз только-только начал осваивать Вордпресс.
Дмитрий, спасибо, целый день работаю с блогом по Вашим статьям о повышении скорости загрузки сайта.
Однако с данным приемом — объединить все CSS — у меня не вышло. После проделанного сайт «поехал» влево, исчез фон. Пришлось возвращать обратно :- ( Видимо, недаром эти файлы все-таки порознь находятся или в них надо что-то подкорректировать, что бы они, находясь в одном файле, «подружились».
Виктория: при объединении CSS файлов нужно будет поменять все относительные путь фоновых изображений на абсолютные (более подробно смотрите в этой статье). В этом может быть причина отсутствия фона. А вот почему поехал дизайн, затрудняюсь ответить.
Дмитрий, спасибо, я выбрала другой путь сжатия файлов CSS и Java — установила плагин WP Minify, и замечания в PageSpeed по этому поводу исчезли. А так почти все шаги, что в моих силах были, по Вашим советам сделала, спасибо еще раз!
Виктория: спасибо, еще не знаком с WP Minify, надо посмотреть и возможно, попробовать.
Все сделал как написано в статье — увеличились значения Page Speed с 79 до 86 =)))) Доволен как слон :)))
Подскажите, а как правильно выполнить «Combine external JavaScript».
Я пыталась найти в Интернете инструкцию по настройке плагина WP Minify, но ничего вразумительного не нашла. Вы бы не могли кратко описать процесс настройки — у меня не получилось, дизайн «поплыл». Кошмар, в общем. Заранее признательна �
он формирует URL который вызывает чтение всех стилевых листов.
правильнее будет все же оптимизировать CSS и настроить кэширование.
Дмитрий: в css важную роль играет то, в каком именно месте прописать тот или иной параметр, чем ниже написан параметр, тем выше он имеет приоритет, осмелюсь предположить, что это и послужило причиной съехавшего шаблона
Наконец то нормальное описания сжатия стилей. Везде сталкивался только с тем, что блогеры копируют друг у друга. А здесь (в прочем как и всегда) все разложено по полочкам. Объединил пару стилей и уже дошел до 81/100. Очень радует. Проблема в том, что еще не везде нашел регистры, которые позволяют отключать стили плагинов.
а зачем такие сложности: подключаться к ftp, искать там папку, там папку плагина, и там нужный файл, не проще ли зайти в админку wordpress, выбрать пункт редактор плагинов, там есть заголовок «шаблоны» со списком файлов плагина и «стили» со списком *.css файлов. и в кодировке нормальной все комментарии к кодам отображаются, да и найти нужный файл гораздо быстрее можно.
Всё-таки заменять пути к картинкам на абсолютные с доменом — это плохая идея. Ибо если вдруг Ваш сайт поменяет домен, то придётся в очередной раз править и стили. Поэтому вместо background:url (http://ktonanovenkogo.ru/path/to/image.jpg) лучше использовать background:url (/path/to/image.jpg)
Спасибо вам большое! статья супер! помогла. правда до сих пор каша в голове))
Спасибо за интересную инфу, но
не помогает, если плагин выводит свои стили в футере.
В таком случае мне помог код:
С minify попроще, вот первоисточники: http://www.mrclay.org/2008/09/19/minify-21-on-mrclayorg/ и https://code.google.com/p/minify/. Правда, насколько оно безопасно с точки зрения взлома — неизвестно.
к сожалению, данное расширение уже сложно найти, есть только сервис
у меня возник вопрос.
Смотрите, хочу css из плагинов, а именно cformsII перенести в style.css Гугл спид тест показывает что нужно оптимизировать 2 файла: cforms2012.css и calendar.css
Но дело в том, что например на calendar.css ссылается множество других css, в которых в начале кода указано: @import «calendar.css»; даже в том же cforms2012.css указано это изначально. Что делать в этом случае? Если я возьму код calendar.css и перенесу его в style.css в корне сайта который, то мне необходимо во всех файлах удалить строку @import «calendar.css»; или же можно ничего не делать?
НА этом сайте информация устарела
Google Page Speed сжимает CSS файлы слабо.
Если использовать https://cssresizer.com/ru результат будет значительно лучше.
Неоднократно тестировал оба сервиса. Разница в размере кода после оптимизации: 7-8%.
Здравствуйте! Спасибо за сервис, бум пользоваться.
Но тема тоже обновляется и в functions.php придется все делать заново. Либо никогда не обновлять тему или вносить изменения в functions.php дочерней темы.
