Улучшение производительности з... Заметка
RSS Etsy Engineering | Code as Craft

Улучшение производительности за счет предварительной загрузки страниц товаров из поиска Etsy

Etsy реализовала API правил спекуляций (SRA), чтобы значительно улучшить производительность страниц списка продуктов. Этот новый API браузера позволяет веб-сайтам инструктировать браузеры о том, как извлекать ресурсы для будущей навигации. SRA предлагает предварительное получение, которое загружает HTML, и предварительное рендеринг, который полностью загружает и рендерит страницу. Хотя предварительное рендеринг предлагает большие выгоды, предварительное получение является менее рискованным началом. SRA предоставляет более простой API, чем традиционные методы предварительного получения, и путь обновления до предварительного рендеринга. Etsy в частности использовала SRA для предварительного получения страниц списка, когда пользователи наводили курсор на органические списки на странице поиска на рабочем столе. Реализация включала добавление тега скрипта с правилами JSON для определения того, когда и что предварительно получать. Одним из ключевых уроков, извлеченных из этого опыта, было то, что SRA предварительно получает кэш страниц в памяти и кэше HTTP, в отличие от традиционного предварительного получения, которое использует только кэш HTTP. Браузер ограничивает кэш памяти двумя предварительно полученными страницами, после чего более старые страницы удаляются. Etsy обнаружила, что установка пяти минут кэширования для страниц при обнаружении запроса предварительного получения помогает смягчить это ограничение. Возникли проблемы с элементами, такими как проигрыватели видео, которые использовали тень DOM, требующие обходных путей. Установка файлов cookie во время предварительного получения могла привести к вводящим в заблуждение аналитическим данным, но это можно избежать, используя определенные заголовки HTTP. Перенаправления не отрицательно повлияли на предварительное получение, пока были установлены правильные заголовки кэширования. Изменение атрибутов href при наведении курсора могло вызвать сбой предварительного получения и удаление других закэшированных страниц. Значительным препятствием было обеспечение точности аналитики, поскольку предварительно полученные страницы не обязательно просматриваются. Etsy решила эту проблему, регистрируя события только после активации страницы и избегая загрузки ресурсов и выполнения JavaScript во время предварительного получения. Реализация привела к заметным улучшениям производительности.
CdXz5zHNQW_zYShJSRIgI.jpeg