Как я разгоняю интернет-магазины до сверхзвуковой скорости и вывожу в топ Google: 19 советов бэкендера

Не нам вам объяснять, что оптимизация сайта — это очень важно. От того, насколько качественно она настроена, зависит, понравится ли пользователю взаимодействовать с сайтом. Интернет-магазины с низкой производительностью и медленными страницами получат низкие коэффициенты конверсии в поисковой выдаче. В результате бизнес обгонят конкуренты.

В этой статье я хочу поделиться самыми действенными, на мой взгляд, методами оптимизации сайтов, разработанных на Magento CMS, и ускорения работы интернет-магазинов.

Эта тема заинтересует как начинающих, так и более опытных разработчиков, перед которыми стоит задача оптимизировать работу интернет-магазина на Magento 2. Начнем!

Проверьте все установленные сторонние модули

Оптимизацию любого сайта нужно начинать с полного аудита и тестирования и только потом переходить к технической части — оптимизации на бэкенде и на фронтенде.

В основном коде Magento 2 не так много возможностей для улучшения. Но обычно это не относится к модулям, которые вы можете купить или загрузить бесплатно. Некоторые из них действительно могут замедлить работу сайта.

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

Проверьте ресурсы хостинга или сервера

К сожалению, из-за сложной архитектуры и особых требований Magento 2, вы не можете себе позволить быстрый магазин на недорогом VPS, иначе он просто не выдержит нагрузки, и вы не сможете получить заказы от своих потенциальных покупателей. В таком случае нужно обратить внимание на производительные сервера — с запасом памяти и серверных ресурсов. Также можно рассмотреть серверы на AWS, которые имеют гибкие настройки и позволяют «скейлить» ресурсы сервера.

Включите кэширование

Очень распространенная проблема, когда на сайтах Magento 2 отключено кэширование, а как только его включаешь, ресурс начинает просто летать. Но бывает и так, что тормозят лишь некоторые страницы, на которых отключено кэширование.

Включите кэширование

В чем могут быть причины отключения кэша? Их много: начиная от банального «забыли включить» и заканчивая тем, что разработчики отключили кэширование для какого-то блока в лейауте. И это повлекло за собой отключение кэша всей страницы. Если у вас есть возможность, то вместо стандартного Full Page Cache лучше настроить Varnish Cache.

Как работает Varnish Cache?

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

Кэш хранится в оперативной памяти, за счет чего в ответ пользователю прилетает за 100-200 мс.

Благодаря встроенному инструменту — health check (проверка с заданными интервалами, работает ли бэкенд — прим.) — кэшированное содержимое может продолжать возвращаться пользователям, даже если Magento-сайт не работает. Также этот инструмент может использоваться при работе с несколькими бэкендами. Varnish может балансировать нагрузку между разными серверами, при этом исключая нерабочие.

Настройте Redis

Redis — быстрое хранилище в памяти с открытым исходным кодом для структур данных «ключ-значение». Операции чтения и записи Redis выполняются очень быстро. Их резервные копии могут храниться на диске или быть записаны обратно в оперативку. Поскольку Redis хранит свои данные в памяти, он чаще всего используется в качестве кэша.

Magento 2 поставляется с поддержкой Redis «из коробки», и мы можем использовать его для кэширования данных, страниц и хранения сессий.

Записи кэша Magento 2 организованы в группы: конфиги, лейауты, блоки HTML и так далее. Если вы занимаетесь оптимизацией интернет-магазина с большим количеством товаров, то и кэш сайта будет огромным. Именно поэтому рекомендуем использовать Redis в качестве серверного кэширования, в этом есть свои преимущества:

