Объединение внешних CSS файлов темы WordPress в общий файл

Если CSS-файлов у сайта много, возрастает число запросов к серверу, что ведёт к уменьшению быстроты загрузки многих страниц. Сайт работает более медленно. На выше сказанное могут обратить внимание поисковики, понизить в выдаче такой интернет-ресурс.


Способ решить проблему – объединить все файлы CSS в один. Для этого нужно:

• Шаг 1. Узнать, какие CSS-файлы имеются у сайта и сколько их;
• Шаг 2. Отключить лишние CSS-файлы;
• Шаг 3. Скопировать их код в один файл CSS.

 

Сбор информации о всех CSS-файлах

Для этого проще всего воспользоваться ресурсом Pingdom Website Speed Test.
1.Переходим на него.
2.Нужно ввести в поле слева название своего сайта и нажать «Start Test». Я ввёл название одного небольшого сайта.

3.Прокручиваем вниз до картинки примерно такого вида

 

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

Просматривая так файлы своего сайта вы заметите, что часть их них лежит в названии темы, а часть в папке/plugins/. Эти файлы CSS относятся к плагинам.

Отключаем лишние CSS

• Находим, где подключены файлы стилей. Чаще всего это файл header.php, но могут оказаться и в другом месте. 

• Ищем код примерно такого вида link rel="stylesheet" href="/wp-content/themes/sun/css/sun-style.css" type="text/css" media="screen” Лучше проштудировать статьи про подключение файлов CSS. Тогда точно будете знать, что искать, да и в будущем пригодится.
• Удаляем код строка за строкой, не забывая проверять работоспособность сайта. Если этого не делать и чего-то пойдёт не так, как требуется, сложно будет разобраться, где ошибка. Каждый раз перед проверкой нужно очищать кэш браузера, иначе станут отображаться сохранённые в нём файлы, а не изменённые.

Собираем всё в один CSS-файл

1. Воспользовавшись файловым менеджером хостинга, на котором находится сайт либо другим способом, находим по уже известным путям нужные файлы.
2. Открываем файлы и копируем код из них в один файл, обычно это style.css

Важное замечание №1

После обновления плагина, в нём файлы CSS придётся отключать повторно. Если плагинов много, придётся помучиться. Но можно поступить иначе, внести изменения в очень важный файл, называемый functions.php. Его следует искать в папке с названием используемой темы.
Нужно будет добавить в functions.php код, приведённый ниже

add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() {  wp_deregister_style( 'ajax-translation' );  wp_deregister_style( 'syntax-default' );

В последних двух строках в скобках, регистр, отвечающий за подключение стилей, схож с названием плагина.

Важное замечание №2

Не забывайте при объединении CSS файлов в один, относительные пути картинок менять на абсолютные. Иначе WordPress просто не найдёт нужные изображения и сайт у вас выглядеть совершенно непредсказуемо. В основном CSS- файле (куда копируйте) пути можно оставить прежними.


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

Сергей Мазураш aka Retliff Блоггер со стажем. Стиль публикаций отличается простотой изложения и весёлым, ироничным подходом к самым серьёзным проблемам. Cпециализируется на создании и продвижении бесплатных блогов на платформе Blogger.

Твитнуть