Некоторые темы оформления WordPress загружают более чем один файл стилей CSS . Когда CSS-файлов много, увеличивается число запросов к серверу, скорость работы сайта падает. Необходимо объединить CSS-файлы стилей темы оформления в один .
Также помните, что многие плагины подключают свои CSS-файлы , которые тоже необходимо объединять либо отключать — .
1. Анализ загрузки сайта: сколько файлов стилей подключается в теме оформления?
1) Посмотрим лог загрузки нашего сайта . Для этого зайдем на сервис Pingdom Website Speed Test . Указываем адрес нашего сайта и нажимаем кнопку «Test Now».
2) Какие CSS файлы загружает тема оформления? Прокручиваем страницу ниже, сразу к последовательности загружаемых файлов. Находим, где загружаются файлы с расширением .css
Далее наводим курсор на название каждого CSS-файла и смотрим, по какому пути он лежит на сервере. Нам нужны только те CSS-файлы, которые лежат в папке нашей темы оформления WordPress . Путь к этим файлам имеет вид:
/wp-content/themes/ваша_тема_оформления/
На картинке показаны CSS-файлы, загружаемые темой оформления:
Рамкой выделены те файлы стилей, которые загружаются нашей темой оформления. Их аж 6 штук — очень много, это целых 6 запросов к серверу.
Выпишем или запомним имена файлов стилей CSS.
2. Где подключаются CSS-файлы стилей темы оформления?
Чтобы определить, где подключаются CSS-файлы, зайдем в админ.панель WordPress --> Внешний вид --> Редактор --> Смотрим на правую колонку.
Обычно CSS-файлы подключаются темой в файле шапки сайта — header.php . Находим его в правой колонке файлов и кликаем на него.
Если нужные нам CSS-файлы нашлись — отлично.
На картинке выделено подключение внешнего Гугл-шрифта. Если он нам не нужен — удалим эту строку и затем в файле CSS-стилей темы оформления везде сотрем упоминание этого шрифта.
А если файлы стилей не найдены? Тогда надо продолжить поиск, CSS-файлы могут подключаться в разных местах в зависимости от темы оформления.
На картинке пример, когда файл стилей подключается в init.php, причем способ подключения отличается от такового в шапке сайта:
Как искать CSS-файлы эффективно? Для этого нам потребуется файловый менеджер, например, .
Мы копируем все файлы темы оформления на наш компьютер. Далее заходим в Total Commander, открываем в нем папку темы оформления. Нажимаем «Поиск файлов», ставим галовку «С текстом» и вписываем имя нужного файла стилей:
Среди найденных файлов будут тот, в котором подключается наш CSS-файл стилей. Если файл найти не удалось — расширим поисковый запрос до простого css
После чего открываем каждый из найденных файлов и смотрим его на предмет подключение файла стилей в нем.
3. Копируем стили в главный файл стилей темы оформления.
Мы не может просто отключить все лишние CSS-файлы, иначе мы потеряем стилевое оформление сайта. Прежде нам нужно скопировать все их содержимое в главный файл стилей темы оформления (обычно это файл style.css ).
Он лежит по пути: /wp-content/themes/ваша_тема_оформления/style.css
Смотрим в логе загрузки сайта, где лежат остальные загружаемые CSS-файлы, заходим по указанному пути, открываем файлы блокнотом, копируем их содержимое в файл style.css .
Все, стили мы скопировали.
4. Отключение лишних CSS-файлов темы оформления.
Теперь просто удаляем ранее найденный код, в котором подключаются эти дополнительные файлы стилей .
Удалять следует код такого вида:
1)
2) wp_register_style ("elements_style", $directory_uri . "/elements/lib/css/elements.css");
wp_enqueue_style ("elements_style");
3)
Делаем это по одному для каждого файла и после удаления каждый раз проверяем работоспособность сайта и наличием в нем изменений. Перед проверкой не забываем очистить кеш браузера и кеш сайта , особенно если вы используете плагины кеширования (например, Hyper Cache).
Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу нарушить традицию (писать во все рубрики равномерно) и предложить вашему вниманию вторую часть статьи про то, .
Дело в том, что гораздо проще писать, что называется, по горячим следам, а не вспоминать потом: «а как я смог это сделать?», что бывает довольно затруднительно, особенно по прошествии некоторого времени.
Давайте дальше продолжим пытаться увеличивать скорость с помощью такого инструмента как Page Speed, который устанавливается как дополнение к Мазиле или Хрому. В принципе, наверное, зря я сказал в предыдущей статье, что этот плагин сам ничего для ускорения вашего проекта сделать не может, а только дает рекомендации на что именно следует обратиться свое внимание в первую очередь. Оказывается, и сам он на что-то может сгодиться.
Оптимизация и сжатие CSS в Page Speed
В прошлой статье мы подробно рассмотрели, как установить плагин Page Speed и как настроить оптимальным образом кэширование статических объектов (изображений, скриптов, стилей) в браузерах пользователей.
После произведенных нами настроек Web сервера, этот плагин уже перестал ругаться на сильное снижение скорости из-за «Leverage browser caching»:
По сути, Пейдж Спид указывает на то, что практически все стилевые файлы, которые подгружаются в браузер посетителя вместе с 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 есть способ решить эту задачу централизовано, посредством известного вам , который должен присутствовать в папке с используемой вами темой оформления:
/wp-content/themes/название темы WordPress/functions.php
Если functions.php вы не найдете, то можете его просто создать, например, в редакторе Notepad++ и загрузить в папку с темой оформления WordPress. Но, наверняка, он все же найдется. В него вам нужно будет добавить небольшой кусочек PHP кода, такого вида:
Add_action("wp_print_styles", "my_deregister_styles", 100); function my_deregister_styles() { wp_deregister_style("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); wp_deregister_style("wp-pagenavi"); wp_deregister_style("cfq"); }
Тем самым мы отменяем регистрацию стилей оформления некоторых плагинов в WordPress. В результате чего отдельные CSS файлы этих плагинов не будут подгружаться в браузеры посетителей.
И даже в случае обновления какого-либо из них ничего не изменится и вам не нужно будет повторно копаться в их коде. Ну, а т.к. они обновляются довольно часто, то таким хитрым способом отключения мы сильно сэкономим наше время и нервы.
Вроде бы все просто — отключили и все, можно про это забыть. Так, да не так. Предварительно ведь еще нужно найти в коде каждого WP плагина (в котором отключаем подгрузку стилей) тот регистр, который отвечает за их подключение.
Если вы внимательнее посмотрите на приведенный выше код, то заметите строки, где перечислены эти самые регистры:
Wp_deregister_style("google-ajax-translation"); wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core"); wp_deregister_style("wp-pagenavi"); wp_deregister_style("cfq");
Т.е., например, для замечательного WordPress плагина регистр будет называться «wp-pagenavi», а для плагина Comment Form Quicktags — «cfq». Если вы используете те же самые расширения, что и я, то можете не лазить в их PHP код, а позаимствовать регистры из приведенного кода.
Но с отключением у всех плагинов, имеющих свои собственные файлы стилевого оформления, вам нужно не забыть скопировать все содержимое этих самых отключаемых CSS, для объединения в общий файл из папки с темой оформления (у меня style.css называется). Понятно, да?
Наверное, вы представляете о чем идет речь. Такое CSS свойство может, например, иметь такой вид:
Translate_links .translate_flag{background:url(flags.png) no-repeat;border:0;margin:0;padding:0;}
Запись url(flags.png) означает, что картинку под названием flags.png нужно будет искать в той же самой папке, где находится сам файл таблиц каскадных стилей. Но дело в том, что когда вы скопируете содержимое всех стилей плагинов, то в них наверняка будут использоваться такие вот относительные пути до изображений.
А это приведет к тому, что WordPress не сможет найти нужные картинки по указанному относительному пути. Ведь они по прежнему остались в папках с плагинами. Поэтому при объединении CSS нужно в обязательном порядке заменять относительные пути до фоновых изображений на абсолютные, имеющие примерно такой вид:
После того, как вы это сделаете, все фоновые картинки используемые плагинами, у которых вы отключили их собственные стили, вернутся на свои места. Так, думаю, что с этим вы справитесь.
Кстати, после того, как у вас весь стилевой код будет находиться в одном общем файлике, не забудьте его еще раз сжать через Page Speed , найдя в его окне строку под названием Minify CSS и щелкнув по плюсику рядом с этой надписью, а затем скопировав оптимизированный файлик «Save as». Далее замените им оригинальный файл в папке с используемой вами темой оформления WordPress.
Отключение внешних CSS для ускорения сайта на примере
Давайте теперь на конкретном примере я попробую показать, где нужно искать название регистра WordPress плагина, позволяющего отключить подгрузку его стилевого оформления. Собственно, для поиска нужного регистра нам нужен будет файлик с расширением PHP из папки с этим плагином. Вообще, все они живут в одной и той же папке:
/wp-content/plugins
Следовательно, именно здесь следует искать нужный каталог. Давайте рассмотрим для примера SyntaxHighlighter Evolved, т.к. у него довольно не типичная ситуация, заключающаяся в использовании нескольких файлов стилей в зависимости от того, какие варианты оформления вы выбрали в настройках этого плагина.
Как видите, у меня выбран вид, который был во второй версии плагина, а цветовая схема SyntaxHighlighter используется дефолтная. Теперь мне нужно будет перейти в его папку, подключившись к блогу по ФТП:
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles
скопировать содержимое двух CSS файликов, которые мы планируем отключить: shCore.css и shThemeDefault.css , т.к. именно на них нам показывает пальцем Page Speed (ну, и в настройках у меня выбрана дефолтная тема, для которой, вполне логично, нужен CSS с соответствующим названием).
После этого открываете на редактирование:
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php
Затем осуществляете поиск читайте. Искать нужно что-нибудь содержащее «CSS». В syntaxhighlighter.php это будет участок кода:
// Register theme stylesheets wp_register_style("syntaxhighlighter-core", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shCore.css"), array(), $this->agshver); wp_register_style("syntaxhighlighter-theme-default", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDefault.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-django", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeDjango.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-eclipse", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEclipse.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-emacs", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeEmacs.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-fadetogrey", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeFadeToGrey.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-midnight", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeMidnight.css"), array("syntaxhighlighter-core"), $this->agshver); wp_register_style("syntaxhighlighter-theme-rdark", plugins_url("syntaxhighlighter/" . $this->shfolder . "/styles/shThemeRDark.css"), array("syntaxhighlighter-core"), $this->agshver);
Смотрим, какие именно регистры позволят нам отключить подгрузку стилей shCore.css и shThemeDefault.css . Копируем их названия (в моем случае это будут: syntaxhighlighter-theme-default и syntaxhighlighter-core) и добавляем в functions.php (из папки с вашей темой оформления) две дополнительные строчки в описанный чуть выше кусочек кода:
Wp_deregister_style("syntaxhighlighter-theme-default"); wp_deregister_style("syntaxhighlighter-core");
И так повторяете для каждого плагина Вордпресса, у которых вы планируете отключить подгрузку стилей. Надеюсь, что вам все стало ясно и понятно. Если нет, то попробуйте перечитать еще раз, ибо тема не слишком уж и простая для понимания, хотя я и пытаюсь излишне не усложнять и не утяжелять текст (кому нужны подробности, ведь чем проще — тем лучше).
В итоге всех проведенных манипуляций у вас в functions.php будет целый список строк с регистрами плагинов, чьи стили нужно отключить. А в одном общем файле CSS, из папки с темой оформления, будет содержать весь стилевой код вашего сайта. Еще раз напомню — не забудьте сжать или, другими словами, провести оптимизацию style.css через Page Speed описанным выше способом.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Файл functions.php из папки с темой WordPress и реальные примеры его использования
Как увеличить скорость загрузки сайта по максимуму и оптимизация нагрузки на сервер
Бесплатные темы и шаблоны для WordPress - где их можно скачать
Как получить быстрый сайт - оптимизация (сжатие) изображений и скриптов, а так же уменьшение числа Http запросов
Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта
Оптимизация темы (шаблона) WordPress для снижения его нагрузки на сервер хостинга, плагин WP Tuner и число запросов к БД
Создание CSS спрайтов в онлайн генераторе Sprites Me для снижения числа запросов к серверу
Темы для WordPress - из каких шаблонов они состоят и как все это работает
Снижение потребляемой в WordPress памяти при создании страниц - плагин WPLANG Lite для подмены файла локализации
Как писать статьи в WordPress - визуальный и Html редакторы, заголовки и выделение ключевых слов
Gzip сжатие для ускорения загрузки сайта - как его включить для Js, Html и Css с помощью файла.htaccess
Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега
Пример 12.3. Неверное объединение ячеек
| Ячейка 1 | Ячейка 2 | |
| Ячейка 3 | Ячейка 4 | |
Результат данного примера показан на рис. 12.5.
Рис. 12.5. Появление дополнительной ячейки в таблице
В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan , а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.
Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 12.4.
Пример 12.4. Объединение ячеек по вертикали и горизонтали
| Браузер | Internet Explorer | Opera | Firefox | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| Поддерживается | Нет | Да | Нет | Да | Да | Да | Да |
Результат данного примера показан на рис. 12.6.
Рис. 12.6. Таблица с объединенными ячейками
В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.
CSS – специальная технология, которая позволяет управлять видом веб-документа. Ее уникальные возможности позволяют веб-мастеру не редактировать большое количество html-файлов а, изменив лишь описание в одном, добиться кардинальной смены оформления на всем сайте. CSS разработан для того, что бы оперативно изменять и корректировать внешний вид элементов страницы.
Какие есть варианты включения CSS в HTML?
Способов объединить CSS и HTML несколько: применение при помощи элемента link внешних стилей в виде совершенно отдельного css файла, встраивание при помощи элемента style стилей прямиком в HTML файл в виде специально подогнаного css текста, применение inline стиля подразумевающего под собой назначение стиля непосредственно к HTML-элементу через HTML-атрибут.
Как произвести объединение при помощи внешних стилей?
Сделать это можно исключительно с помощью элемента link располагающегося внутри элемента под названием head . Правильно выставив, тег, произойдет загрузка css файла , который в свою очередь и будет немедленно применен к документу. Естественно, файл не должен содержать в себе ничего кроме инструкций.
Как применить таблицы стилей документа?
Применить CSS возможно через таблицы стилей располагающихся непосредственно в HTML документе. Данный встроенный стиль обычно располагается между закрывающим и открывающим тегом style. Сам же style, обычно может находиться в абсолютно любой части документа.
Как применить стили, подставляемые в строку?
Этот способ обычно используется в том случае, если появилась необходимость задать стиль одному специальному элементу на странице. Не смотря на то, что он весьма спорен и может порой даже испортить и смешать содержимое документа и его стили, порой, он может быть полезен. Прежде всего, вам необходимо воспользоваться атрибутом style (непосредственно атрибутом, а не элементом) находящимся в HTML элементе (за исключением не находящихся в элементе body).
Для наглядного изучения.
Полный курс «Css практика»
]]> ]]>
Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы.
Для тех, кто хочет очень быстро научиться трюкам css стилей , ]]> рекомендую ]]> расширенный курс "CSS практика" Евгения Попова. .
На чтение 2 мин. Опубликовано 20.04.2017
Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете как объединить CSS и JS файлы для оптимизации своего сайта. По умолчанию все CSS и JS файлы отображаются по отдельности, создавая нагрузку на сайт. Вы сможете объединить данные файлы в один файл, чтобы сайт загружался быстрее. Очень простой и полезный плагин!
Установить плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
– Use Compass, поставьте здесь галочку, чтобы включить плагин.
– Compass compiler’s path, здесь указан путь составителя файлов.
– Sass compiler’s path (required only for .sass format – not .scss), путь (адрес) для CSS файлов.
– CoffeeScript compiler’s path, путь для скриптов.
– Compress styles, оптимизировать стили.
– Compress scripts, оптимизировать скрипты.
– Async attribute on footer’s script tag, загружать скрипты асинхронно.
– Resources to exclude, здесь можно исключить определённые скрипты или стили.
– Activate Log, включить журнал лог файлов.
– Development Mode, если включить данный параметр, то при каждой перезагрузке страницы будет удаляться кэш.
– Save, сохраните изменения.
– Empty AssetsMinify’s Cache, нажмите на данную вкладку, чтобы вручную удалить кэш.
Всё готово! После сохранения настроек, все скрипты и стили на вашем сайте будут объединены в один файл. Имеется в виду скрипты и стили, которые отображаются в исходном коде вашего сайта. Таким образом, ваш сайт будет быстрее загружаться!