Масштабная трансформация
Сбербанка в прямом эфире
LIVE
Сервисы
Алексей
15 873

Могильная версия сайта: как угробить конверсию, создав сайт на конструкторе

В исследовании приняли участие 35 конструкторов: Tilda, Readymag, LPgenerator, InSales, Wix, Elementor и другие. Проверили их собственные сайты и сайты их клиентов.

В закладки
Слушать

Привет. Я Алексей. Маркетолог-аналитик в Loading.Express. Мы проверяем скорость загрузки сайтов, ускоряем медленные сайты и консультируем крупные компании. Часто к нам приходят проверить скорость сайта, который сделан на конструкторе и глазам не верят, если видят цифры в 20-30-40 секунд.

План статьи такой:

  1. Исследование скорости 35 сайтов конструкторов.
  2. Почему сайты на конструкторах загружаются медленно.
  3. Как ускорить загрузку сайта на конструкторе.
  4. Что если использовать Wordpress + Elementor или/и WPBakery
  5. Что если есть конструктор, который следит за скоростью загрузки.

35 сайтов конструкторов и скорость загрузки их сайтов

Давайте посмотрим, как дела у сайтов самих платформ. Ведь если они могут на своей платформе сделать быстрый сайт, то и у вас получится!

Так ли это?

Данные замеров обновляются каждый день в рейтинге. Все замеры выполнены сервисом loading.express (технология Lighthouse, серверы в РФ). Замеры сделаны в эмуляции мобильного устройства. Включен тротлинг процессора в 2 раза и замедление сети до 3G fast, задержка 200 ms. Данные в статье актуальны на 04.07.2020.

Скорость загрузки сайта у конструкторов сайтов:

  • 35 место у «WIX» — 17.5 секунды;
  • 34 место у «Atilekt.ru» — 8.2 секунды;
  • 33 место у «Site.pro» — 5.8 секунды;
  • 32 место у «Платформа LP» — 5.5 секунды;
  • 31 место у «Webflow» — 5.4 секунды;
  • 30 место у «Borstch» — 5.3 секунды;
  • 29 место у «energy» — 5.3 секунды;
  • 28 место у «Nethouse» — 5.3 секунды;
  • 27 место у «LPgenerator» — 5.1 секунды;
  • 26 место у «Базиум» — 5.1 секунды;
  • 25 место у «AdvantShop» — 5.0 секунд;
  • 24 место у «uKit» — 4.5 секунды;
  • 23 место у «Setup» — 4.5 секунды;
  • 22 место у «Readymag» — 4.3 секунды;
  • 21 место у «Bloxy.ru» — 4.2 секунды;
  • 20 место у «mottor» — 4.2 секунды;
  • 19 место у «InSales» — 4.0 секунды;
  • 18 место у «Webnode» — 4.0 секунды;
  • 17 место у «Сайт-Менеджер» — 3.9 секунды;
  • 16 место у «Fo.RU» — 3.6 секунды;
  • 15 место у «Креатиум» — 3.6 секунды;
  • 14 место у «lptrend» — 3.5 секунды;
  • 13 место у «Storeland» — 3.3 секунды;
  • 12 место у «Флексби» — 3.3 секунды;
  • 11 место у «Диафан» — 3.2 секунды;
  • 10 место у «Nubex.RU» — 3.1 секунды;
  • 09 место у «Ucoz» — 2.9 секунды;
  • 08 место у «Mozello» — 2.7 секунды;
  • 07 место у «1С-UMI» — 2.3 секунды;
  • 06 место у «Okis» — 2.3 секунды;
  • 05 место у «TOBIZ.net» — 2.2 секунды;
  • 04 место у «redham.ru» — 1.8 секунды;
  • 3 место у «Tilda Publishing» — 1.7 секунды;
  • 2 место у «A5» — 1.4 секунды;
  • 1 место у «Voog» — 1.2 секунды.

Сайты не клиентские, а именно самих конструкторов сайтов. Ведь если не они, то кто покажет вам пример быстродействия!

Почему здесь не все конструкторы

Удивительно, что некоторые конструкторы не используют свою же платформу.

Так например, у Reg.ru есть свой билдер страниц, но его продажа идет со страницы, которая создана не на этом билдере. У Тиньков банка есть свой конструктор, но страница сделана на их стандартном движке и загружается больше 8 секунд.

Почему этот рейтинг НЕ важен

Если сайт у конструктора загружается меньше 3 секунд, то это вовсе не значит, что ваш сайт будет загружаться столько же.

Сайты на конструкторах загружаются медленно в 99% случаев. По нашей статистике самые медленные сайты у WIX и Тильда.

На Тильда можно создать быстрый сайт, но надо следовать рекомендациям, которые будут в статье ниже.

Почему сайты на конструкторах загружаются медленно.

У = универсальность. Кто бы мог подумать, что главный плюс конструктора станет таким ударом по производительности!

Смотрите. Всё просто.

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

А теперь внимание.

