Каталог открывается быстрееThe catalogue opens faster

ЦельGoal

Инвестор открывает сайт с телефона — часто на мобильном интернете — и как можно быстрее начинает отбирать предложения. Это первая часть цели сайта: сразу видеть предложения.An investor opens the site on a phone — often on mobile data — and starts narrowing down offers as soon as possible. This is the first part of the site's goal: seeing offers right away.

ЗадачаProblem

Каталог при каждом открытии загружал файл данных lots.json размером 4,4 МБ (188 КБ в сжатом виде) и разбирал его, прежде чем фильтры и счётчик начинали работать. 94% этого файла — заранее подготовленные ячейки таблицы сравнения, которые нужны только на странице «Сравнение». На телефоне с мобильным интернетом каталог был готов через 2,6 секунды.On every visit the catalogue downloaded the 4.4 MB lots.json data file (188 KB compressed) and parsed it before the filters and the count started working. 94% of that file is pre-built compare-table cells, needed only on the «Compare» page. On a phone with mobile data the catalogue was ready after 2.6 seconds.

Как решилиHow it was solved

• Ячейки сравнения вынесены в отдельный файл, который загружается только на странице «Сравнение». Каталог получает лёгкий файл без них.The compare cells moved to a separate file loaded only on the «Compare» page. The catalogue gets a light file without them.
• Ничего не изменилось внешне: фильтры, карта и сравнение работают как раньше; содержимое ячеек сравнения то же.Nothing changed visually: filters, map and comparison work as before; the compare cells are the same.
• Итог (телефон, Fast 3G, процессор в 4 раза медленнее компьютера): каталог готов через 1,53 с вместо 2,64; по сети передаётся 36 КБ вместо 188; браузеру нужно разобрать 255 КБ вместо 4,4 МБ.Result (phone, Fast 3G, CPU 4× slower than a desktop): the catalogue is ready after 1.53 s instead of 2.64; 36 KB travel over the network instead of 188; the browser parses 255 KB instead of 4.4 MB.

До и послеBefore and after