Привет. В этой статье расскажу как я менял тему на своем сайте, между какими вариантами делал выбор, как пошагово делал замену и обновлял статьи и страницы.
- Почему я решил сменить шаблон
- Показатели сервисов аналитики до и после
- 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? Какую тему и конструктор используете на своем сайте?
Спасибо и пока.
Кнопочка рейтинга не нажимается
Проверил, вроде работает. Она не нажимается если вы уже один раз нажали.
вышло бодро-) спасибо за статью
Сайт действительно крутой. Смотрю и наслаждаюсь. Визуально очень четко и здорово.
Благодарю)