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