Как повысить скорость, юзабилити и user experience посетителей вашего интернет-магазина?
— Сделать его RIA! (Rich Internet Application)
Работая над очередным проектом — веб-модулем для CRM заказчика, я искал способ быстрого поиска и фильтрации данных (увеличения которых не предполагалось более чем на 500 в год). Я сделал 10000 демо-записей в БД и работал с ними. Первое, что мы сделали — это AJAX поиск — быстро, не перезагружает каркас страницы -, в целом, подходящий вариант.
Однако, мне в голову пришла ещё одна идея — почему бы не загрузить данные в виде json массива?
В итоге вес 10к записей получился около 1мб, а передаваемых данных — 80кб (gzip 9 nginx). Скорость поиска по массиву в кэше — менее 10мс. И ещё огромный плюс — файлы json кэшируются браузером. Т.е. при перезагрузке страницы данные читаются из кэша моментально, на сервер идёт лишь запрос if-modified-since и получает ответ 304.
Естественно, встаёт вопрос: при изменении одной записи — перезагружать заново все 10к записей?
Решение тривиально: данные делятся на несколько файлов — от редко меняющихся до часто.
В демке я попробовал такое разделение на примере ноутбуков (о демке ниже) (500+ записей):
При загрузке, те данные, которые изменены — загружаются, остальные берутся из кэша.
(в текущей демке я убрал это, т.к. ещё нужно было писать синхронизацию файлов — это уже для продакшена)
Паралельно, я искал себе новые комплектующие в интернет-магазине Ситилинк (не пеар! просто хороший интернет-магазин — выступил в качестве «донора» данных :) — отличный дизайн и юзабилити. Но то, что страничка постоянно перезагружалась при сортировке или применении фильтра — удручало.
Я решил попробовать применить концепт с загрузкой и обработкой данных (функциональность) на стороне клиента и к интернет-магазину.
Естественно, делать прелоад всех данных не надо :) Но, по мере захода в разделы — вполне — как собственно и реализовано в демке.
Что из этого получилось вы можете посмотреть:
1. Зайдите в оригинальный интернет-магазин, поиграйтесь с сортировкой, фильтрами и т.п. — субъективно запомните скорость от отклика до отображения данных.
2. Сравните скорость в демке интернет-магазина (RIA) (функционал реализован исключительно на стороне клиента с помощью javascript+jquery. Nginx отдаёт только статику. Никаких php, apache, mysql и т.п.).
Субъективно, скорость работы в браузерах от «очень быстро» до «нормально»: Chrome, Opera 10.5+, FF 3+, IE8/7.
Безусловно, такая реализация RIA не для крупных интернет-магазинов и это не замена стандартной модели запрос-ответ-генерация странички, в первую очередь из-за поисковых систем и сео, но её можно активировать, в случае использования посетителем современного браузера.
Если у вас небольшой/средний интернет-магазин, вы вполне можете попробовать добавить клиент-сайд RIA-функциональность.
Да, это дополнительный объём работы, практически дубляж функционала динамики серверсайда на клиентской части.
RIA-вариант не является необходимостью, это скорее имиджевый ход, демонстрация использования cutting-edge technologies. Если бы мой любимый компьютерный интернет-магазин дал мне возможность пользоваться им в RIA-варианте, его бы акции сильно подросли в моих глазах.
Стоит ли оно того? Уверен, ваши прогрессивные посетители ответят — безусловно!
Эта демка — всего-лишь демонстрация подхода. Далеко не всё реализовано, но реализуемо.
P.S. Отдельно спасибо хабраюзеру lafayette за предоставленный сервер для демки.
— Сделать его RIA! (Rich Internet Application)
Работая над очередным проектом — веб-модулем для CRM заказчика, я искал способ быстрого поиска и фильтрации данных (увеличения которых не предполагалось более чем на 500 в год). Я сделал 10000 демо-записей в БД и работал с ними. Первое, что мы сделали — это AJAX поиск — быстро, не перезагружает каркас страницы -, в целом, подходящий вариант.
Однако, мне в голову пришла ещё одна идея — почему бы не загрузить данные в виде json массива?
В итоге вес 10к записей получился около 1мб, а передаваемых данных — 80кб (gzip 9 nginx). Скорость поиска по массиву в кэше — менее 10мс. И ещё огромный плюс — файлы json кэшируются браузером. Т.е. при перезагрузке страницы данные читаются из кэша моментально, на сервер идёт лишь запрос if-modified-since и получает ответ 304.
Естественно, встаёт вопрос: при изменении одной записи — перезагружать заново все 10к записей?
Решение тривиально: данные делятся на несколько файлов — от редко меняющихся до часто.
В демке я попробовал такое разделение на примере ноутбуков (о демке ниже) (500+ записей):
... data = [
"notebooks1.json" // 18кб - редко меняющиеся данные - описание товара
"notebooks2.json" // 4кб - рейтинг, отзывы, статус
"notebooks3.json" // 2кб - цены
"notebooks4.json" // 2кб - наличие на складе
]
При загрузке, те данные, которые изменены — загружаются, остальные берутся из кэша.
(в текущей демке я убрал это, т.к. ещё нужно было писать синхронизацию файлов — это уже для продакшена)
Паралельно, я искал себе новые комплектующие в интернет-магазине Ситилинк (не пеар! просто хороший интернет-магазин — выступил в качестве «донора» данных :) — отличный дизайн и юзабилити. Но то, что страничка постоянно перезагружалась при сортировке или применении фильтра — удручало.
Я решил попробовать применить концепт с загрузкой и обработкой данных (функциональность) на стороне клиента и к интернет-магазину.
Естественно, делать прелоад всех данных не надо :) Но, по мере захода в разделы — вполне — как собственно и реализовано в демке.
Что из этого получилось вы можете посмотреть:
1. Зайдите в оригинальный интернет-магазин, поиграйтесь с сортировкой, фильтрами и т.п. — субъективно запомните скорость от отклика до отображения данных.
2. Сравните скорость в демке интернет-магазина (RIA) (функционал реализован исключительно на стороне клиента с помощью javascript+jquery. Nginx отдаёт только статику. Никаких php, apache, mysql и т.п.).
Субъективно, скорость работы в браузерах от «очень быстро» до «нормально»: Chrome, Opera 10.5+, FF 3+, IE8/7.
Безусловно, такая реализация RIA не для крупных интернет-магазинов и это не замена стандартной модели запрос-ответ-генерация странички, в первую очередь из-за поисковых систем и сео, но её можно активировать, в случае использования посетителем современного браузера.
Если у вас небольшой/средний интернет-магазин, вы вполне можете попробовать добавить клиент-сайд RIA-функциональность.
Да, это дополнительный объём работы, практически дубляж функционала динамики серверсайда на клиентской части.
RIA-вариант не является необходимостью, это скорее имиджевый ход, демонстрация использования cutting-edge technologies. Если бы мой любимый компьютерный интернет-магазин дал мне возможность пользоваться им в RIA-варианте, его бы акции сильно подросли в моих глазах.
На заметку: на западе, многие мастодонты онлайн-бизнеса и не только делают версии своих сервисов под iPhone и iPad — а на разработку под эти платформы требуются не малые деньги (от 15-50к до 500к+ $$). По-вашему, имиджевое это только решение?
Стоит ли оно того? Уверен, ваши прогрессивные посетители ответят — безусловно!
Эта демка — всего-лишь демонстрация подхода. Далеко не всё реализовано, но реализуемо.
P.S. Отдельно спасибо хабраюзеру lafayette за предоставленный сервер для демки.
