Как я обновлял дизайн сайта. Результаты до и после

redesign-site-2019 Разработка сайта

Привет. В этой статье расскажу как я менял тему на своем сайте, между какими вариантами делал выбор, как пошагово делал замену и обновлял статьи и страницы.

Почему я решил сменить шаблон

  • Показатели сайта. Меня не устраивали показатели сайта, которые показывают сервисы анализа: GTmetrix, Pingdom, PageSpeed (в меньшей степени). Особенно скорость загрузки страниц. Ниже вы найдете скриншоты замеров до и после.
  • Старый дизайн. На сайте у меня два лендинга, на главной и отдельный на котором расписаны мои услуги. Дизайн и информация на них уже чутка устарели и хотелось обновления.
  • Конструктор лендингов. Для верстки я использовал конструктор WPBakery который шел в наборе с темой The7. Недавно я изучил другой конструктор — Elementor. Он мне понравился больше и для верстки я захотел использовать именно его.

3 года назад шаблон для сайта я выбирал по количеству функций, не особо задумываясь об оптимизации и скорости сайта. В этом году решил проверить гипотезу, — как изменится эффективность сайта в трафике, доходе, новых клиентах, после обновления. Сайт обновил, теперь в течении 3-6 месяцев будем анализировать результаты.

Показатели сервисов аналитики до и после

Замер делал главной страницы и этой статьи.

GTmetrix — замер до

GTmetrix главная страница
Главная страница
GTmetrix статья
Статья

GTmetrix — замер после

Главная страница
Главная страница
Статья
Статья

Общая оценка (цифра с %) где-то выше, где-то ниже, в целом на том же уровне. Более важны другие показатели:

На главной странице

  • Время полной загрузки страницы было 11.8 сек., стало 7.2 сек.
  • Размер страницы уменьшился с 3.62 мб до 2.73 мб
  • Количество запросов уменьшилось с 140 до 76, почти в два раза

Также и в статье

  • Время полной загрузки страницы было 12.8 сек., стало 6.9 сек.
  • Размер страницы уменьшился с 3.32 мб до 2.13 мб
  • Количество запросов уменьшилось с 115 до 68

Pingdom — замер до

Pingdom главная
Главная страница
Pingdom статья
Статья

Pingdom — замер после

Главная страница
Главная страница
Статья
Статья
Здесь также, общая оценка улучшилась только на 10 пунктов и остальные показатели:На главной странице
  • Время загрузки уменьшилось с 2.71 сек. до 1.25 сек.
  • Размер страницы уменьшился с 3.9 мб до 2.8 мб
  • Количество запросов уменьшилось с 143 до 76, почти в два раза
В статье
  • Время загрузки уменьшилось с 2.14 сек. до 1.79 сек.
  • Размер страницы уменьшился с 3.5 мб до 2.2 мб
  • Количество запросов уменьшилось с 109 до 69
Показатели +- показывает такие же как и GTMetrix

PageSpeed Insights — замер до

PageSpeed Главная компьютерная версия
Главная страница — компьютерная версия
PageSpeed Главная мобильная версия
Главная страница — мобильная версия
PageSpeed статья компьютерная версия
Статья — компьютерная версия
PageSpeed статья мобильная версия
Статья — мобильная версия

PageSpeed Insights — замер после

Главная страница — компьютерная версия
Главная страница — компьютерная версия
Главная страница — мобильная версия
Главная страница — мобильная версия
Статья — компьютерная версия
Статья — компьютерная версия
Статья — мобильная версия
Статья — мобильная версия

PageSpeed особенно порадовал, хоть сегодня этот сервис замера считают ненадежным, все равно цифры приятно радуют :)

На главной странице

  • Компьютерная версия 39 → 91
  • Мобильная версия 5 → 57

В статье

  • Компьютерная версия 45 → 96
  • Мобильная версия 4 → 65

Ну и время загрузки соответственно улучшилось, лень все цифры переписывать :))

Дизайн до и после

Главная страница

Дизайн главной до
Дизайн главной до
Дизайн главной после
Дизайн главной после

Лендинг с услугами

Дизайн лендинга до
Дизайн лендинга до
Дизайн лендинга после
Дизайн лендинга после

Количество плагинов до и после

Количество установленных плагинов до
Количество установленных плагинов до
Как я обновлял дизайн сайта. Результаты до и после
Количество установленных плагинов после

Количество активных плагинов уменьшилось с 19 до 11

В старой версии сайта я использовал тему The7

the7

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

Также чтобы создать слайдер нужен был плагин Slider Revolution, для верстки лендингов WPBakery и Ultimate Addons for WPBakery. Они бесплатно идут в наборе с темой, но также создают нагрузку. Все три плагина я заменил одним Elementor Pro.

Почему я выбрал тему Reboot

Много вариантов пересмотрел. В итоге выбирал между Root, Reboot, JournalX, Contentberg.

Первые три темы от крутых ребят WPShop. Это лучшие разработчики тем и плагинов для Российского и СНГ WordPress рынка. С Сергеем Алейниковым — СЕО компании, я познакомился пару лет назад. Попросил бесплатно плагин на обзор, почему-то я думал что откажет, но нет, он согласился. С тех пор и общаемся :)

Можете посмотреть обзоры их продуктов на моем блоге:

