Оптимізація роботи шаблонів Shopify

Автор Aleksandr Tarasinsky, дата публікації 2021-05-16 20:08:22 +0300

Розглянемо оптимізацію роботи шаблону на прикладі сайту casaeleganza.com — оптимізуємо головну сторінку.

Навіщо потрібна оптимізація:

При відображенні результатів пошуку Google враховує показники рейтингу та оптимізації магазину. Магазини з більш високими показниками мають великі шанси надати в перших позиціях результатів пошуку.

Інструменти, які допоможуть зрозуміти напрямки оптимізації:

На момент початку оптимізації Google PageSpeed Tool повідомив про рейтинг 72 для десктопной версії (мінімальний рівень - 80). Кількість завантажуваних файлів - 162. Розмір сторінки - 3,2 Мб.

Особливості проведення оптимізації, які потрібно враховувати:

  1. Shopify працює по протоколу HTTP 1.1 - тому існує обмеження на кількість одночасно завантажуваних файлів - це знижує швидкість відображення магазину.
  2. Не всі рекомендації Google PageSpeed можливо виконати через обмеження платформи Shopify
  3. Перед початком оптимізації перевірте список встановлених додатків і видаліть всі непотрібні програми

Пропозиції щодо оптимізації:

1. Використовуйте кеш браузера

Цим параметром не вийде керувати - обмеження Shopify.

2. Видаліть код JavaScript і CSS, який блокує відображення верхньої частини сторінки

2.1. Оптимізація JS

Щоб скрипти не блокували завантаження контенту потрібно перевірити виклик всіх скриптів і додати команду «defer». Команду async потрібно використовувати з розумінням особливостей роботи скриптів.

Оптимізація JS для Shopify

2.2. Оптимізація CSS

2.2.1. Потрібно максимально згрупувати різні файли css в один загальний файл (обмеження HTTP 1.1). Після проведення оптимізації залишилося 2 файли: один для попереднього завантаження і другий для постзавантаження сторінки.

2.2.2. Для постзавантаження CSS застосовується в тезі link команда preload і скрипт, який реалізує preload для несумісних браузерів.

Оптимізація CSS для Shopify

2.2.3. Ідеальний варіант підготовки CSS для кожного типу сторінки (головна, колекція, продукт, сторінка, блог). За рахунок цього вийде скоротити швидкість відображення сторінки.

2.2.4. При відображенні головної сторінки використовувався Critical CSS варіант - коли всі необхідні для відображення головної сторінки CSS команди виділяються в окремий файл, а решта команди CSS завантажуються через load CSS. Для створення скороченого файлу CSS використовується сервіс Critical Pass CSS Generator. Щоб підвищити рейтинг вміст файлу CriticalCSS вбудовується в html сторінки.

Оптимізація CSS для Shopify

3. Оптимізуйте завантаження видимого контенту

У моєму випадку слайдер займав велику видиму частину. Але через механізм відкладеного завантаження на екрані було порожнє місце. Для вирішення цієї проблеми включив відображення першого зображення слайдера.

Оптимізація швидкості Shopify магазину

4. Оптимізуйте зображення

Google PageSpeed зазначив, що розмір деяких зображень можна скоротити на 30%. Звертайте увагу на типи файлів (зазвичай jpeg), їх розміри (до 2000 пікселів) і дозвіл (до 100 пікселів на дюйм). До цієї рекомендації потрібно підходити обережно, тому що не завжди оптимізовані зображення виглядають якісно.

5. Скоротіть JavaScript

Мініфікація JS для Shopify

5.1. Потрібно максимально згрупувати різні файли js в один загальний файл (обмеження HTTP 1.1).

5.2. При додаванні перевіряйте чи мінімізований вихідний текст скриптів і, при необхідності, мінімізуйте його за допомогою сервісу Minifier.Якщо скрипти включають вихідний код на Liquid, то від мінімізації потрібно відмовитися (або провести часткову мінімізацію).

6. Скоротіть CSS

При додаванні перевіряйте мінімізований чи вихідний текст css файлів і, при необхідності, мінімізуйте його за допомогою сервісу Minifier. Якщо css включають вихідний код на Liquid, то від мінімізації потрібно відмовитися (або провести часткову мінімізацію).

7. Увімкніть стиснення

Цим параметром не вийде керувати - обмеження Shopify

8. Скоротіть HTML

8.1. Мінімізуйте css-стилі і текст js за допомогою сервісу Minifier.

8.2. Видалити зайві прогалини в текст html. Проблема пов'язана з роботою команд мови liquid. Команди, які не виводять текст, формують порожній рядок в тексті html. Щоб цього уникнути, потрібно додавати дефіс спочатку і наприкінці команди.

Наприклад, {% comment %} буде виглядати так {%- comment -%}.

P.S. Для оптимізації швидкості завантаження мобільної версії сайту в Google створили технологію AMP, яка прискорює час завантаження магазину Shopify.

Потрібен інтернет-магазин, щоб почати продавати вже сьогодні?

Створити інтернет-магазин (14 днів безкоштовно, англійською мовою)!

Старт продажу