• Скорость работы. Он может выполнять 110000 операций SET в секунду и 81000 операций GET в секунду.
• Поддерживает большинство расширенных типов данных, включая список, набор, отсортированный набор и хэши. Это дает вам большую гибкость.
• Атомарные операции (или выполняются полностью, или не выполняется совсем — прим.). Это гарантирует, что если два клиента обращаются к данным одновременно, сервер Redis получит обновленное значение.
• Универсальное использование. Redis подходит для кэширования очередей обмена сообщениями и краткосрочных данных (например, сеансов веб-приложений).
Курс UX/UI дизайнер сайтів і застосунків з Alice K.
Курс від практикуючої UI/UX дизайнерки, після якого ви знатимете все про UI/UX дизайн .
Реєстрація на курс
• Redis легко установить и настроить. Его можно установить из репозитория, но если нужна самая последняя версия, скачиваете архив с официального сайта, компилируете (процесс максимально прост) и запускаете.

Оптимизируйте окружение

При оценке загрузки сайта используется такой параметр, как TTFB (Time To First Byte) — время до получения первого байта страницы сайта или же время ответа сервера. Зачастую этот показатель может быть большим, поэтому необходимо проверять серверную составляющую сайта.

Оптимизация окружения

Первое, на что необходимо обратить внимание — база данных. При формировании страниц сервер каждый раз обращается к базе данных, чтобы получить определенную информацию. Например, при формировании блока «С этим товаром также покупают» выполняются такие запросы:

• определить текущий товар;
• определить количество добавлений текущего товара в корзину;
• найти товар, который добавлялся вместе с текущим продуктом в корзину;
• исключить незавершенные заказы;
• сформировать список наиболее часто покупаемых товаров вместе с представленным.

Чем больше товаров и совершенных заказов на сайте, тем больше времени нужно на формирование ответа. Чтобы уменьшить количество запросов к базе данных, можно хранить уже сформированный ответ в кэше. Так вместо пяти запросов будет выполнен всего один.

Чтобы уменьшить количество запросов к базе данных, можно хранить уже сформированный ответ в кэше

Если у вас есть большие и тяжелые запросы к базе данных, в таком случае проверьте структуру самой базы данных и где нужно — добавьте индексы и оптимизируйте запросы. Также стоит проверить версию PHP. На данный момент уже вышла версия PHP 8, которая обладает большей производительностью, чем предыдущая. Обязательно проверьте совместимость вашего сайта с новыми стабильными версиями PHP и после этого обновитесь.

Кроме обновления PHP, также лучше подключить OPCache на проде и на стейджинге вашего сайта.

OPCache — это мощное расширение PHP, которое используют для повышения производительности PHP за счет хранения байт-кода предварительно скомпилированного скрипта в оперативной памяти.

Таким образом PHP не нужно загружать и анализировать скрипты при каждом запросе. Это ускорит работу вашего Magento-сайта и сэкономит ресурсы сервера.

Использование профайлера

Для работы над оптимизацией кода можно использовать профайлер. У Magento 2 он уже встроен, но для большего удобства можно использовать Debug module.

Включите GZIP-сжатие

При открытии страницы браузер загружает файлы с разным расширением. Чем больше размер таких файлов, тем дольше грузится контент. В таком случае может помочь включение сжатия GZIP на стороне сервера. Этот тип сжатия поддерживают все современные браузеры.

Включение GZIP-сжатия

GZIP помогает архивировать исключительно текстовую информацию. В то время как видео, изображения, аудио и прочие медиафайлы не меняются. Текстовая информация на сервере сжимается, и уже в таком виде браузер получает данные и распаковывает их.

Включение GZIP-сжатия:

• помогает снизить размер веб-страниц, что отражается на времени занятости ресурса;
Онлайн курс UI/UX Design Pro від Ithillel.
Навчіться проєктувати інтерфейси з урахуванням поведінки користувачів, розв'язувати їх проблеми через Customer Journey Mapping, створювати дизайн-системи і проводити дослідження юзабіліті, включаючи проєктування мобільних додатків для Android та iOS і розробку UX/UI на основі даних!
Дізнатися більше
• ускоряет процесс передачи данных клиенту;
• помогает улучшить время до первого рендеринга страниц.

Проверьте редиректы

Также проверьте редиректы, которые есть на сайте. Каждый редирект — это дополнительный запрос между браузером и сервером, который увеличивает время задержки отображения страницы и расходует ресурсы сервера.

