Некоторые темы оформления WordPress загружают более чем один файл стилей CSS. Когда CSS-файлов много, увеличивается число запросов к серверу, скорость работы сайта падает. Необходимо объединить CSS-файлы стилей темы оформления в один.
Также помните, что многие плагины подключают свои CSS-файлы, которые тоже необходимо объединять либо отключать — у нас на эту тему есть статья.
1. Анализ загрузки сайта: сколько файлов стилей подключается в теме оформления?
1) Посмотрим лог загрузки нашего сайта. Для этого зайдем на сервис
2) Какие CSS файлы загружает тема оформления? Прокручиваем страницу ниже, сразу к последовательности загружаемых файлов. Находим, где загружаются файлы с расширением .css
Далее наводим курсор на название каждого CSS-файла и смотрим, по какому пути он лежит на сервере. Нам нужны только те CSS-файлы, которые лежат в папке нашей темы оформления WordPress. Путь к этим файлам имеет вид:
/wp-content/themes/ваша_тема_оформления/
На картинке показаны CSS-файлы, загружаемые темой оформления:
Рамкой выделены те файлы стилей, которые загружаются нашей темой оформления. Их аж 6 штук — очень много, это целых 6 запросов к серверу.
Выпишем или запомним имена файлов стилей CSS.
2. Где подключаются CSS-файлы стилей темы оформления?
Чтобы определить, где подключаются CSS-файлы, зайдем в админ.панель WordPress --> Внешний вид --> Редактор --> Смотрим на правую колонку.
Обычно CSS-файлы подключаются темой в файле шапки сайта — header.php. Находим его в правой колонке файлов и кликаем на него.
Далее смотрим на код и пытаемся найти нам CSS-файлы. Выполним быстрый поиск css-файлов. Нажимаем ctrl+F и вводим в поисковой строке css
Если нужные нам CSS-файлы нашлись — отлично.
На картинке выделено подключение внешнего Гугл-шрифта. Если он нам не нужен — удалим эту строку и затем в файле CSS-стилей темы оформления везде сотрем упоминание этого шрифта.
А если файлы стилей не найдены? Тогда надо продолжить поиск, CSS-файлы могут подключаться в разных местах в зависимости от темы оформления.
На картинке пример, когда файл стилей подключается в init.php, причем способ подключения отличается от такового в шапке сайта :
Как искать CSS-файлы эффективно? Для этого нам потребуется файловый менеджер, например, Total Commander.
Мы копируем все файлы темы оформления на наш компьютер. Далее заходим в Total Commander, открываем в нем папку темы оформления. Нажимаем «Поиск файлов», ставим галовку «С текстом» и вписываем имя нужного файла стилей:
Далее нажимаем «Начать поиск».
Среди найденных файлов будут тот, в котором подключается наш CSS-файл стилей. Если файл найти не удалось — расширим поисковый запрос до простого css
После чего открываем каждый из найденных файлов и смотрим его на предмет подключение файла стилей в нем.
3. Копируем стили в главный файл стилей темы оформления.
Мы не может просто отключить все лишние CSS-файлы, иначе мы потеряем стилевое оформление сайта. Прежде нам нужно скопировать все их содержимое в главный файл стилей темы оформления (обычно это файл style.css).
Он лежит по пути: /wp-content/themes/ваша_тема_оформления/style.css
Смотрим в логе загрузки сайта, где лежат остальные загружаемые CSS-файлы, заходим по указанному пути, открываем файлы блокнотом, копируем их содержимое в файл style.css.
Все, стили мы скопировали.
4. Отключение лишних CSS-файлов темы оформления.
Теперь просто удаляем ранее найденный код, в котором подключаются эти дополнительные файлы стилей.
Удалять следует код такого вида:
1) <link rel="stylesheet" href="/wp-content/themes/twentytwelve/css/dop-style.css" type="text/css" media="screen" />
2) wp_register_style ( 'elements_style', $directory_uri . '/elements/lib/css/elements.css' );
wp_enqueue_style ('elements_style');
3) <link href='http://fonts.googleapis.com/css?family=Droid+Serif|Arimo' rel='stylesheet' type='text/css'>
Делаем это по одному для каждого файла и после удаления каждый раз проверяем работоспособность сайта и наличием в нем изменений. Перед проверкой не забываем очистить кеш браузера и кеш сайта, особенно если вы используете плагины кеширования (например, Hyper Cache).
После того, как ненужные файлы отключены, проверяем сайт сервисом Pingdom, чтобы убедиться, что CSS-файлы действительно не загружаются.
Поделитесь этой записью с друзьями, буду благодарен!
Здравствуйте!
Вопрос такого рода: как удалить css-файл, который подгружается каким-либо плагином и не виден в header.php?
Здравствуйте, Роман! Нужно смотреть, где происходит подключение CSS-файла. Все индивидуально — назовите какой плагин Вы рассматриваете и мы попробуем на его примере решить вопрос отключения CSS.
Роман, подскажите: что будет стоить описанная выше работа в Вашем исполнении на моем сайте? Напишите в личку пожалуйста.