Comments 30
Самые посещаемые веб-сайты в мире (Amazon, Aliexpress, Youtube, Wikipedia и тд) имеют превосходный UX
Так это неправда.
Прошу не путать с UI - как раз в интерфейсной части у гигантов индустрии есть вопросы. Но с точки зрения исследования человеческого опыта - из года в год рост наблюдается рост всех показателей, и мы должны всегда помнить, что для каждого проекта ключевой показатель только один. Например, у Youtube - это показатель вовлеченности. Исследования за 2020 год показали увеличение вовлеченности среднего мирового посетителя ресурса на 51% по сравнению с 2019
Но это же может быть не связано с интерфейсом вообще!
Вовлеченность увеличилась? Да, блин! По сравнению с 2019 годом, в 2020 году люди сидели на карантинах и делать было нечего. Вот и нонстопом убивали скуку в ютьюбе.
А какой-нибудь "менеджер" после этого может сказать, что он изменил цвет одной кнопочки и вон какой результат, давайте бонус!
Там больше дело в логике построения интерфейса и объектов совершения действий (все активные элементы). Youtube очень хорошо встраивает новые элементы управления раз в несколько месяцев и корректирует недостатки текущего интерфейса. UX это же не смена цвета кнопки, конкретно по Youtube Google в 2019 году показывал, насколько точно они определяют весь путь юзера от захода на платформу до выхода, подспутно совершая различные действия. На этой статистике были внедрены интересные инструменты - Плейлисты ("Джем" - автоматический плейлист из различных роликов), автосубтитры, динамические рекомендации. Представьте все это в размере миллиарда посещений ежедневно )
у ютьюба есть возможность проводить масштабные А/Б тесты, таким образом можно в какой-то мере исключать влияние внешний факторов, и конкретно судить на эффективность тестируемых изменений.
В "какой-то мере", потому что, конкретные изменения могли попасть в струю и совпасть с внешними факторами. Например во время скуки в пандемию "зашли" плейлисты. Но пандемия отступит и этот функционал станет менее востребован.
Так что, влияние внешних факторов (или каких-то других) не исключаетя вообще никогда.
Если совсем конкретно, у Google есть с десяток нейронных сетей, которые сами все данные собирают и делают предварительный анализ. Сделать какой либо полноценный анализ на аудиторию от 10 тыс. чел в сути вообще не представляется возможным, слишком много разнообразных данных, паттернальность каждого типа целевой аудитории разная
Я ничего не путаю - UX указанных выше сайтов очень далек от превосходного и проблема заключается не только в UI.
Что касается Youtube, то я уверен, что основные причины роста это пандемия и практическое отсутствие конкурентов.
Встречались ли вам сайты ужасные до безобразия (с любой точки здравого смысла), но когда смотришь на статистику, цифры поражают воображение? Мы подобное наблюдаем точно раз в год, и тогда не понятно вообще, с чем работать. Остается только расширение (если говорить о e-commerce) в сторону интересов ЦА
Убрали версии css/js файлов в коде (напр, /main.css?version=3.2) - чем сэкономили совокупно еще 0.7 - 1 сек
Зачем и каким образом это повлияло на скорость?
После этого, сконвертировали все изображения в Webp - минифицированный и продвинутый веб-формат картинок, рекомендуемый Google, чем сократили размер еще на 52%.
После этого webp желательно тоже сжать, например, с помощью tinypng.
Объединили 22 css файла в 1
Поделитесь, как именно?
Самописный сайт или на CMS?
Если CMS, то манипуляции с загрузкой js и css файлов делались хардкодом или как-то иначе?
Для ускорения бекенда хватило оптимизации только БД или с кодом тоже что-то делали?
Сайт был на CMS PrestaShop. Разберем по пунктам:
Убрали версии css/js файлов в коде (напр, /main.css?version=3.2) - чем сэкономили совокупно еще 0.7 - 1 сек
Версии в файлах создают дополнительные запросы между клиентом и сервером (обращение к серверу -> нахождение нужной версии -> получение ответа на код файла -> формирование ссылки) вместо того чтобы напрямую одним запросом тянуть нужный файл
После этого, сконвертировали все изображения в Webp - минифицированный и продвинутый веб-формат картинок, рекомендуемый Google, чем сократили размер еще на 52%.
В данном случае, Webp уже был оптимизирован до максимума с помощью Fileoptimizer
Объединили 22 css файла в 1
С помощью скрипта асинхронной загрузки CSS файлов ) Это проще всего в данном случае, и не сломает логику загрузки
Если CMS, то манипуляции с загрузкой js и css файлов делались хардкодом или как-то иначе?
В нашем случае, меняли логику загрузки в файлах темы
Для ускорения бекенда хватило оптимизации только БД или с кодом тоже что-то делали?
Ревизию делали по всему коду - там при возможных манипуляциях прироста производительности не ожидалось. Оптимизация БД дала возможность сократить время на каждый запрос
Версии в файлах создают дополнительные запросы между клиентом и сервером
(обращение к серверу -> нахождение нужной версии -> получение
ответа на код файла -> формирование ссылки) вместо того чтобы
напрямую одним запросом тянуть нужный файл
Простите, что? Какое нахождение версии на сервере? Какое формирование ссылки? Вы сами в оптимизации участвовали или просто пересказываете то, что вам навешали? Простите, вы несёте дикую дичь. Что main.css, что main.css?v=3.2 - количество запросов одно и то же, просто во втором случае, если в кеше браузера версия 3.1, а на сайте 3.2, тогда да, идёт запрос не к локальному кешу, а к серверу. Если вы убрали версию, как вы обеспечите адекватное обновление файла на стороне клиента при обновлении js или css файлов? У юзера будут грузится старые стили из локального кеша. То есть, изменений он не увидит.
С помощью скрипта асинхронной загрузки CSS файлов
Объединение файлов в один и асинхронная загрузка - это совершенно разные вещи. Вы просто повторяете фразы от ваших разработчиков, не понимая их?
Ревизию делали по всему коду - там при возможных манипуляциях прироста производительности не ожидалось.
А почему не обновили версию php 7.1 до более новой? Это бы ускорило выполнение кода где-то на 25%.
Простите, что? Какое нахождение версии на сервере? Какое формирование ссылки? Вы сами в оптимизации участвовали или просто пересказываете то, что вам навешали? Простите, вы несёте дикую дичь. Что main.css, что main.css?v=3.2 - количество запросов одно и то же, просто во втором случае, если в кеше браузера версия 3.1, а на сайте 3.2, тогда да, идёт запрос не к локальному кешу, а к серверу. Если вы убрали версию, как вы обеспечите адекватное обновление файла на стороне клиента при обновлении js или css файлов? У юзера будут грузится старые стили из локального кеша. То есть, изменений он не увидит.
Да, верно. Если есть локальный кеш и пользователь заходит не в первый раз. А что, если он заходит в режиме инкогнито каждый раз на сайт? В этой нише таких большинство, с различными техническими нюансами. В любом случае, тесты показали: отключение версий у 14 файлов дает прирост в производительности, особенно при увеличении нагрузки.
Объединение файлов в один и асинхронная загрузка - это совершенно разные вещи. Вы просто повторяете фразы от ваших разработчиков, не понимая их?
Цель данных работ была сделать асинхронную загрузку ресурсов и выключить неиспользуемые файлы CSS. Прикинув время на объединение файлов в один, с сохранением логики загрузки кода, и временем на вставку скрипта в четыре строки - оставили последнее. На выходе будет одинаковый результат
А почему не обновили версию php 7.1 до более новой? Это бы ускорило выполнение кода где-то на 25%.
Точно сказать не могу. Одна из причин - были нюансы в работе плагинов
Да, верно. Если есть локальный кеш и пользователь заходит не в первый раз. А что, если он заходит в режиме инкогнито каждый раз на сайт? В этой нише таких большинство, с различными техническими нюансами. В любом случае, тесты показали: отключение версий у 14 файлов дает прирост в производительности, особенно при увеличении нагрузки.
У меня очень большие сомнения, что убирание данного параметра дало такой большой прирост. Были ли тесты чистыми, то есть, полностью закрыть браузер и открыть снова в инкогнито или обычная перезагрузка в том же инкогнито или перезагрузка с очисткой кеша? Есть ли какой-нибудь пруф, что параметры в запросах к css дают дополнительные запросы на стороне сервера? Пусть на такие сайты заходят в основном через инкогнито, но это не значит, что не инкогнито надо игнорировать. Вы не ответили, как вы решаете проблему автообновления файлов на стороне кеша браузера при обновлении их на сервере, если вы убрали параметр, который для этого используется?
Цель данных работ была сделать асинхронную загрузку ресурсов и выключить неиспользуемые файлы CSS. Прикинув время на объединение файлов в один, с сохранением логики загрузки кода, и временем на вставку скрипта в четыре строки - оставили последнее. На выходе будет одинаковый результат
Вы вставили php скрипт, который сжимает css файлы в один. Правильно? При чем тут тогда асинхронная загрузка? Или js скрипт, который асинхронно подгружает стили?
У меня очень большие сомнения, что убирание данного параметра дало такой большой прирост. Были ли тесты чистыми, то есть, полностью закрыть браузер и открыть снова в инкогнито или обычная перезагрузка в том же инкогнито или перезагрузка с очисткой кеша? Есть ли какой-нибудь пруф, что параметры в запросах к css дают дополнительные запросы на стороне сервера? Пусть на такие сайты заходят в основном через инкогнито, но это не значит, что не инкогнито надо игнорировать. Вы не ответили, как вы решаете проблему автообновления файлов на стороне кеша браузера при обновлении их на сервере, если вы убрали параметр, который для этого используется?
Надо посмотреть, остались ли у нас пруфы, ведь работы велись полгода назад. Могу сказать, что тесты были чистыми - замерялись параметры на потоке трафика в течение 3-х дней с ?version и без. Для автообновления файлов мы используем ExpiresActive On ExpiresDefault "modification" в htaccess.
Вы вставили php скрипт, который сжимает css файлы в один. Правильно? При чем тут тогда асинхронная загрузка? Или js скрипт, который асинхронно подгружает стили?
С помощью js скрипта загружаем css файлы асинхронно. При сжатии файлов в один конфликты возникали в бразуерах Opera
Надо посмотреть, остались ли у нас пруфы, ведь работы велись полгода назад.
Я имел в виду пруфы на источники в интернете. Откуда изначально взялась эта идея?
Для автообновления файлов мы используем ExpiresActive On ExpiresDefault "modification" в htaccess.
Ну, как вариант. Хотя со своими нюансами. Интересно, какой период указывается.
При сжатии файлов в один конфликты возникали в бразуерах Opera
Но вы же написали, что сжали 22 файла в один.
Но вы же написали, что сжали 22 файла в один.
Да, немного оговорились в кейсе (сам кейс неспешно писали около месяца), был выбор между объединением (хардкор или скрипт) и асинхронной загрузкой во всех браузерах. На мобильных мы решили проблему с помощью http2
Я имел в виду пруфы на источники в интернете. Откуда изначально взялась эта идея?
Со времен работы с Wordpress есть накопленный опыт в темах разработчиков убирать сразу вызов css через @import и ?version в head/footer. Там прирост производительности значительный после данных изменений, благодаря не самой простой структуре работы темы на движке. Примерно то же наблюдается в большинстве CMS. Насколько я помню, при большом количестве запросов с ?version х количество трафика х скан-боты суммарно увеличивается нагрузка на процессор сервера (дай бог VDS/VPS, ведь чаще всего это просто хостинг) и операций I/O , от этого скорость загрузки страницы конечно падает
Спасибо за статью, довольно вдохновляюще. Однако есть вопросы с нюансами..
Подоплёка: знаю тех, кто больше 10-ти лет занимается разработкой на opencart к примеру, несколько разных интернет-магазинов, разные способы оптимизации и ускорения, поделился вашей статьёй.. и сразу возникли вопросы:
1) версия php и nginx если использовался.
2) а всё таки, это CMS из коробки или самописная? Очень это интересно
3) Вот вы написали, что бюджет 75т.р ( и такой подьем)- да, все вполне реально, хотя конечно у знающих людей возникли сомнения ( типа того, что минимальный бюджет на такое 150т.р, либо это просто специалисты жадные попадались?)
4) А Вы делаете такие вещи на заказ? Оптимизируете таким образом магазины, скажем на том же Opencart-е?
Сталкивались с различными вариантами - и CMS, и самописные системы, с Opencart работаем время от времени. Одно могу сказать точно - с Битрикс24 помочь будет очень сложно в виду замудренной структуры и самобытности самой системы, в которой минимальные изменения "не в коробке" может внести профильный программист.
1) версия php 7.1, на борту Apache 2.1.1.
2) CMS PrestaShop с кучей запущенных плагинов
3) Бюджет включал в себя проведение всех типов исследований и разработку ТЗ для программистов в трекинг системе. Бюджет зависел от нескольких вещей - количество типовых страниц, трафик в сутки, тип CMS (или самописная) - чтобы разобраться в логике
4) Да, это наша основная специализация.
Прошу заметить что история более чем рядовая, и к сожалению, UX в полноценном смысле используется в действительно больших проектах (например, у Сбера есть целая UX-лаборатория из 20 инженеров для своих проектов), но в проектах среднего масштаба это большая редкость
Короче. Как обычно, никакой оценки какие же именно работы помогли, так как делалось всё одновременно.
Ну и как обычно мы понятия не имеем что ещё делалось собственником в это время.
Может до производимых работ элементарно не брали трубку и клиенты не могли дозвониться? И тут собственник взялся за сайт, уволил старого менеджера, нанял нового, который теперь отвечает на все звонки, вот продажи и увеличились.
Так что все такие "успешные" кейсы делаются примерно так: берём 10 разных клиентов, делаем работы. Там где что-то получилось - публикуем саксесс-стори. В связи с чем случился успех - сказать сложно. Потому, что факторов влияющих - тьма.
Уверен, что суть совсем не в UX и не в увеличении шрифтов с 14 до 16.
Люди не тупые. Если нужно что-то купить и цена хорошая - купят даже там, где "дизайн 90-х."
Единственное, что, возможно, точно сработало, это сделали немножко более быструю работу сайта. Вот это вот "Время загрузки сайта сократилось с 4...6 сек до 1.2-1.8 сек." и дало 90% влияния на результат (если больше собственником одновременно в работе ничего не менялось).
Без проблем, задавайте вопросы, я постараюсь по мере возможности на все ответить
Ну и как обычно мы понятия не имеем что ещё делалось собственником в это время.
Ничего. Отдел продаж на аутсорсе, заказ совершается в 98% случаев по схеме: заказал на сайте - упал на почту - менеджер набрал. Статистика показывает конкретно количество полученных заказов через сайт
Короче. Как обычно, никакой оценки какие же именно работы помогли, так как делалось всё одновременно.
Работы велись поэтапно, ровно как показано в кейсе. При этом, после каждого этапа мы замеряли результаты и изменения поведения (ПФ) по прямым и косвенным признакам (аналитика, вебвизор)
В связи с чем случился успех - сказать сложно. Потому, что факторов влияющих - тьма.
Да, согласен, факторов тьма! Поэтому мы работаем с BA - бизнес-аналитиком в связке, чтобы не отклонятся от основной идеи - увеличения заказов и средней корзины
Уверен, что суть совсем не в UX и не в увеличении шрифтов с 14 до 16.Люди не тупые. Если нужно что-то купить и цена хорошая - купят даже там, где "дизайн 90-х."
Шрифт играет большую роль в восприятии и эмоциональном отклике, особенно на мобильных устройствах (мы не только увеличили значимые текстовые и активные элементы, но еще и поменяли шрифт, исходя из e-commerce тематики и целевой аудитории проекта). Существуют исследования влияния определенного шрифта на сумму заказа - не просто так при разработке операционной системы MacOS в среде взаимодействия "пользователь - ПК" Стив Джобс в свое время очень заморочился с отображением шрифтов - данный опыт он перенес далее в iOS, создав уникальную шрифтовую гарнитуру, и до сих пор каллиграфия играет у Apple важную роль, даже в рекламных роликах. Очень советую почитать данную статью для общего понимания важности типа шрифтов
А скорость загрузки да, также важная составляющая, но боюсь, без смены акцентов получить выдающиеся результаты не получится. Здесь сработал конкретно комплексный подход
Всем привет! Сегодня речь пойдет об интересном кейсе, когда мы, используя только UX-исследования и BA-ориентированный подход, смогли улучшить оборот проекта на 75% всего за 30 дней. Вас ждет интереснейший лонгрид, запаситесь поп-корном )
Это точно! Уже начал жевать поп-корн!
Тут у нас классика музгозапудривания с первого абзаца:
1) "улучшения оборота на 75%" - ладно хоть не шелковистость волос увеличиваете на 100%
2) "улучшения оборота на 75%" "используя только" ... "исследования" и ... "подход" - "исследования" и "подход", которые что-то улучшают в попугаях...
Коротко о нас - евангелисты UX-ориентированного подхода, когда в центре цифрового бизнеса стоит клиент (считай интернет-пользователь) привязанный к целевому действию, поэтому:
О том, что Вы "евангелисты" стало понятно сразу, как только вы цитатку некой Heidi в аксиому возвели, просто потому, судя по всему, что она из Гугла.
1) "В центре бизнеса стоит клиент"... - Может ему у края бизнеса постоять? А то акционер-то куда встанет?
2) "клиент ... привязанный к целевому действию" - Не знаю, конечно, как можно привязать к действию, да еще и целевому, но таки привязали клиента! Беда! Между прочим лишение свободы уголовно наказуемое деяние.
(А если серьезно, то вы не чувствуете, что пишите, мягко говоря, бред? Какие-то мифические центры бизнеса, абстрактные клиенты привязанные к действиям, улучшения финансовых операций на проценты и вот это вот всё)
Ну что же вы сразу так дерзко?)
Это точно! Уже начал жевать поп-корн!
Тут у нас классика музгозапудривания с первого абзаца:
1) "улучшения оборота на 75%" - ладно хоть не шелковистость волос увеличиваете на 100%
2) "улучшения оборота на 75%" "используя только" ... "исследования" и ... "подход" - "исследования" и "подход", которые что-то улучшают в попугаях...
В своей работе мы опираемся только на твердые цифры (научный подход), о чем стараемся говорить всегда. Зачем мне вступать в спор, если цифры говорят сами за себя? Посмотрите на динамику оборота за период март 2021 - июнь 2021:
То есть, 2.1 млн это было пиковое значение, а теперь посмотрим следующие месяцы, начиная с августа 2021 и заканчивая декабрем 2021:
Даже несмотря на небольшой сезонный откат в сентябре, динамика остается положительной и понятной.
В остальном, работа UX сводится к тому, чтобы как можно проще подвести клиента к совершению целевого действия. Ведь изначально на сайт он попал, имея определенный интерес к товарам. Не правда ли?
мы опираемся только на твердые цифры (научный подход)
аха, какой научный подход, когда никак не можете исключить кучу влияющих факторов?
Например 1: до ваших работ на складе отсутствовали ходовые позиции, а после ваших работ их подвезли, вот продажи и выросли.
Например 2: до ваших работ заказчик сам отвечал на звонки и не всегда брал трубку. Затем решил серьезно отнестись к бизнесу, нанял вас, а ещё нанял менеджера на телефон.
В этих примерах вы будете считать, что заслуга ваша, так как "научный метод и твердые цифры". Только в этих примерах цифры и увеличение продаж с вами не связаны.
Так что... Откуда уверенность, что это вследствии ваших работ?
Фактор 1. У магазина 4 склада, на которых всегда бывает 80% всех позиций. При этом, около 40% всех товаров магазин продает под своими брендами. Нишу не могу назвать, но поверьте, это узкоспециализированные товары не первой необходимости, и их постоянное наличие крайне важный момент
Фактор 2. Учитывая, что в компании индекс NPS остается на уровне 83...85%, а доходимость заказов и их обработка 100%, причем 24/7 (ночью часто бывают заказы) без выходных и праздников, а совершение звонка после получения заказа в среднем 3..7 минут -> с отделом продаж полный порядок
Вы заметьте, я ничего не утверждаю. Цифры говорят сами за себя.
А они говорят, что при одинаковом количестве трафика можно делать совершенно разные продажи, с бОльшим средним чеком, если подойти к ситуации с другой стороны
Спасибо за статью и комментарии.
Не понятно, что такое ВА в заголовке. Если речь про АБ тесты, то так и не увидел в статье про них...
Но больше всего понравилось про результаты. Просто у нас (ну почти конкурентов) вызывал вопрос увеличения продаж с июля месяца примерно на 60% без ясных причин, теперь похоже стало понятно, что примерно на столько неожиданно подрос рынок. Спасибо!!! Загадка получила разъяснение.
40% прямых заходов-закладок выглядит просто дико, не могу даже представить.
PS Если у них реально до прорисовки страницы было 5 секунд, то это маразм...
Ну и откуда они берут зарплату для отзвона 24/7 для меня представляется загадкой, хотя сказать про необходимость ничего не могу, так как я то наблюдаю ОЧЕНЬ нишевый магазин (у покупателя по факту выбор из 4 и никто круглосуточно не работает).
судя по данной статистике "до" и "после". Заходов на сайт осталось примерно столько же. Увеличились продажи при этом.
Если бы это рынок подрос, то заходов стало бы больше, а тут не стало.
BA - бизнес-аналитик, А/Б тесты не проводили, все делалось в режиме реал-тайм.
Вопрос увеличения продаж - больше вопрос работы с трафиком. Перед началом всех работ мы увидели, что большая часть трафика по статистике просто отваливается на каком то из этапов хождения по сайту, вот с этими всеми проблемами мы и работали.
40% прямых заходов это не только переходы из закладок. Это еще и прямые заходы после отправки уведомлений на почту (положил в корзину и не купил), а также периодические рассылки раз в несколько недель о новостях.
PS Если у них реально до прорисовки страницы было 5 секунд, то это маразм...
Вот в этом и весь интерес - это среднее время на всех устройствах. Встречались случаи 1-2 сек, были до 8 сек. Проблема была вообще неочевидной: разные анализаторы показывали разные результаты, пришлось все время от TTFB до полной отрисовки замерять вручную на всех устройствах, с которых заходит трафик
Ну и откуда они берут зарплату для отзвона 24/7 для меня представляется загадкой, хотя сказать про необходимость ничего не могу, так как я то наблюдаю ОЧЕНЬ нишевый магазин (у покупателя по факту выбор из 4 и никто круглосуточно не работает).
Выход прост. Общение с покупателем через почту, телефон или любой другой вид связи. При покупке указывается, как и когда удобно связаться, это учитывается сразу. Про зарплату не совсем понял - отдел продаж на аутсорсе, по договору работают в таком графике
Кейс: увеличиваем оборот интернет-магазина на 75% (~1,5 млн рублей) за месяц с помощью UX/BA