Новый клиент. После интервью выяснилось, что самая больная проблема — очень медленный каталог. Список товаров загружался за 30+ секунд и сильно тормозил при работе.
Поиск решения
Анализ показал, что сервер вносит в скорость работы каталога не очень большой вклад (примерно 7%) и большая часть “тормозов” наблюдается на клиентской стороне. Поэтому решили внимательнее посмотреть на верстку и реализацию шаблонов каталога.
Профилирование страницы показало ряд проблем:
- Быстрый просмотр каждого товара загружался вместе с загрузкой списка товаров. В быстром просмотре на каждый товар было по 5-7 картинок, т.е. на загрузку одного экрана товаров (20 штук) у с сервера выкачивалось около 120(!) картинок.
- В списке товаров пользователю отдавались оригиналы изображений по 600кб и выше каждый. Вместе с предыдущим пунктом, на одну страницу товаров подтягивалось более 80Мб (!) картинок.
- В JS коде были найдены несколько таймеров, запускавшихся раз в 0.1с, которые отвечали за прорисовку адаптивной версии сайта. Они просто вешали браузер.
Особенности реализации
Переписали окно быстрого просмотра товара на ajax (загрузка по требованию). Везде где это только возможно начали отдавать картинки только в том разрешении и качестве, которое нужно пользователю, убрали все таймеры на js переписав адаптив на CSS. Сделали “ленивую” подгрузку для изображений в списке товаров.
Эффект от проведенных работ
Страница перестала тормозить, а время полной загрузки уменьшилось в 20 раз до примерно 1.5 секунд.