Задача. Если магазин построен вокруг видео на главной странице, всё решает то, как быстро этот первый экран появляется на телефоне. Владельцы всё равно просят видео, поэтому вопрос в том, как его сохранить и не расплачиваться за него временем загрузки.
Решение. Первый экран — картинка-заставка весом 30 КБ: браузер считает её основным содержимым и показывает сразу. Видео весом 286 КБ начинает загружаться только после загрузки страницы, встаёт на паузу, когда уходит за край экрана, и вообще не загружается, если браузер сообщает о режиме экономии трафика (Data Saver) или сети 2G либо покупатель попросил в настройках поменьше анимации.
Магазин. Страницы коллекций и товаров берут данные напрямую из Storefront API Shopify, размеры и цвета заданы как варианты товара. Кнопка добавления в корзину открывает боковую панель с позицией, количеством и суммой, а кнопка оформления заказа передаёт покупателя в демо-оформление Shopify. Тот же первый экран с заставкой работает и как секция темы Shopify.
Проверка. По рабочей ссылке Lighthouse на телефоне ставит 94 балла за скорость и по 100 за доступность и рекомендации (Best Practices), основное содержимое появляется за 2,4 с, а пока страница загружается, на ней ничего не сдвигается. Оценка SEO ниже намеренно: демо просит поисковики его не индексировать.
