Если 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-файл
- Воспользовавшись файловым менеджером хостинга, на котором находится сайт либо другим способом, находим по уже известным путям нужные файлы.
- Открываем файлы и копируем код из них в один файл, обычно это 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- файле (куда копируйте) пути можно оставить прежними.
Объединённый файл рекомендуется сжать с помощью специальных программ. Это ещё более увеличит скорость загрузки.
Надеюсь вам статья помогла, если что осталось не ясным, пишите в комментариях.