Скорость работы сайта - важнейший фактор в развитии Интернет-магазина.

В E-commerce есть несколько ключевых факторов, которые влияют на принятие решение о покупке. И один из них - это скорость загрузки.
Согласно зарубежным исследованиям, если сайт загружается на 1 секунду медленнее оптимального показателя 1,8 секунды, то конверсия снижается более чем на 20%.
О чем это говорит? Ровно о том, что современный пользователь не будет ждать конца загрузки, а начнет искать альтернативу - другой магазин.

Вместе с тем, в своей практике мы неоднократно слышим мнение, якобы сайты на Magento работают медленно. Откуда ноги растут у этого «мифа» сложно представить. За 9 лет работы с платформой Magento мы создали эффективный путь, который в разы увеличивает скорость сайта. В этом материале вы получите понятные и простые технические инструменты.

Вначале мы предлагаем разделить оптимизацию на два этапа. Ведь любой веб-проект имеет две составляющие:

  • back-end — серверная сторона сайта,
  • front-end — пользовательский интерфейс.

Ниже рассмотрим каждый этап.

1.Работа с back-end

Скорость загрузки - это время с момента, как пользователь ввел запрос в адресной строке браузера и нажал Enter (или перешел по ссылке), до момента, когда страница полностью загрузилась. Сначала процессы происходят на бэкенде, и только потом данные отправляются в браузер - там страница догружается и прорисовывается. Задача бэкенда собрать то, что мы понимаем под страницей. А задача фронтенда – ее загрузить.

В работе с бэкендом используем два инструмента:

- кэширование

- оптимизацию процессов не в кэше

Итак, первое и самое результативное для увеличения скорости – кэширование. Эта функция позволяет бэкенду запомнить скелет страницы и не собирать его вновь при повторных запросах, а отдавать на фронтенд уже собранную страницу. Для понимания: в среднем без кэша бэкенд загружается 10 секунд, а с кэшом – пол секунды, а то и меньше. Если у вас правильно настроено кэширование, то скорость загрузки будет отличная.

Сохранить в кэш можно как целые страницы, так и отдельные HTML-блоки. Для запуска функции используем модуль Full Page Cache. Он отвечает за то, чтобы все страницы были в кэше. Ниже на рисунке четко видно, сколько времени потрачено на загрузку страницы не из кэша.  

При работе с кэшем важно учитывать и такие факторы:

- если админ меняет какие-то данные на странице, например, цену товара, его наличие, то кэш будет удален и страницу нужно заново кэшировать.

- у сервера есть ограниченные возможности по кэшированию. Чем у него больше вычислительная мощность, тем больше страниц может закэшировать. Мы работаем с модулем Cache Crawler. Как правило, мы ставим кэшировать 70 страниц за 50 минут. Если же поставим слишком высокую планку, то сервер просто не справится. И пользователи заметят задержки во время загрузки страниц.

- высокий трафик на сайте генерирует кэш быстрее модуля Cache Crawler. Когда пользователь загружает новую страницу, которая не находится в кэше, модуль FPC сохраняет скелет страницы и уже следующему пользователю сможет отдать закэшированную версию. В итоге количество страниц в кэше будет намного больше чем Crawler смог бы сам сделать за это время.

- есть страницы и блоки с динамическими (персональными) данными, которые нельзя кэшировать. Например, страница оформления заказа, блок с информацией о скидке для пользователя или с перечнем товаров, которые могут понравиться. Наполнение этих страниц и блоков зависит от пользователя, поэтому они не кэшируются. Мы советуем клиентам уменьшать количество динамических блоков.

Теперь разберем вторую часть работы с бэкендом – оптимизацию процессов не в кэше.

Для этого этапа используем AOE Profiler – модуль, который анализирует скорость загрузки бэкенда и всех его элементов. Эта информация позволяет точечно решать пропроблему.

Дополнительно в Magento есть опция Flat-каталог, которую в данном контексте можно отнести к инструментам по оптимизации. Что она дает? Информация о товаре хранится в отдельных таблицах. И когда пользователь запрашивает страницу товара, то сервер ищет все данные в нескольких таблицах. На это уходит время. Чтобы ускорить процесс, нужно в настройках сайта включить Flat-каталог. Он объединит все данные в одной таблице, где каждая строка содержит информацию о продукте или категории. Для получения всего одного продукта потребуется только один запрос.

2.Работа с front-end

После оптимизации процессов на бэкенде можем перейти к фронтенду. Для начала вспомним, из чего состоит сайт.

Любой веб-проект содержит огромное число файлов, которые заполнены тремя видами кода:

  1. HTML код – формирует «скелет» страницы
  2. JS код – делает HTML-разметку интерактивной/li>
  3. CSS код – отвечает за стили всех элементов (цвета, размеры и т.д.)/li>

Эти файлы мы оптимизируем по двум параметрам: по количеству и весу.

Чтобы сократить количество есть два основных инструмента:

  1. Объединение JavaScript и CSS файлов. Оно значительно сокращает время загрузки. Так как количество активных соединений (количество одновременно загружаемых файлов) в браузере ограничено, то получается быстрее загрузить один файл.
  2. Формирование CSS-спрайтов. Картинки группируются и загружаются как одна. Но этот инструмент можно использовать только к статическим картинкам интерфейса.

Чтобы уменьшить вес файлов используем:

  1. Минификацию.
    При сжатии файлов удаляются комментарии к коду, переносы строк и пробелы. В результате экономите до 20% от исходного размера файла.
  2. Компрессор картинок.
    Позволяет уменьшить вес картинок до 70%. Почему это важно? Только представьте, по статистике, картинки в среднем занимают 64% размера веб-страницы. Ваш сайт только выиграет после применения компрессора. Мы пользуемся Kraken, но есть и много других. Также существуют бесплатные утилиты на сервере, которые способны сжимать все картинки фронтенда.

Еще один лайфхак по работе с фронтендом - уделяйте внимание порядку загрузки файлов. Для бизнеса важно, чтобы пользователь как можно раньше начал видеть страницу сайта. Даже если она не полностью загрузилась, он уже готов рассматривать товар. Поэтому лучше, когда все "тяжелые файлы"  дозагружаются позже. А в первую очередь появляются товары. Мы часто используем в проектах плагин Lazy Load. Он загружает изображения только тогда, когда пользователь их просматривает, а остальные после прокрутки страницы вниз. Lazy Load значительно ускоряет работу с изображениями.

Выводы:

Оптимизация скорости сайта - многокомпонентный процесс. В нем важно учитывать как технические характеристики проекта, так и маркетинговые задачи. К примеру, ужимать вес изображений, но чтобы товар не потерял свой продающий вид, подключать сайт к CDN-сети, чтобы аудитория в других странах имела быстрый доступ.

Если ваш сайт отдается за 1,8 секунды, то будьте спокойны. Для Google - это значение, при котором сайт считается быстрым. А скорость, как мы знаем, учитывается при ранжировании сайта в поисковой выдаче. Но если дела идут иначе, то мы готовы вам помочь.