Розглянемо оптимізацію роботи шаблону на прикладі сайту casaeleganza.com - оптимізуємо головну сторінку.
Навіщо потрібна оптимізація:
При відображенні результатів пошуку Google враховує показники рейтингу та оптимізації магазину. Магазини з вищими показниками мають більші шанси надати у перших позиціях результатів пошуку.
Інструменти, які допоможуть зрозуміти напрями оптимізації:
На момент початку оптимізації Google PageSpeed Tool повідомив про рейтинг 72 для десктопної версії (мінімальний рівень - 80). Кількість файлів, що завантажуються - 162. Розмір сторінки - 3,2 Мб.
Особливості проведення оптимізації, які потрібно враховувати:
- Shopify працює за протоколом HTTP 1.1 - тому існує обмеження на кількість файлів, що одночасно завантажуються - це знижує швидкість відображення магазину.
- Не всі рекомендації Google PageSpeed можна виконати через обмеження платформи Shopify
- Перед початком оптимізації перевірте список встановлених програм та видаліть усі непотрібні програми
Пропозиції щодо оптимізації:
1. Використовуйте кеш-браузер.
Цим параметром не вдасться керувати – обмеження Shopify.
2. Видаліть код JavaScript та CSS, що блокує відображення верхньої частини сторінки
2.1. Оптимізація JS
Щоб скрипти не блокували завантаження контенту, потрібно перевірити виклик усіх скриптів і додати команду «defer». Команду async потрібно використовувати з розумінням особливостей роботи скриптів.
2.2. Оптимизация CSS
2.2. Оптимізація CSS
2.2.1. Потрібно максимально згрупувати різні файли CSS в один спільний файл (обмеження HTTP 1.1). Після проведення оптимізації залишилося 2 файли: один для попереднього завантаження та другий для постзавантаження сторінки.
2.2.2. Для постзавантаження CSS застосовується в тегу link команда preload і скрипт, який реалізує preload для несумісних браузерів..
2.2.3. Ідеальний варіант підготовки CSS для кожного типу сторінки (головна колекція, продукт, сторінка, блог). За рахунок цього вдасться скоротити швидкість відображення сторінки.
2.2.4. При відображенні головної сторінки використовувався Critical CSS варіант — коли всі необхідні для відображення головної сторінки CSS команди виділяються в окремий файл, а команди CSS, що залишилися, завантажуються через load CSS. Для створення скороченого файлу CSS використовується сервіс Critical Pass CSS Generator. Щоб підвищити рейтинг вміст файлу CriticalCSS, вбудовується в html сторінки.
3. Оптимізуйте завантаження видимого контенту
У моєму випадку слайдер займав більшу видиму частину. Але через механізм відкладеного завантаження на екрані було порожнє місце. Для вирішення цієї проблеми увімкнуло відображення першого зображення слайдера.
4. Оптимізуйте зображення
Google PageSpeed зазначив, що розмір деяких зображень можна зменшити на 30%. Звертайте увагу на типи файлів (зазвичай jpeg), їх розміри (до 2000 пікселів) та роздільну здатність (до 100 пікселів на дюйм). До цієї рекомендації необхідно підходити обережно, т.к. не завжди оптимізовані зображення виглядають якісно.
5. Скоротіть JavaScript
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.