Производительность Shopify и мобильный опыт
Быстрый магазин не просто заряжается быстрее. он быстрее реагирует на намерения клиентов.
Цель не в том, чтобы достичь изолированного идеального балла, а в том, чтобы улучшить загрузку, отзывчивость и стабильность фактически используемых страниц. начните с измерения, определите ответственного, а затем исправьте в соответствии с влиянием на бизнес.
Не путайте Shopify с тем, что было добавлено в Shopify
Платформа предоставляет хостинг, CDN и несколько оптимизаций. замедления часто происходят из темы, приложений, маркетинговых сценариев, медиа и настроек.
Одна партитура не рассказывает всей истории
Сравните реальные пользовательские данные, несколько типов страниц и лабораторные тесты. быстрая домашняя страница не компенсирует медленный лист продукта.
Три измерения, на которые следует обратить внимание
Измеряет, когда становится доступным видимый основной контент, часто большое изображение или заголовок.
Наблюдает за скоростью ответа после взаимодействия: меню, варианты, фильтры, корзина или кнопки.
Измеряет неожиданные движения контента во время загрузки.
Shopify агрегирует эти показатели в свои отчеты о веб-производительности на основе реальных данных, когда доступен достаточный объем.
6-этапный метод диагностики
Выберите важные страницы
Проверьте хотя бы приветствие, большую коллекцию, репрезентативный лист продукта, корзину и редакционную страницу.
Начните с мобильного
Соединения, процессоры и размеры экрана делают проблемы более заметными. используйте настоящий телефон, чтобы дополнить инструменты.
Читайте отчеты Shopify
Наблюдайте за основными веб-жизненными значениями, затронутыми типами страниц и событиями, соответствующими установке или изменению.
Сравните с PageSpeed Insights
Лабораторное тестирование помогает обнаружить блокировку ресурсов, тяжелые изображения, сценарии и чрезмерную работу браузера.
Изолировать причину
Проверьте копию темы, временно отключите блок приложения или сценарий, затем сравните до и после.
Мера после публикации
Фактические данные требуют времени, чтобы отразить изменения. документируйте дату, а также отслеживайте преобразование.
Самые экономичные оптимизации
Аудиторские заявки
Удалить функции без достаточного значения и проверить скрипты, которые остаются после удаления.
Осветлить основное изображение
Подавайте в подходящем размере, сохраняйте полезное качество и избегайте задержки изображения, составляющего основной контент.
Используйте отзывчивые изображения
Браузер должен загружать на мобильный телефон версию, удобную для экрана, а не гигантский файл рабочего стола.
Уменьшить JavaScript
По возможности предпочитайте HTML и CSS. Загружайте функции только на страницах, которые в них нуждаются.
Отложить несущественные сценарии
Не все чат, обзоры, карты, видео и маркетинговые инструменты должны блокировать первый дисплей.
Мастер шрифтов
Ограничьте семейства и жиры, предварительно загрузите только необходимые файлы или рассмотрите системный шрифт.
Размеры резерва
Установите ширину и высоту изображений, видео и виджетов, чтобы избежать скачков контента.
Разгребайте большие коллекции
Не загружайте сотни продуктов одновременно, когда достаточно нумерации страниц или контролируемой загрузки.
Очистите отслеживание маркетинга
Удалить неиспользуемые теги и проверить значение каждого загруженного инструмента через менеджер тегов.
Приоритет по воздействию
| Действие | Обычный приоритет | Почему |
|---|---|---|
| Удалить тяжелое и бесполезное приложение | Высокий | Может сократить JavaScript, запросы и работу браузера на нескольких страницах |
| Оптимизируйте мобильного героя | Высокий | Самый большой видимый элемент часто влияет на воспринимаемую нагрузку |
| Задержите видео ниже ватерлинии | Высокий | Избегайте немедленной загрузки невидимых носителей |
| Ограничить шрифты и жиры | Среднее | Сокращает количество загрузок и ускоряет отображение текста |
| Очистите повторяющийся жидкий код | Среднее | Может улучшить время рендеринга на сложных моделях |
| Получите несколько килобайт на маленькой иконке | Слабый | Ограниченное влияние, если основные сценарии и медиа остаются тяжелыми |
Изображения: настройки, которые действительно имеют значение
Делать
- Используйте фильтры изображений Shopify с несколькими ширинами
- Введите размеры, чтобы зарезервировать место
- Лениво загружаем медиа под экран
- Размещать ресурсы на CDN Shopify
- Тестовый мобильный урожай
Чтобы избежать
- Отправьте одно и то же изображение размером 3000 пикселей на все экраны
- Положите отложенную нагрузку на основной визуальный элемент без причины
- Используйте несколько тяжелых ползунков
- Загрузите автоматическое видео в высоком разрешении
- Умножайте невидимые изображения в каруселях
Сторонние приложения и сценарии: решать по значению
Определить функцию
Что он на самом деле производит: продажи, доверие, поддержка, данные или простое украшение?
Измерьте диапазон
Загружается ли скрипт на все страницы, когда он полезен только на продукте или корзине?
Поиск собственной функции
Тема или Shopify уже может предложить более легкое решение.
Испытание до/после
Сравните копию темы с блоком и без него, затем проверьте правильность данных и продаж.
Удалить чисто
После удаления проверьте наличие фрагментов кода, тегов и файлов, которые могут оставаться активными.
Документ
Сохраните владельца, цель и дату редактирования каждого внешнего сценария.
Технические оптимизации темы
Прогрессивный JavaScript
Основные функции, такие как обнаружение и покупка продукта, должны оставаться надежными. Используйте JavaScript для улучшения, а не для того, чтобы сделать всю страницу зависимой.
Неблокирующие скрипты
Адаптированные атрибуты и условная загрузка не позволяют файлам задерживать начальное построение страницы.
Эффективная жидкость
Избегайте повторных сложных вычислений в циклах и анализируйте медленные участки с помощью инструментов Shopify.
Целевая CSS
Уменьшите общие зависимости и избегайте загрузки стилей компонентов, отсутствующих на странице.
Критические ресурсы
Предварительно загрузите только основные ресурсы на первом экране. Слишком много предварительных нагрузок создают новую конкуренцию.
Инструменты управления
Проверка темы может обнаружить большие пакеты, удаленные ресурсы, блокировку JavaScript и некоторые зависимости CSS.
Чего не надо делать
Во что бы то ни стало набрать 100 баллов
Не удаляйте выгодную функцию для нескольких пунктов.Сравните техническую стоимость и коммерческую ценность.
Оптимизируйте только прием
Посетители часто приходят прямо на листе продукта, коллекции или товаре.
Установите приложение скорости без диагностики
Дополнительный уровень не всегда исправляет причину и может добавить JavaScript.
Лениво загружать весь контент
Первое важное зрелище должно появиться быстро. особенно полезна ленивая загрузка под видимой областью.
Удалить необходимое отслеживание
Сохраните инструменты, необходимые для заказов, назначения и соответствия требованиям, а затем оптимизируйте их загрузку.
Редактировать активную тему без копирования
Работайте над дубликатом, тестируйте курсы и сохраняйте восстанавливаемую версию.
7-дневный план действий
Часто задаваемые вопросы
На какой балл PageSpeed следует стремиться?
Не существует единого балла, гарантирующего хороший опыт. Прежде всего, стремитесь улучшить показатели, важные страницы и реальные данные, не удаляя полезных функций.
Shopify естественно медленный?
Shopify предоставляет оптимизированную инфраструктуру и CDN. Окончательная производительность во многом зависит от добавленной темы, мультимедиа, приложений и сценариев.
Все приложения тормозят работу магазина?
Нет. Их влияние варьируется в зависимости от их кода, загрузки страниц и функции. Оцените каждого индивидуально.
Нужно ли сжимать все изображения вручную?
Shopify выполняет преобразования и обслуживает изображения через свой CDN, но вам всегда следует запрашивать подходящие размеры и избегать излишне больших исходных файлов.
За какое время до того, как вы увидите улучшение?
Лабораторные тесты реагируют немедленно, а отчеты, основанные на реальных пользователях, требуют дальнейших посещений и могут показывать задержку.
Хорошая оптимизация снимает тормоза, не снимая значения
Сделайте свой магазин Shopify быстрее, стабильнее и приятнее на мобильных устройствах
Прежде чем вносить какие-либо изменения, проверьте свою тему, приложения, сценарии и медиафайлы.
