NOURISHED NATURAL HEALTH

Робота над продуктивністю живого магазину на Shopify з одним правилом від бренду: жодних змін у дизайні. Рухалися сторінка за сторінкою, починаючи з головної, і пройшли зображення, відео, код та сторонні скрипти.

Зображення магазину стиснули, важку SVG-графіку перевели в легші файли, а відео зменшили. Зображення нижче першого екрана перевели на ліниве завантаження, картинки меню вантажаться одразу, а відео замість автозапуску стартують за натисканням.

Стилі й скрипти мініфікували, ключові шрифти та стилі підвантажуються заздалегідь, а другорядні скрипти перейшли на асинхронне завантаження й більше не затримують перший екран. Ліниве завантаження також увімкнули в конструкторі GemPages для лендингів.

Усі сторонні скрипти, що вантажилися на кожній сторінці, склали в список і перевірили разом із командою бренду. Залишки коду від застосунків, якими вже не користувалися, як-от старого конструктора сторінок і трекінг-пікселя, прибрали, а потрібні інструменти лишили.

Зміни були спрямовані на Core Web Vitals — показники швидкості завантаження, відгуку та стабільності макета, які враховує Google. Прогрес вимірювали в GTmetrix по ходу роботи, а після кожного робочого дня команда отримувала письмовий звіт.