Реактивные сайты
на Gatsby
Набор наших инструментов
Нажмите на интересный
Делаем все макеты в Figma.
Перед разработкой сайта у вас будет возможность ознакомиться с внешним видом и согласовать его.
Мы не используем грязные шаблоны со стоков с множеством ошибок.
Подробнее про важность скорости для конверсии
Ниже отчеты из Google Analytics, гдe аудитории разбиты на две группы - покупатели и не покупатели. У покупателей страницы грузились значительно быстрее!
Сред. взаимодействие с документом— среднее время (в секундах), которое браузер затрачивает на обработку документа. Документация.
Вот такой странный перевод на русский.
Распределение загрузки среди пользователей при помощи гистограммы одного из сайтов.
Здесь видно, что 70 процентов пользователей имеет загрузку больше чем 1 секунда. А 25 процентов – больше 3 секунд!
Можно смело сказать, что этот бизнес теряет значительную часть прибыли. Упущенная прибыль за год составляет примерно от 12 000 000 до 18 000 000 рублей.
Цитата Google про скорость
Если этого отчета вам мало, то вот тут есть 30 кейсов с экспериментами про скорость и влияние этого на конверсию.
Как сделать такой же отчет в Google Analytics и Яндекс метри ке?
Google Analytics
В разделе “Поведение” -> “Скорость загрузки сайта” -> “Время загрузки страниц” -> Выбрать вкладку “Распределение” и метрику “Сред. взаимодействие с документом“. Сделать один сегмент с конверсиями, второй без конверсий. В некоторых случаях можно добавить фильтрацию для новых пользователей, если у вас много повторных покупок. А если у вас, вдруг, нет никаких настроенных конверсий , то можно сделать сегмент с фильтрацией по глубине просмотра.
Сред. взаимодействие с документом — среднее время (в секундах), которое браузер затрачивает на обработку документа. Документация по разделу.
Яндекс метрика
В разделе “Отчеты” -> “Мониторинг” -> “Время загрузки страниц” -> “Сравнить сегменты“. Выбирайте один сегмент, который совершает целевые действия, а другой не совершает. И смотрите на разницу в показателях.
Документация по разделу
У меня сайт быстрый... при подключенном Wifi
Скорее всего, вы проверяете скорость сайта при использовании сети Wi-fi. Далеко не все ваши посетители имеют такое подключение. Многие из них находятся не дома: в дороге, в метро, за городом. Они используют мобильный интернет, а он не всегда 4G. Также вы были на своем сайте много раз и у вас уже есть сохраненный кэш в вашем браузере. Именно по этой причине для определения скорости нужно использовать отчет в GA c гистограммой.
Вы можете имитировать медленное подключение в браузере Google Chrome. Для этого нужно перейти в режим разработчика, нажав на клавишу F12, а после перейти на вкладку “Network”. В ней нужно нажать на “disable cache” и нажать на “trottling”. В всплывающем окне выбрать режим замедления - “Fast 3g”. Теперь вы можете попользоваться вашим ресурсом, как новый пользователь без подключенного Wi-fi. Можно добавить свою скорость соединения в кастомные настройки, если вы считаете, что 3G – это слишком радикально.
Узнайте, на сколько вы увеличите доход, при более высокой конверсии
Чтобы поменять значения в калькуляторе потяните за ползунок или нажмите на цифру. Значения в ползунке обрабатываются функцией easeInQuad.
Бюджет на маркетинг в год:
Визиты на сайт за год:
Количество покупателей в год:
Доход с клиента в течение года:
Издержки на реализацию продажи:
Конверсия:
0.2 %
Прибыль:
53,000,000
CAC:
3,750
стоимость привлечения клиента
ROI:
32 %
Увеличение конверсии:
+
%
Конверсия:
0.24 %
Прибыль:
66,600,000
CAC:
3,125
ROI:
34 %
Коротко об нашем подходе к разработке
Два клика и PWA-приложения
Наши сайты легко превращаются в PWA-приложения, которые можно установить на рабочий стол телефона или компьютера через браузер, минуя официальные магазины приложений.
Gatsby vs WordPress vs Bitrix vs Tilda
В этом исследовании мы изучили 200 сайтов, разработанных на 4 системах. Мы использовали два инструмента — Google PageSpeed и Selenium — для имитации throttling.
На каждую систему было выбрано 50 сайтов. Сайты брались из официальной страницы и сайта awwwards.com. В равной степени участвуют интернет магазины и обычные проекты. Полный список тут.
Полное исследование мы можете изучить тут
Можем использовать данные и процессы из прошлых CMS
Умеем выстраивать новый сайт поверх прошлого. Например, если у вашей системы есть готовые интеграции с доставкой, CRM-системой, складом и бухгалтерией, то мы можем их оставить. Мы будем использовать информацию из вашей старой CMS для построения нового сайта, а процессы оставить на прошлом ресурсе. Естественно, мы можем переписать ваши интеграции, если они устарели и не пригодны для дальнейшей жизни. У нашей команды большой опыт создания и работы с API.
Проще говоря, мы можем осуществить мягкий переход от одной системы к другой. Мы сделаем новое лицо вашего сайта, оставив старые внутренности. Если какие процессы внутри совсем в плохом состоянии, мы их переделаем. Одна из самых популярных причин медленных сайтов –использование готовых шаблонов, которые хранят в себе устаревшие решения или неиспользованный код.
Делаем Correspondence analysis в исследованиях
Используем Correspondence analysis для построение карт восприятия. Мы создаем таблицу с конкурентами и их атрибутами, а затем ее в двухмерное пространство. Такой подход позволяет создавать оптимальный набор атрибутов, а также находить новые направления.
Специальный сервер для международных проектов
Мы используем специальный сервер для международных проектов. Это позволяет добиваться хорошего соединения на каждом континенте.
Сайт хорошо доступен только в европе
Сайт доступен везде хорошо
Почему Gatsby JS такой быстрый?
Сайты Gatsby js работают быстро, потому что они используют технику, называемую «генерация статических сайтов». Это означает, что при создании сайта все HTML, CSS и JavaScript генерируются заранее и готовы к предоставлению пользователю без необходимости дополнительной обработки на стороне сервера. Это устраняет необходимость в запросах к базе данных или сложной логике на стороне сервера, что приводит к ускорению загрузки страниц. Также Gatsby использует такие методы, как разделение кода, ленивая загрузка, кэширование, webP изображения и предварительная выборка для дальнейшего повышения производительности.
Предварительная выборка (pre-fetching) – это техника, которая используется для повышения производительности сайта или приложения. Она заключается в предварительной загрузке контента или данных, которые вероятно будут запрошены в будущем. Это происходит в фоновом режиме после основной загрузки страницы. Gatsby видит какие страницы может посетить пользователь на текущей странице и загружает данные, которые могу потребоваться если он будет переходить на них. Предварительная выборка может существенно улучшить пользовательский опыт и увеличить скорость загрузки сайта.
Ленивая загрузка (lazy loading) – это техника, используемая для оптимизации производительности сайта или приложения. Она заключается в загрузке ресурсов, таких как изображения или видео, только в тот момент, когда они необходимы для отображения на экране. Это позволяет уменьшить объем данных, которые должны быть загружены на стартовой странице, что приводит к быстрой загрузке сайта и улучшенному пользовательскому опыту. Ленивая загрузка является эффективным способом улучшения производительности сайта, особенно для сайтов с большим количеством изображений или видео.
WebP – это формат изображения, разработанный компанией Google. Он был создан с целью улучшения качества изображений при меньшем размере файла, чем у традиционных форматов, таких как JPEG и PNG. Он экономнее на 25%-34%. На данный момент он поддерживается уже всеми браузерами.
Разделение кода (code splitting) – это техника в разработке программного обеспечения, при которой основной код приложения разделяется на меньшие, отдельные части или блоки. Это позволяет загружать приложение только с необходимым кодом для конкретной страницы или функции, а не загружать вcю кодовую базу сразу. Это приводит к улучшению производительности, поскольку приложение загружает только необходимый код для действий текущего пользователя. Разделение кода также помогает лучше организовать и поддерживать код, поскольку каждый блок кода может быть разработан, протестирован и обновлен независимо.
Кэширование – процесс хранения часто используемых данных во временном хранилище, так что их можно легко извлечь и использовать снова, не выполняя одну и ту же вычисление или сетевой запрос много раз. Это помогает ускорить производительность веб-сайта или приложения, уменьшая количество данных, которые должны быть переданы через сеть и обработаны браузером.
Рассчитать стоимость проекта
Стоимость часа работы наших специалистов находится в пределах от 1500 до 4000 рублей.
Стоимость зависит от объема и сложности проекта.
У нас есть два юридических лица в РФ и Грузии.