Четвертый вариант темы мне тоже нравится. У Contentberg крутой минималистичный дизайн, много фишек, тоже хорошие показатели оптимизации.

Сайт для контента
Шаблон Contentberg

В результате долгих сравнений выбор пал все же на тему Reboot. Что повлияло на выбор:

  1. Можно выводить без плагинов: карту сайта, содержание, рекламные блоки, кнопки соцсетей, рейтинг, контактную форму
  2. В наборе крутые элементы редактирования текста: блоки внимания, дизайн цитаты и списков, маскировка ссылки, выделение текста
  3. Виджеты количество просмотров статьи и время на чтение уже встроены в тему
  4. Мелкие детали в дизайне, типа кнопок с тенью и другие, которые добавляют визуальной эстетики
  5. Ширина макета не фиксированная, например как у Root
  6. Лента блога нужна была вертикальная. По этому критерию JournalX не подошел. Я почти остановился на JournalX, у темы тоже крутой редактор статей с возможностью выноса ссылок или рекламы в сайдбар в каждой статье, элементы «текст и картинка на всю ширину», бесконечная прокрутка статей.

Ну и конечно основные преимущества, которые есть у всех шаблонах из которых я выбирал: быстрая скорость загрузки, чистый код, адаптивность, микроразметка, нет ничего лишнего, отличная поддержка.

Почему я выбрал конструктор Elementor Pro

Сегодня на рынке два популярных конструктора это WPBakery (в прошлом Visual Composer) и Elementor. С первым я уже много работал, всегда немного не хватало функционала. После изучения Elementor’а я понял что функционал у него намного богаче и можно делать более сложную верстку.

Также говорят что у Элементора код чище. Я не программист, поэтому свое мнение по поводу кода можете написать в комментариях.

Также в наборе у Pro версии идет конструктор попапов (модальных окон), конструктор контактных форм и еще куча других фишек.

Я протестировал связку Reboot + Elementor на локальном и обычном хостинге, все работало отлично. И в итоге начал обновлять сайт.

0
дней ушло на обновление сайта
0
плагинов удалил
0 +
статей отредактировал
0
страниц обновил
0
лендинга заменил

В какой последовательности я обновлял сайт

  1. Сделал бэкап актуальной версии сайта. Одну копию положил на случай отката настроек, а вторую распаковал на локальном сервере.
  2. Изучил настройки на локальном сервере. Установил Reboot на сайт чтобы посмотреть как настроить шаблон и какие статьи/страницы нужно будет редактировать. Т.к. конструктором WPBakery я верстал почти все страницы и много статей, ужаснулся количеству: 180+ статей и 8 страниц.
  3. Обновил статьи в которых не нужен конструктор. 100 статей были похожего типа, это подборки шаблонов. Из конструктора WPBakery в них были кнопки, разделители и цитаты. В некоторых статьях доходило до 200 кнопок. Я думал что придется менять вручную каждую кнопку, но друг программист подсказал как сделать замену через регулярные выражения. Храни Господь того, кто это придумал! Каждую статью правил вручную, через NotePad++ делая массовую замену через РВ.
  4. Сделал дизайн лендингов, сверстал их на обычном хостинге на другом домене, чтобы потом перенести на основной сайт.
  5. Смена и настройка шаблона на хостинге. Я не переносил настроенный сайт с локального сервера на хостинг. Я понимаю что так должно было быть проще — настроил сайт на локале и перенес на хостинг, но у меня раньше всегда появлялись какие-то конфликты при переносе, то в базе данных, то на сайте отображались ошибки. Я решил не рисковать. С утра, когда трафик на сайте минимальный, за 3 часа обновил шаблон, сделал настройки как на локальном тренировочном сайте.
  6. Перенес лендинги. С дополнительного сайта на хостинге перенес лицензию на Elementor Pro и лендинги которые там сверстал.
  7. Обновил остальные статьи и страницы, в которых нужен был конструктор.
  8. Сделал бэкап новой версии сайта.
  9. Выдохнул! :) 

Сейчас полет сайта нормальный, в трафике не просел. Но и показатели в метрике +- особо не изменились.

Заключение

Что получилось в итоге меня полностью устраивает, силы и время потрачены не зря. Дизайн свежий, сайт летает. Даже в админке сайт работает по другому, статьи оформляю быстрее.

Сочетание темы Reboot + конструктора Elementor Pro сегодня лучшее сочетание на мой взгляд, если вам нужен многостраничный сайт с возможностью верстать страницы. Поделитесь в комментариях, как вам дизайн? Работали с темами от WPShop или плагином Elementor? Какую тему и конструктор используете на своем сайте?

Спасибо и пока.

Заказать сайт
Оцените статью
( 10 оценок, среднее 4.5 из 5 )
Поделитесь в соцсетях? Благодарю ✌
Добавить комментарий

Отправляя данную форму вы соглашаетесь с политикой конфиденциальности сайта

  1. Антон

    Кнопочка рейтинга не нажимается

    Ответить
    1. Илья Чигарев автор

      Проверил, вроде работает. Она не нажимается если вы уже один раз нажали.

      Ответить
  2. seoonly.ru

    вышло бодро-) спасибо за статью

    Ответить
  3. leshakava.com

    Сайт действительно крутой. Смотрю и наслаждаюсь. Визуально очень четко и здорово.

    Ответить
    1. Илья Чигарев автор

      Благодарю)

      Ответить