Автор оригинала: Todd Gardner.
Продуктовые магазины утомительно и потребляют время. В поисках более оптимизированного опыта я решил попробовать Instacart. К сожалению, используя их сайт Также утомительное и много времени.
Общие действия занимают слишком много
В видео вы увидите, что я пытаюсь посетить посадочную страницу моего местного продуктового магазина и, после этой нагрузки, сделайте поиск Йогурт Отказ
Над 25 секунд, чтобы выполнить одну нагрузку и поиск. Просто загрузка страницы Cub Foods “Storefront” заняла 14 секунды и 154 Запросы.
Сетевая статистика для загрузки одного витрина в Instacart.
На стороне плюса была очень хорошая графика заполнителя, которая настроила настроение, пока я ждал.
Когда это не ошибка JavaScript
Обычно, когда я смотрю на «современные» веб-сайты, основной производительностью виновника является JavaScript. Слишком много сценариев, делающих слишком много рендеринга. Пока Instacart делает Имейте слишком много JavaScript, у них есть большая проблема: Сервер Отказ
Начальная страница нагрузки медленная
Instacart использует некоторую комбинацию сервера и рендеринга клиента. С одной стороны, это здорово, что они не просто загружают пустую страницу с большой спиннер в середине и ждут 20 МБ JavaScript для загрузки.
С другой стороны, это заняло 3 секунды, чтобы вернуть скелет одноразового макета.
Три секунды для некоторых шаблонов заполнителя HTML немного долго.
Изображения для заполнения шаблона заполнителя заняли еще несколько секунд:
Если вы заметите первый сегмент URL после домена Cloudfront IS /156x/ Отказ Эти конечные точки вернут изображения пользовательских размеров, и этот первый сегмент является запрошенным размерами. Вы можете изменить этот сегмент в /300x/ Например, и вы получите большее изображение, которое поддерживает соотношение сторон (он будет шириной 300 пикселей тем, что бы высокая должна быть высота, чтобы сохранить соотношение). Вы также можете указать высоту, если вы хотите другой эффект:
Cool, но это почти несомненно, часть причина, по которой загружаются безразличные изображения настолько медленно. Происхождение за Cloudfront делает много работы, чтобы сделать пользовательское изображение и отправить его на провод по требованию.
На всей справедливости эти изображения имеют правильные заголовки ответа кэша, поэтому последующие нагрузки страницы будут иметь изображения, обслуживаемые из кеша памяти браузера. Но этот первый удар очень медленный.
API тоже медленно
Это не просто нагрузка страницы и изображения, которые медленно. Серверы, отвечающие на запросы API, также принимают свое время. Некоторые звонки для заполнения данных на странице воспользовались 5 Десятки!
Одна из конечных точек, показанных здесь, выбирает купонную информацию. В начальном загрузке видео вы можете увидеть, что раздел купона особенно медленно, чтобы рендер. Несмотря на то, что под ним есть контент, загруженный ниже сгиба, пользователь не имеет представления, поскольку заполнители все еще отображаются для раздела купона до тех пор, пока не возвращается вызов.
Защитники хороши, но более быстрые конечные точки лучше
Вот где модель гибридной рендеринга немного распадается. Есть много динамического контента, оказываемых нагрузкой на страницу. И поскольку API медленный, пользователь становится еще более заполненным.
Поскольку пользователь прокручивает страницу, появились вызовы API по требованию, сделанные для показать продукты из каждого продуктового отдела. Эти звонки могут взять на себя до 2 секунд каждый. И там много.
Для каждого мы получаем больше графики заполнителя, пока сервер не возвратит свой ответ:
Защитники делают хорошую работу по минимизации Jank или Кумулятивный макет Shift Но они плохие заменители фактического содержания. Как ни парадоксально я нахожу, что они также могут заставить сайт чувствовать себя медленнее, так как пользовательский интерфейс изменяется от пользователя так часто.
Может быть, Instacart не думает, что у него проблема с производительностью?
Есть немногие статьи на Инженерский инженерный блог Обсуждая внутреннюю техническую реализацию сайта. В обоих связанных статьях они обсуждают «улучшенную производительность» и существующие «здоровые характеристики» сайта. Возможно, главная проблема в том, что они не думают, что есть проблема с производительностью, чтобы исправить?
Большинство современных технических стеков способны служить страницы и API вызовы в подпорочном времени, если это цель компании. В этом случае я подозреваю, что они имеют ограниченные ресурсы и другие приоритеты. Может быть, все лучше в приложении телефона, но я думаю, что я буду придерживаться поездки в продуктовый магазин сейчас, это быстрее.