Рассмотрим оптимизацию работы шаблона на примере сайта 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.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.