Как ускорить работу сайта на Magento: настройки и инструменты

2932
2

Скорость работы сайта - важнейший фактор в развитии интернет-магазина. По данным зарубежным исследованиям, если сайт загружается на 1 секунду медленнее от оптимального показателя 1,8 секунды, то его конверсия снижается более чем на 20%. Современный пользователь не будет ждать конца загрузки, а начнет искать альтернативу. Руководитель Perspective Studio Артур Потульный и Project Manager Евгений Губанков рассказывают, как увеличить скорость сайта. 

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

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

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

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

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

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

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

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

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

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

  • Если админ меняет какие-то данные на странице, например, цену товара, его наличие, то кэш будет удален и страницу нужно заново кэшировать.
  • У сервера есть ограниченные возможности по кэшированию. Чем у него больше вычислительная мощность, тем больше страниц может закэшировать. Мы работаем с модулем Cache Crawler. Как правило, мы ставим кэшировать 70 страниц за 5 минут. Если же поставим слишком высокую планку, то сервер просто не справится. И пользователи заметят задержки во время загрузки страниц.
  • Высокий трафик на сайте генерирует кэш быстрее модуля Cache Crawler. Когда пользователь загружает новую страницу, которая не находится в кэше, модуль FPC сохраняет скелет страницы и уже следующему пользователю сможет отдать закэшированную версию. В итоге количество страниц в кэше будет намного больше чем Crawler смог бы сам сделать за это время своими силами.
  • Есть страницы и блоки с динамическими (персональными) данными, которые нельзя кэшировать. Например, страница оформления заказа, блок с информацией о скидке для пользователя или с перечнем товаров, которые могут понравиться. Наполнение этих страниц и блоков зависит от пользователя, поэтому они не кэшируются. Мы советуем клиентам уменьшать количество динамических блоков.

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

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

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

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

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

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

  • HTML-код – формирует «скелет» страницы;
  • JS-код – делает HTML-разметку интерактивной;
  • CSS-код – отвечает за стили всех элементов (цвета, размеры и т.д.);
  • Картинки (фото товаров, иконки).

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

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

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

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

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

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

Выводы

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

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

Авторы: Артур Потульный, CEO Perspective Studio,

Евгений Губанков, Project Manager Perspective Studio

Оставить комментарий

Комментарии | 2

  • Я думаю вся загвоздка тормознутости магенто начинаеться изза зенд фреймворка
    Он сам по себе медленный и тормозит.
    Единственный + что благодаря мемкешу https://goo.gl/vzCmSB магенту способна выдерживать большие нагрузки

  • Совет из личного опыта. Я остановился на w.tools, как дополнение к хостингу и вообще для ускорения сайта. Снижение нагрузки будет многократной за счет кеширования динамики в их CDN, т.к. страницы уже не будут постоянно генерится ЦМСкой + файрвол отфильтрует ненужные запросы, что тоже даст положительный эффект.

Поиск