Проверьте редиректы

Общее время, затраченное в этом цикле, называется временем приема-передачи (RTT — round-trip time).

Редирект целевой страницы можно определить как наличие нескольких редиректов с URL-адреса на конечную целевую страницу.

Например перенаправление abc.com >> https://abc.com >> https://www.abc.com. В таком случае также нужно проверить, нет ли редиректов для статических файлов.

Поработайте с изображениями

Оптимизация изображений на сайте всегда дает один из самых больших приростов показателей в Google PageSpeed. Первое, что нужно сделать с изображениями — проверить их форматы и сжать.

Изображения лучше сжать

Часто вместо стандартного JPEG для картинок используется PNG. Так файлы весят намного больше.

Если мы их сначала конвертируем в правильный формат и затем сожмем, итоговый размер может быть меньше в разы, а то и в десятки раз.

Кроме того, современные браузеры (даже Safari, начиная с 14-й версии) уже поддерживают новый формат изображений — WebP. По сравнению с JPEG и PNG, он обеспечивает наилучшее сжатие с меньшими потерями качества. WebP весит на 25–35% меньше, чем JPEG аналогичного качества.

Используйте атрибут srcset

Атрибут srcset дает браузеру набор графических ресурсов, из которых он может выбирать самый подходящий. Здесь же находятся сведения о размере каждого изображения. В атрибуте src содержится резервный вариант изображения, предназначенный для браузеров, не понимающих атрибута srcset.

В srcset находятся URL изображений и сведения об их ширине. Браузер выберет из предоставленного ему набора картинок то, что подходит лучше всего. Если у пользователя дисплей с повышенной плотностью пикселей (Retina-дисплей), браузер учтет это при выборе изображения.

Использование атрибута srcset

Атрибут srcset содержит список URL изображений, за которыми следуют сведения об их ширине. Пары URL-ширина разделены запятыми. Элементы списка выглядят примерно так: image.jpg 1000w.

Такая запись сообщает браузеру, что ширина изображения image.jpg — 1000 пикселей.

Не стесняйтесь Lazy loading

Это метод оптимизации скорости загрузки медиафайлов, некритичных для отображения страницы или взаимодействия с пользователями. При отложенной загрузке изображения не будут загружаться, пока не понадобятся посетителю.

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

Lazy loading

Обратитесь к font-display

Есть такое интересное CSS-свойство для шрифтов, как font-display, а именно — его параметр swap. Не дожидаясь подгрузки вашего красивого и тяжелого шрифта, он показывает текст в браузере, используя встроенный в этот же браузер шрифт. В таком случае обязательно надо прописывать дефолтный или fallback-шрифт.

CSS-свойство для шрифтов font-display

После всех проделанных манипуляций может появиться эффект «дерганья» текста на доли секунды при загрузке страницы (особенно после очистки кэша). Чтобы минимизировать этот нюанс, сделайте предзагрузку для всех используемых шрифтов. Для этого указываем мета-тег в <head> c параметром preload.

Сравнение загрузки шрифтов с разными значениями font-display можете увидеть здесь:

Сравнение загрузки шрифтов

Используйте критический CSS

На каждом сайте — много стилей, которые браузер сразу начинает подгружать. Если файл стилей (или несколько файлов) большой или медленное соединение, запрос может значительно увеличить время отрисовки страницы. В таком случае поможет критический CSS. Это набор CSS-правил только для того контента, который находится «над сгибом».

То есть это то, что пользователь видит в первую очередь при загрузке страницы. Критический CSS можно прописать инлайново внутри <head> в HTML-документе. Это позволит избежать дополнительного запроса к серверу для получения этих стилей. Остальной CSS может быть загружен асинхронно.

Critical CSS

Как создать критический CSS? Существует множество автоматических инструментов, которые позволяют это сделать. Но в большинстве случаев при их использовании получаются «кривые» стили.