Все эти шрифты, стили и джаваскрипты загружаются для этого блока, даже те, которые вы не используете! Именно поэтому сайты на конструкторах загружаются медленно. Каждый посетитель сайта тянет с сервера все стили, все скрипты, все шрифты для разных состояний блока.

Еще конечно, некоторые конструкторы не используют отложенную загрузку картинок и другие современные технологии. Ведь для этого надо переделать всю платформу, а это большие инвестиции.

Как ускорить сайт на Тильда, Викс, InSales

В целом — никак. Но можно немного облегчить нагрузку. Вот что надо проверить и сделать.

  • Размер картинок и фотографий.

Возьмите любой обработчик размера картинок и обрежьте картинку до размера, который собираетесь показывать в блоке. Это крайне важно, потому что чаще всего заливают картинку размером 5000 на 9000, а в блоке она 400 на 400 пикселей.

Используйте PNG только для иконок, не для картинок! В нём слишком много лишнего. Используйте JPG — этот формат сильнее по всем параметрам. Ну а самый хороший формат — webPp. В новой версии safari 14 будет его поддержка тоже.

  • Сжатие фото без потерь по качеству

Конструкторы и сами это умеют делать, но лучше сделать это за них. Скачиваете каждую картинку с сайта, заходите на сайт TinyPNG и загружаете туда все картинки. После обработки скачиваете и загружаете обратно на конструктор.

  • Выключайте анимацию

Любая анимация — это удар по скорости сайта. Убирайте её немедленно. Проверьте каждый блок. Тильда может включать по умолчанию небольшую анимацию. Найдите и выключите.

Тут многие возразят, что это красота и вау-эффект. Но представьте, что вы зашли в невероятной красоты парк. Но чтобы передвигаться, вам надо открывать дверь каждые 3 шага. Дверь прозрачная, но открывать надо.

Сколько дверей вы откроете? 2-4? А потом вам надоест и вы уйдёте. Так и здесь. Если на сайте анимация, которая делает страницы тяжелыми и тормозными — это не преимущество, это БАГ.

  • Шрифты — оставьте один, максимум два

Кажется, что это не существенно может влиять, но каждое такое «несущественное» складывается в медленный сайт. Каждый дизайнер скажет вам, что много шрифтов это неправильно.

  • DOM элементы — следите за их количеством

Любой попап, вставка кода, всплывающий блок — это элемент. Не плодите попап окна на каждом блоке, это будет пагубно влиять на скорость загрузки.

  • Неудобные запросы в техподдержку — пишите неустанно

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

«Здравствуйте. Мой сайт [домен] медленно загружается с мобильного устройства в 3G сети. Помогите разобраться, как это исправить. Вот замер из Москвы в системе Loading.express — [ссылка на замер], вот данные из замера по Lighthouse 6 — [ссылка]. Спасибо!»

Вывод про ускорение сайта на Тильда, WIX

Ускорить можно. Сделать быстрыми можно. Но для этого надо специально планировать это в списке технического задания. Если вы заказываете у фрилансера сайт на Тильда, Викс, то пишите ему сразу, что сайт должен быть быстрым по загрузке. Не только по первому отображению, но и до интерактивности.

Что, если у меня Wordpress + Elementor или/и WPBakery

Сайт Elementor загружается — 7.4 секунды (замер из МСК).

Сайт WPBakery загружается — 9.9 секунд (тоже из МСК).

Тут всё то же самое, только в десятки раз хуже по результатам. Не используйте эти конструкторы. А если выбора нет, то не ведите мобильный трафик на сайт, чтобы трафик не превратился в могильный.

Кстати, на сайте WPBakery (бывший Visual Composer) написано, что их плагин использует 4,300,000+ людей и они не могут ошибаться. Что скажете?

Конструктор сайтов, который смог

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

Мы в своей работе используем конструкторы Креатиум и Flexbe. Первый удобнее по юзабилити, поэтому на него ставка больше.

Выводы

Я сам пользуюсь конструкторами. Это действительно удобно.

Если есть какая-то гипотеза или идея, то конструктор — лучший вариант для быстрой проверки. Если гипотеза подтвердилась и приносит результат, собираем это на быстром движке.

Спасибо всем разработчикам и создателям, что ежедневно трудятся над своим продуктом!

Пишите мне в личные сообщения любые вопросы про скорость сайта.

Еще статьи от автора:

Тут недавно RUVDS тоже писали про Тильду. Но еще жестче, как мне кажется:

Подписывайтесь на наш YouTube канал, там каждую неделю мы раздаем свои наработки по ускорению сайтов.

{ "author_name": "Алексей", "author_type": "self", "tags": ["\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c","\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430","pagesepeed"], "comments": 280, "likes": 43, "favorites": 459, "is_advertisement": false, "subsite_label": "services", "id": 106083, "is_wide": false, "is_ugc": true, "date": "Fri, 03 Jul 2020 17:26:02 +0300", "is_special": false }
Объявление на vc.ru
0
280 комментариев
Популярные
По порядку
Написать комментарий...
2

