Logo

Реактивные сайты

на Gatsby

Реактивные сайты  Gatsby
image evilUnion card2
image evilUnion card2
image evilUnion card2

Набор наших инструментов

Нажмите на интересный

Figma
Фильтры
Predict conversion
Import Tilda
Виджеты
Подставные заголовки
Gitlab
CMS
Storybook
Калькуляторы
Lighthouse
PWA
React
Google Tag Manager

Делаем все макеты в Figma.

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

evilUnion

Мы не используем грязные шаблоны со стоков с множеством ошибок.

Ниже отчеты из Google Analytics, гдe аудитории разбиты на две группы - покупатели и не покупатели. У покупателей страницы грузились значительно быстрее!

Сред. взаимодействие с документом— среднее время (в секундах), которое браузер затрачивает на обработку документа. Документация.
Вот такой странный перевод на русский.

Распределение загрузки среди пользователей при помощи гистограммы одного из сайтов.

Здесь видно, что 70 процентов пользователей имеет загрузку больше чем 1 секунда. А 25 процентов – больше 3 секунд!

Можно смело сказать, что этот бизнес теряет значительную часть прибыли. Упущенная прибыль за год составляет примерно от 12 000 000 до 18 000 000 рублей.

Цитата Google про скорость

Если этого отчета вам мало, то вот тут есть 30 кейсов с экспериментами про скорость и влияние этого на конверсию.

Google Analytics

В разделе “Поведение” -> “Скорость загрузки сайта” -> “Время загрузки страниц” -> Выбрать вкладку “Распределение” и метрику “Сред. взаимодействие с документом“. Сделать один сегмент с конверсиями, второй без конверсий. В некоторых случаях можно добавить фильтрацию для новых пользователей, если у вас много повторных покупок. А если у вас, вдруг, нет никаких настроенных конверсий , то можно сделать сегмент с фильтрацией по глубине просмотра.

Сред. взаимодействие с документом — среднее время (в секундах), которое браузер затрачивает на обработку документа. Документация по разделу.

Яндекс метрика

В разделе “Отчеты” -> “Мониторинг” -> “Время загрузки страниц” -> “Сравнить сегменты“. Выбирайте один сегмент, который совершает целевые действия, а другой не совершает. И смотрите на разницу в показателях.
Документация по разделу

Скорее всего, вы проверяете скорость сайта при использовании сети Wi-fi. Далеко не все ваши посетители имеют такое подключение. Многие из них находятся не дома: в дороге, в метро, за городом. Они используют мобильный интернет, а он не всегда 4G. Также вы были на своем сайте много раз и у вас уже есть сохраненный кэш в вашем браузере. Именно по этой причине для определения скорости нужно использовать отчет в GA c гистограммой.

Вы можете имитировать медленное подключение в браузере Google Chrome. Для этого нужно перейти в режим разработчика, нажав на клавишу F12, а после перейти на вкладку “Network”. В ней нужно нажать на “disable cache” и нажать на “trottling”. В всплывающем окне выбрать режим замедления - “Fast 3g”. Теперь вы можете попользоваться вашим ресурсом, как новый пользователь без подключенного Wi-fi. Можно добавить свою скорость соединения в кастомные настройки, если вы считаете, что 3G – это слишком радикально.

Узнайте, на сколько вы увеличите доход, при более высокой конверсии

Чтобы поменять значения в калькуляторе потяните за ползунок или нажмите на цифру. Значения в ползунке обрабатываются функцией easeInQuad.

Бюджет на маркетинг в год:

15,000,000

Визиты на сайт за год:

2,000,000

Количество покупателей в год:

4,000

Доход с клиента в течение года:

55,000

Издержки на реализацию продажи:

38,000

Конверсия:

0.2 %

Прибыль:

53,000,000

CAC:

3,750

стоимость привлечения клиента

ROI:

32 %

Благодаря быстрой загрузке сайта и эффективному дизайну можно увеличить конверсию в среднем от 10% до 70%. Проверьте сами, как изменятся показатели вашего бизнеса.

Увеличение конверсии:

+

%

Конверсия:

0.24 %

Прибыль:

66,600,000

CAC:

3,125

ROI:

34 %

Коротко об нашем подходе к разработке

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

В этом исследовании мы изучили 200 сайтов, разработанных на 4 системах. Мы использовали два инструмента — Google PageSpeed и Selenium — для имитации throttling.

