Доброго времени суток, арбитраны! Сегодня расскажу как ускорить загрузку сайта на WordPress. Всем известно, что поисковики любят быстрые сайты. А чтобы сделать быстрый сайт на WordPress нужно немного поковыряться с настройками. Ну что, приступаем к разгону!
С чего начать
Все ведь любят использовать бесплатные темы для своих сайтов, не так ли? А то что эти темы лепятся наот*ебись никого не волнует — главное же не тратить денег и побыстрее запустить сайт) По этому первый мой совет — не берите бесплатные темы, а сделайте себе свою. Сымый жирный плюс от самодельной темы — полный контроль над скриптами, стилями и прочим барахлом, жрущим ресурсы и усложняющим загрузку сайта. Но если вы все же решили использовать тему из интырнета — не все потеряно, есть способы ускорения и в этом случае. Разберу несколько вариантов ускорения.
Начинаем работу
Сперва наперво добавляем домен, на котором будет крутиться наш сайт в cloudflare. Это позволит нам в будущем использовать дополнительное кеширование и более быстрое открытие сайта по всему миру. Почитайте в интырнете про клауд, если впервые слышите об этом. Я буду показывать на примере тестового поддомена lessons.croyman.ru, а вы добавляете сайт по новой:
Как добавлять домен в клауд — почитайте тут. Тема статьи не про клауд, так что интырнет вам в помощь. После того, как вы присобачили домен, ждете 24 часа пока пропишутся DNS записи и переходим к следующему этапу — ставим WordPress на хостинг.
Как установить WordPress?
Установить WP можно двумя способами — через админку хостинга либо закинув в корень домена распакованный архив, который вы можете скачать с wordpress.org. Я рекомендую ставить первым способом — это проще и меньше шансов ошибиться. Вот как этот процесс выглядит на моем хостинге:
WordPress поставили — идем дальше
Так, у нас готов домен и установлен движок. Идем ставить тему.
В меню админки WordPress переходим во Внешний вид->Темы
По умолчанию уже установлены три базовые темы. Можно выбрать их, но вам то надо что-то интересное и навороченное. Поэтому вы отправитесь искать халявные навороченные темы в интернет или в хранилище тем от WP, которое подгружается в админке.
Как искать, выбирать и устанавливать темы я объяснять не буду. И так уже статья растягивается, а до сути мы так и не дошли. Поэтому я продолжу объяснение на самой первой попавшейся теме.
Из репозитория тем для вордпресс, который есть в админке, я ткнул в первую попавшуюся тему. Активировал ее и на скрине видно какие плагины тема запрашивает, чтобы корректно работать. Установим их все, нажав на Начало установки плагинов.
Установим все, что просит тема.
Теперь все плагины активируем, перейдя в меню во вкладку Плагины.
Перед активацией проверим миф о том, влияют ли плагины на скорость загрузки сайта. Идем в сервис от нашего любимого гугла PageSpeed. Здесь мы теперь поселимся надолго и будем тестить наш сайт вдоль и поперек)
Результаты не самые плохие получились. Моб версия немного хромает, а вот веб грузится неплохо. Теперь активируем плагины и посмотрим на скорость загрузки сайта.
Как видим, показатели немного просели. Это связано с тем, что плагины добавляют необходимые для своей работы скрипты, и при прогрузке страницы теперь отправляется на несколько запросов больше. Но показатели пока еще не самые плохие выдает наша тема. Надо накинуть для утяжеления контентику на наш сайт.
Накинул несколько записей и теперь идем делать тест на скорость.
Реальный сайт будет значительно отличаться от представленного мной тестового варианта. Но даже при добавлении нескольких записей и картинок к ним — мобверсия сайта просела по скорости загрузки.
Что влияет на скорость загрузки сайта?
Самое главное, на мой взгляд, это скорость ответа сервера. Чем дольше сервер отвечает на запросы — тем дольше грузится сайт. Для этого выбираем хороший хостинг. Этот момент регулируется вами самостоятельно, поэтому переходим к следующему пункту.
Второй пункт по важности: скрипты и стили, используемые темой и плагинами. Кривые руки программистов, производящих продукты под WordPress могут встраивать скрипты в начало страницы, а так же подгружать стили, которые не очень то и нужны. Пойдем посмотрим что у нас тормозит згрузку страницы.
В PageSpeed Insights мы видим, что вот эта кучка стилей и шрифтов тормозит нам загрузку сайта. Что мы можем предпринять?
Ковыряем functions.php
Вот мы и подошли к самому интересному. Дальше понадобятся знания по PHP. Все в WordPress крутится вокруг главного файла functions.php. В нем то и можно навести немного ускорительного шороху) Главное не поломать ничего, а то поляжет сайт целиком. Находится этот файл по такому пути:
https://ВАШ_ДОМЕН/wp-content/themes/ИМЯ_ТЕМЫ
С файлами на сервере я работаю через FTP менеджер FileZilla. Вы можете пользоваться чем угодно, но я рекомендую этот: он бесплатный и ставится на все платформы. Как им пользоваться — смотрим в гугле.
Заходим в папку темы и открываем для редактирования файл functions.php.
В чем заключается первый этап ускорения?
А все просто: по умолчанию все стили подгружаются без префикса preload. Вот здесь почитайте какие есть префиксы для подключения стилей и для чего они нужны. А это значит, что пока все стили не прогрузятся — отображение страницы в браузере не произойдет.
Я же предлагаю все стили, прогрузку которых можно не ждать, прописать с префиксом preload.
Что для этого нужно сделать? Идем в functions.php и добавляем в конце следующий код:
add_filter('style_loader_tag', 'add_preload_attribute', 10, 4);
function add_preload_attribute($tag, $handle)
{
// задаем каким стилям поменять префикс stylesheet на preload
$handlesCSS = array(
'wpzoom',
'inspiro-google-fonts',
'dashicons',
'zoom-instagram-widget',
'magnific',
'swiper'
);
// меняем префиксы
foreach ($handlesCSS as $preload_styles)
{
$pos = strpos($handle, $preload_styles);
if($pos !== false){
return str_replace('stylesheet', 'preload', $tag);
}
}
return $tag;
}Массив $handlesCSS я собрал опытным путем из всех стилей, что прописываются на странице. Посмотреть их можно нажав F12 или правой кнопкой мыши и выбрать Посмотреть код страницы. Функция add_filter — прикрепляет указанную PHP функцию к указанному хуку-фильтру. Так, во время срабатывания фильтра значение будет обработано указанной PHP функцией. Подробнее про хуки и хуки-фильтры опять же сходите почитать в гугол.
В результате выполнения этого кода мы получим вот что:
У стилей, от которых ничего не поломается, мы заменили стандартный префикс stylesheet на preload. Идем замеряем показатели.
Стало побыстрее, не так ли? Но нас не устраивает скорость на мобильной версии, поэтому идем дальше.
Ускоряемся еще — идем мучать js-скрипты
Мы только что добавили preload стилям, а теперь добавим defer к скриптам. Это примерно так же работает как и preload у стилей — загрузка скриптов не блокирует отрисовку страницы. Массив $handlesJS я так же собрал опытным путем из всех стилей, что прописываются на странице.
add_filter('script_loader_tag', 'add_defer_attribute', 10, 4);
function add_defer_attribute($tag, $handle)
{
$handlesJS = array(
'jquery',
'inspiro',
'underscore',
'backbone',
'elementor',
'wpzoom',
'zoom'
);
foreach ($handlesJS as $defer_script) {
$pos = strpos($handle, $defer_script);
if ($pos !== false) {
return str_replace(' src', ' defer src', $tag);
}
}
return $tag;
}Принцип точно такой же, как и со стилями. Вот что было до работы нашего кода:
А вот как будут выглядеть скрипты после работы нашего кода:
Пойдем глянем на скорость загрузки в PageSpeed:
Уже неплохо, может остановимся на этом? Хрена с два! Я тут портянку пишу не для такого нищего результата) Пойдем лучше посмотрим на что PageSpeed продолжает ругаться.
А ругается он на картинки — сейчас будем это лечить. Видим, что первая картинка слишком много весит. Зачем такой груз тащить — мне не понятно. Будем лечить картинку без применения плагинов)
Идем в папку где хранится проблемная пикча. Выкачиваем ее и открываем в фотошопе. Исходный размер картинки 2300х1515px. На мой взгляд, такие картинки целиком смотреть никто не будет, поэтому порежу и пожму ее до приемлемых показателей.
До сжатия картинка весила 633кб, после моих извращений — 265кб. Можно и лучше, но тут уж сами разберетесь в качестве факультатива. Загружаю картинку на хост туда же откуда и взял и иду смотреть на скорость:
Ну вот теперь меня все устраивает) Немного танцев с бубном, минимум дополнительного кода, никаких плагинов с кэшированием, с помощью которых обычно учат ускорять WordPress в интырнетах. Клауд все закеширует, а пара фильтров причешет стили и скрипты.
Всем спасибо за прочтение! Как обычно всем желаю высоких РОИ и максимального профита)