С посылом статьи я согласен, скорость работы сайтов на конструкторах - это известная проблема. Но содержимое статье и аргументы в ней выглядят очень по-дилетантски. Автор взял актуальную тему, придумал интересное исследование, но очень топорно и бесполезно все это реализовал.

Ответить
1

Дайте совет, как в следующий раз сделать, чтобы было круто. Как бы вы это сделали?

Ответить
5

Во-первых, не оправдываются ожидания от статьи. В самом начале вы заявляете, что провели исследование и протестировали 35 конструкторов сайтов, но в тексте нет самого исследования. Нет никакого детального сравнения работы разных конструкторов, только скорость загрузки отдельных сайтов, созданных на них. Что это за сайты и насколько правомерно их сравнение - большой вопрос. Если на Хабре человек пишет, что сейчас сделает грандиозное сравнение 58 батареек различных производителей, то он реально сравнивает 58 батареек по огромному количеству показателей. Обычных, блин, батареек. И это очень интересно читать.
Конкретно в вашем случае было бы уместно взять какой-то простой макет сайта, например, на 3 экрана. Сверстать этот макет в каждом конструкторе, используя одни и те же файлы, чтобы получить примерно одинаковый сайт в каждом случае. И вот эти одинаковые сайты уже сравнивать друг с другом. Сразу стало бы понятно какой конструктор показал лучшие результаты, а какой - худшие. Отдельно можно было бы пройтись по особенностям работы каждого конструктора, рассказать какие скрипты и стили тянутся в каждом случае, сколько места они занимают, как рендерится страница, сколько запросов она создает, сколько весит и т.д. Я понимаю, что это огромная работа, но если вы заявляете исследование, то соответствуйте. Сократите число конструкторов с 35 до 10 и сделайте действительно полезную статью.
Если же вы на самом деле не ставили основной целью статьи исследование, а хотели рассказать людям о том, как сделать быстрый сайт на конструкторе, то вы дали слишком мало советов, некоторые из которых были не совсем однозначные. Например, вы сказали, что любая анимация создает большую нагрузку. Но это не совсем верно. CSS-анимации (а я уверен, что некоторые конструкторы их используют), например, вообще почти никак не влияют на производительность. Многие простые JS-анимации тоже.
Вы могли бы больше рассказать об общих приемах, которые могут повысить скорость работы сайта. Например, стараться использовать как можно меньше изображений, если без них можно обойтись, так как именно изображения по большей части влияют на вес страницы. Многие любят ставить картинки в качестве фона для различных секций, хотя если вместо изображений использовать заливку цветом, то визуальный ряд не сильно пострадает, а скорость загрузки вырастет. Вы могли бы рассказать, что имеет смысл использовать https-протокол, так как он позволяет сократить количество запросов. Вы могли бы рассказать, что нужно стремиться как можно меньше встраивать на свой сайт сторонний код - динамические карты, онлайн чаты, коллбэки - все это очень сильно тормозит работу сайта.
В итоге получилась статья, которая понемногу обо всем и в итоге ни о чем. В ней мало пользы и совершенно непонятно на кого она ориентирована. Профи, которые работают с конструкторами, вряд ли узнали что-то новое и смогли сделать для себя выводы о том, какой инструмент в итоге не стыдно использовать. Новички и любители, которые делают сайты для себя, тоже в итоге не поняли как сделать свой сайт быстрее. Единственный дельный совет касается сжатия изображений.

Ответить
0

Вы только что написали целую статью!) Спасибо.
На самом деле, то как вы пишете мы и собирались сделать. Начали даже регистрации в конструкторах и сделали несколько посадочных. А потом возникла проблема. Юзабилити внутри конструкторов настолько непродуманное, но что мы не смогли понять как сделать одинаковые лендинги. А дай немного в сторону, так заклеймят, что не одинаковое!)

Потом. Дать больше советов - верное решение, но не для каждого конструктора подойдет любой совет. Если где-то используется анимация без джаваскрипта, то можно советовать её использовать, если же наоборот, и даже легкая, то люди нашпигуют лендинги так, что будет на Mac Pro тормозить.

Исследование по ссылке есть, там и скорость загрузки конструкторов и вес страниц их сайтов, и количество HTTP-запросов и PageSpeed по каждому, но опять же  —  зачем об этом писать в статье, если все будут комментить, что это нечестно!

Все пишут так:

"Сравнивать ОДИНАКОВЫЕ магазины, которые продают ОДИНАКОВЫЙ товар, но созданы разными людьми  —  НЕЧЕСТНО! Где это видано!"

Но знаете что. Мне кажется это похоже на то, что мы делали исследование скорости загрузки 1007 интернет-магазинов и нам писали, что у одного с айфона 10 загружается быстро, а у другого с андроида тупит еще дольше. ВСЁ РАВНО НЕ УГОДИШЬ.

Именно опыт подсказал сделать простую статью, с минимальными вводными, чтобы люди знали на что обращать внимание. 

Дальше уже сами разберутся. Поверьте!
И да, это для новичков. Для экспертов мы пишем на Хабр и да, там такую статью быстро бы слили, согласен с вами.

Ответить

Комментарии