При разработке новых сайтов мы стараемся делать структуру стилей по компонентам — отдельно для header, footer и так далее. Так получается сгенерировать критический CSS при помощи уже готовых стилей без их дублирования. Если же у нас задача добавить критический CSS на запущенный сайт (допустим, пришел запрос от клиента на оптимизацию), то сначала смотрим на структуру CSS. Если там нет модульности, тогда уже вручную генерируем критические стили и правим их. Здесь могут помочь как различные npm-пакеты, так и расширение в Chrome — CSS Used.

Инструменты для создания Critical CSS

Обратите внимание на CDN

Content Delivery Network — географически распределенная группа серверов, позволяющая оптимизировать доставку и дистрибуцию содержимого пользователям.

Использование CDN помогает быстрее доставлять статические файлы пользователю (изображения, стили, скрипты и шрифты).

Использование CDN

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

CDN нужны в первую очередь проектам с большой аудиторией в разных регионах или странах. И тут преимущества понятны: снижение задержек, быстрая раздача контента и повышение уровня удобства, и, как следствие, больше довольных пользователей.

Включите production mode

Magento 2 имеет три режима работы: default, developer и production. Самый быстрый — production. Остальные режимы пригодятся для отладки и никогда не должны использоваться для работающего сайта.

Включите production mode

Никогда не используйте JS Bundling

Объединение JS — это особенность Magento 2. Предполагается, что он сокращает количество HTTP-запросов, которые нужны для загрузки страницы, путем группирования файлов JavaScript.

Считается, что это хорошо для производительности, но на самом деле нет. Если вы активируете объединение JS, он создаст несколько файлов со всем кодом JavaScript, которые в сумме будут весить 5–10 МБ. И это замедлит время загрузки страницы.

Никогда не используйте JS Bundling

Но что же делать, если мы хотим и объединить JS-файлы и одновременно улучшить производительность сайта? Примените Advanced JavaScript Bundling!

Примените Advanced Javascript Bundling

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

Advanced JavaScript Bundling помогает решить эту задачу, сформировав бандлы по типам страниц. Например, общий бандл для JavaScript-файлов, который нужен на каждой странице, и отдельные бандлы для чекаута, категории, продуктовой страницы, CMS-страниц.

Advanced Javascript Bundling

Включите минификацию CSS/JS

Это еще одна особая функция Magento 2, которая отсутствовала в первой версии. Теперь вы можете минимизировать файлы JS/CSS без необходимости использования сторонних расширений. Важный момент: эти настройки работают только в production mode.

Включите минификацию CSS/JS

Оптимизируйте загрузку JS

Кроме минификации JS-файлов, нужно также правильно их подключить на сайте. При загрузке ресурса не стоит подключать сразу же весь JS-код, а только критически важные части. Например, загрузку аналитики можно отложить. А чтобы уменьшить количество запросов, несколько JS-файлов объединить в один бандл-файл.

Подключение скриптов лучше перенести с head в footer сайта и добавить атрибут async или defer. При обычном подключении скриптов парсинг HTML останавливается, как только браузер видит тег <script>. Затем скрипт загружается и исполняется, и только потом продолжается парсинг. Зачастую это нежелательное поведение, так как скриптов может быть много, и сайт просто будет долго грузиться. Именно для этого лучше использовать атрибуты async или defer.

Загрузка JS

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

Если массивная библиотека используется только для небольшого функционала и ее можно заменить на свой код, лучше так и сделать.

Вывод

Популярность интернет-магазинов выросла на фоне пандемии в 2020 году. Из-за этого многие бизнесы массово перешли в онлайн и нагрузка на их интернет-магазины возросла. Именно поэтому запрос на оптимизацию есть и будет самым востребованным от владельцев маркетплейсов. Согласитесь, никому не нравится медленный интернет-магазин, в котором время отклика от «Добавить продукт в корзину» до оплаты в чекауте слишком долгое.

Эти методы позволят «разогнать» ваш сайт на Magento 2 до сверхзвуковой скорости, увеличить показатели в Google PageSpeed, повысить сайт в поисковой выдаче и позитивно повлиять на UX. Пользуйтесь!