Привет. В этой статье расскажу как я менял тему на своем сайте, между какими вариантами делал выбор, как пошагово делал замену и обновлял статьи и страницы.
- Почему я решил сменить шаблон
- Показатели сервисов аналитики до и после
- GTmetrix — замер до
- GTmetrix — замер после
- Pingdom — замер до
- Pingdom — замер после
- PageSpeed Insights — замер до
- PageSpeed Insights — замер после
- Дизайн до и после
- Главная страница
- Лендинг с услугами
- Количество плагинов до и после
- В старой версии сайта я использовал тему The7
- Почему я выбрал тему Reboot
- Почему я выбрал конструктор Elementor Pro
- В какой последовательности я обновлял сайт
- Заключение
Почему я решил сменить шаблон
- Показатели сайта. Меня не устраивали показатели сайта, которые показывают сервисы анализа: GTmetrix, Pingdom, PageSpeed (в меньшей степени). Особенно скорость загрузки страниц. Ниже вы найдете скриншоты замеров до и после.
- Старый дизайн. На сайте у меня два лендинга, на главной и отдельный на котором расписаны мои услуги. Дизайн и информация на них уже чутка устарели и хотелось обновления.
- Конструктор лендингов. Для верстки я использовал конструктор WPBakery который шел в наборе с темой The7. Недавно я изучил другой конструктор — Elementor. Он мне понравился больше и для верстки я захотел использовать именно его.
3 года назад шаблон для сайта я выбирал по количеству функций, не особо задумываясь об оптимизации и скорости сайта. В этом году решил проверить гипотезу, — как изменится эффективность сайта в трафике, доходе, новых клиентах, после обновления. Сайт обновил, теперь в течении 3-6 месяцев будем анализировать результаты.
Показатели сервисов аналитики до и после
Замер делал главной страницы и этой статьи.
GTmetrix — замер до
GTmetrix — замер после
Общая оценка (цифра с %) где-то выше, где-то ниже, в целом на том же уровне. Более важны другие показатели:
На главной странице
- Время полной загрузки страницы было 11.8 сек., стало 7.2 сек.
- Размер страницы уменьшился с 3.62 мб до 2.73 мб
- Количество запросов уменьшилось с 140 до 76, почти в два раза
Также и в статье
- Время полной загрузки страницы было 12.8 сек., стало 6.9 сек.
- Размер страницы уменьшился с 3.32 мб до 2.13 мб
- Количество запросов уменьшилось с 115 до 68
Pingdom — замер до
Pingdom — замер после
- Время загрузки уменьшилось с 2.71 сек. до 1.25 сек.
- Размер страницы уменьшился с 3.9 мб до 2.8 мб
- Количество запросов уменьшилось с 143 до 76, почти в два раза
- Время загрузки уменьшилось с 2.14 сек. до 1.79 сек.
- Размер страницы уменьшился с 3.5 мб до 2.2 мб
- Количество запросов уменьшилось с 109 до 69
PageSpeed Insights — замер до
PageSpeed Insights — замер после
PageSpeed особенно порадовал, хоть сегодня этот сервис замера считают ненадежным, все равно цифры приятно радуют :)
На главной странице
- Компьютерная версия 39 → 91
- Мобильная версия 5 → 57
В статье
- Компьютерная версия 45 → 96
- Мобильная версия 4 → 65
Ну и время загрузки соответственно улучшилось, лень все цифры переписывать :))
Дизайн до и после
Главная страница
Лендинг с услугами
Количество плагинов до и после
Количество активных плагинов уменьшилось с 19 до 11
В старой версии сайта я использовал тему The7
Она довольно популярная и в целом не плохая, но из-за большого количества функций тяжеловата, создает лишнюю нагрузку.
Также чтобы создать слайдер нужен был плагин Slider Revolution, для верстки лендингов WPBakery и Ultimate Addons for WPBakery. Они бесплатно идут в наборе с темой, но также создают нагрузку. Все три плагина я заменил одним Elementor Pro.
Почему я выбрал тему Reboot
Много вариантов пересмотрел. В итоге выбирал между Root, Reboot, JournalX, Contentberg.
Первые три темы от крутых ребят WPShop. Это лучшие разработчики тем и плагинов для Российского и СНГ WordPress рынка. С Сергеем Алейниковым — СЕО компании, я познакомился пару лет назад. Попросил бесплатно плагин на обзор, почему-то я думал что откажет, но нет, он согласился. С тех пор и общаемся :)
Можете посмотреть обзоры их продуктов на моем блоге:
Четвертый вариант темы мне тоже нравится. У Contentberg крутой минималистичный дизайн, много фишек, тоже хорошие показатели оптимизации.
В результате долгих сравнений выбор пал все же на тему Reboot. Что повлияло на выбор:
- Можно выводить без плагинов: карту сайта, содержание, рекламные блоки, кнопки соцсетей, рейтинг, контактную форму
- В наборе крутые элементы редактирования текста: блоки внимания, дизайн цитаты и списков, маскировка ссылки, выделение текста
- Виджеты количество просмотров статьи и время на чтение уже встроены в тему
- Мелкие детали в дизайне, типа кнопок с тенью и другие, которые добавляют визуальной эстетики
- Ширина макета не фиксированная, например как у Root
- Лента блога нужна была вертикальная. По этому критерию JournalX не подошел. Я почти остановился на JournalX, у темы тоже крутой редактор статей с возможностью выноса ссылок или рекламы в сайдбар в каждой статье, элементы «текст и картинка на всю ширину», бесконечная прокрутка статей.
Ну и конечно основные преимущества, которые есть у всех шаблонах из которых я выбирал: быстрая скорость загрузки, чистый код, адаптивность, микроразметка, нет ничего лишнего, отличная поддержка.
Почему я выбрал конструктор Elementor Pro
Сегодня на рынке два популярных конструктора это WPBakery (в прошлом Visual Composer) и Elementor. С первым я уже много работал, всегда немного не хватало функционала. После изучения Elementor’а я понял что функционал у него намного богаче и можно делать более сложную верстку.
Также говорят что у Элементора код чище. Я не программист, поэтому свое мнение по поводу кода можете написать в комментариях.
Также в наборе у Pro версии идет конструктор попапов (модальных окон), конструктор контактных форм и еще куча других фишек.
Я протестировал связку Reboot + Elementor на локальном и обычном хостинге, все работало отлично. И в итоге начал обновлять сайт.
В какой последовательности я обновлял сайт
- Сделал бэкап актуальной версии сайта. Одну копию положил на случай отката настроек, а вторую распаковал на локальном сервере.
- Изучил настройки на локальном сервере. Установил Reboot на сайт чтобы посмотреть как настроить шаблон и какие статьи/страницы нужно будет редактировать. Т.к. конструктором WPBakery я верстал почти все страницы и много статей, ужаснулся количеству: 180+ статей и 8 страниц.
- Обновил статьи в которых не нужен конструктор. 100 статей были похожего типа, это подборки шаблонов. Из конструктора WPBakery в них были кнопки, разделители и цитаты. В некоторых статьях доходило до 200 кнопок. Я думал что придется менять вручную каждую кнопку, но друг программист подсказал как сделать замену через регулярные выражения. Храни Господь того, кто это придумал! Каждую статью правил вручную, через NotePad++ делая массовую замену через РВ.
- Сделал дизайн лендингов, сверстал их на обычном хостинге на другом домене, чтобы потом перенести на основной сайт.
- Смена и настройка шаблона на хостинге. Я не переносил настроенный сайт с локального сервера на хостинг. Я понимаю что так должно было быть проще — настроил сайт на локале и перенес на хостинг, но у меня раньше всегда появлялись какие-то конфликты при переносе, то в базе данных, то на сайте отображались ошибки. Я решил не рисковать. С утра, когда трафик на сайте минимальный, за 3 часа обновил шаблон, сделал настройки как на локальном тренировочном сайте.
- Перенес лендинги. С дополнительного сайта на хостинге перенес лицензию на Elementor Pro и лендинги которые там сверстал.
- Обновил остальные статьи и страницы, в которых нужен был конструктор.
- Сделал бэкап новой версии сайта.
- Выдохнул! :)
Сейчас полет сайта нормальный, в трафике не просел. Но и показатели в метрике +- особо не изменились.
Заключение
Что получилось в итоге меня полностью устраивает, силы и время потрачены не зря. Дизайн свежий, сайт летает. Даже в админке сайт работает по другому, статьи оформляю быстрее.
Сочетание темы Reboot + конструктора Elementor Pro сегодня лучшее сочетание на мой взгляд, если вам нужен многостраничный сайт с возможностью верстать страницы. Поделитесь в комментариях, как вам дизайн? Работали с темами от WPShop или плагином Elementor? Какую тему и конструктор используете на своем сайте?
Спасибо и пока.
Кнопочка рейтинга не нажимается
Проверил, вроде работает. Она не нажимается если вы уже один раз нажали.
вышло бодро-) спасибо за статью
Сайт действительно крутой. Смотрю и наслаждаюсь. Визуально очень четко и здорово.
Благодарю)
Все обновления как то повлияли на seo показатели сайта?
ИКС сайта вырос с 230 до 300. Не знаю это заслуга шаблона или контента, или все вместе. Трафик на том же уровне плюс минус. Возможно нужно больше времени, сижу жду :))
Прикольно, Илья спасибо за такой классный обзор. Знаком с элементором, действительно классный плагин.
Я уже второй день смотрю на этот шаблон и после вашей статьи обязательно его приобрету)
Удачи вам!
На своем блоге использую тему Sahifa, тоже функциональная, но тяжёлая. Тему Reboot приобрел недавно, но ещё руки никак не дойдут завести на ней новый блог на другую тематику. Посматривал ещё в сторону темы OceanWP и Astra. Использую также Elementor Pro для создания лендингов для клиентов.