На каждую систему было выбрано 50 сайтов. Сайты брались из официальной страницы и сайта awwwards.com. В равной степени участвуют интернет магазины и обычные проекты. Полный список тут.

Полное исследование мы можете изучить тут

Умеем выстраивать новый сайт поверх прошлого. Например, если у вашей системы есть готовые интеграции с доставкой, CRM-системой, складом и бухгалтерией, то мы можем их оставить. Мы будем использовать информацию из вашей старой CMS для построения нового сайта, а процессы оставить на прошлом ресурсе. Естественно, мы можем переписать ваши интеграции, если они устарели и не пригодны для дальнейшей жизни. У нашей команды большой опыт создания и работы с API.

Проще говоря, мы можем осуществить мягкий переход от одной системы к другой. Мы сделаем новое лицо вашего сайта, оставив старые внутренности. Если какие процессы внутри совсем в плохом состоянии, мы их переделаем. Одна из самых популярных причин медленных сайтов –использование готовых шаблонов, которые хранят в себе устаревшие решения или неиспользованный код.

Используем Correspondence analysis для построение карт восприятия. Мы создаем таблицу с конкурентами и их атрибутами, а затем ее в двухмерное пространство. Такой подход позволяет создавать оптимальный набор атрибутов, а также находить новые направления.

Мы используем специальный сервер для международных проектов. Это позволяет добиваться хорошего соединения на каждом континенте.

Сайт хорошо доступен только в европе

Сайт доступен везде хорошо

Сайты Gatsby js работают быстро, потому что они используют технику, называемую «генерация статических сайтов». Это означает, что при создании сайта все HTML, CSS и JavaScript генерируются заранее и готовы к предоставлению пользователю без необходимости дополнительной обработки на стороне сервера. Это устраняет необходимость в запросах к базе данных или сложной логике на стороне сервера, что приводит к ускорению загрузки страниц. Также Gatsby использует такие методы, как разделение кода, ленивая загрузка, кэширование, webP изображения и предварительная выборка для дальнейшего повышения производительности.

Предварительная выборка (pre-fetching) – это техника, которая используется для повышения производительности сайта или приложения. Она заключается в предварительной загрузке контента или данных, которые вероятно будут запрошены в будущем. Это происходит в фоновом режиме после основной загрузки страницы. Gatsby видит какие страницы может посетить пользователь на текущей странице и загружает данные, которые могу потребоваться если он будет переходить на них. Предварительная выборка может существенно улучшить пользовательский опыт и увеличить скорость загрузки сайта.

Ленивая загрузка (lazy loading) – это техника, используемая для оптимизации производительности сайта или приложения. Она заключается в загрузке ресурсов, таких как изображения или видео, только в тот момент, когда они необходимы для отображения на экране. Это позволяет уменьшить объем данных, которые должны быть загружены на стартовой странице, что приводит к быстрой загрузке сайта и улучшенному пользовательскому опыту. Ленивая загрузка является эффективным способом улучшения производительности сайта, особенно для сайтов с большим количеством изображений или видео.

WebP – это формат изображения, разработанный компанией Google. Он был создан с целью улучшения качества изображений при меньшем размере файла, чем у традиционных форматов, таких как JPEG и PNG. Он экономнее на 25%-34%. На данный момент он поддерживается уже всеми браузерами.

Разделение кода (code splitting) – это техника в разработке программного обеспечения, при которой основной код приложения разделяется на меньшие, отдельные части или блоки. Это позволяет загружать приложение только с необходимым кодом для конкретной страницы или функции, а не загружать вcю кодовую базу сразу. Это приводит к улучшению производительности, поскольку приложение загружает только необходимый код для действий текущего пользователя. Разделение кода также помогает лучше организовать и поддерживать код, поскольку каждый блок кода может быть разработан, протестирован и обновлен независимо.

Кэширование – процесс хранения часто используемых данных во временном хранилище, так что их можно легко извлечь и использовать снова, не выполняя одну и ту же вычисление или сетевой запрос много раз. Это помогает ускорить производительность веб-сайта или приложения, уменьшая количество данных, которые должны быть переданы через сеть и обработаны браузером.

Стоимость часа работы наших специалистов находится в пределах от 1500 до 4000 рублей.

Стоимость зависит от объема и сложности проекта.

У нас есть два юридических лица в РФ и Грузии.

SCRUM