Как быстро улучшить ваш магазин Magento в Google PageSpeed ​​Insights Score, не будучи разработчиком

Последнее обновление — 8 июля 2021 г.

Высокий балл Google PageSpeed ​​Insights стал чем-то вроде знака качества для магазинов Magento. И хотя и Google, и крупные команды по оптимизации Magento подчеркивают, что это не лучший инструмент для измерения оптимизации производительности, интернет-магазины по-прежнему полагаются на него, чтобы отслеживать, как работает их магазин с точки зрения скорости и надежности.

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

Исправление №1. Получите хороший CDN

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

• оптимизация мультимедиа (CDN знает, как уменьшить общий размер изображения без ущерба для качества),
• минимизация и сжатие статических ресурсов , таких как файлы CSS, JS и HTML (создание меньших ресурсов может определенно помочь в их более быстром обслуживании даже в медленных сетях),
• замените старые файлы JPEG на современный формат WebP для браузеров, которые его поддерживают (изображения загружаются быстрее и занимают меньше места),
• конвертировать изображения в прогрессивный формат (прогрессивные изображения загружаются иначе, чем обычные, предлагая пользователям ощущение более высокой производительности, хотя технически магазин загружается с той же скоростью),
• отложить загрузку ассетов (Magento в основном нужно отложить синтаксический анализ JavaScript ), чтобы ускорить доставку критичных ассетов,
• расставить приоритеты для протоколов HTTP/2 и QUIC для более быстрой и несинхронизированной загрузки файлов,
• тонкая настройка возраста кеша до оптимальных значений,
• предоставлять разные версии изображений разным пользователям (многоверсионность полезна, например, когда браузеру требуется изображение меньшего размера).

Установка и настройка CDN не требует особых технических знаний. Большую часть времени вы сможете справиться с задачей без особых трудностей. CDN — одно из лучших решений для повышения производительности интерфейса Magento. Его интеграция может значительно улучшить вашу оценку Google PageSpeed ​​из-за огромного количества полезных исправлений, которые он предлагает.

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

Исправление №2. Выберите подходящий хостинг Magento

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

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

Вот почему так важно, чтобы вы тщательно выбирали среду хостинга Magento и еще более тщательно – команду технической поддержки вашего провайдера. Это будут люди, которые помогут вам настроить среду и справиться с любыми потенциальными техническими трудностями, с которыми вы можете столкнуться.

Хороший хостер и мощный сервер приведут к заметному улучшению показателя Google PageSpeed. Чем мощнее сервер, тем больше проблем, связанных с узкими местами ЦП, он устранит, а ЦП является наиболее распространенным узким местом в интернет-магазинах Magento. Так что не сомневайтесь, нужен ли вам более мощный сервер — скорее всего, вам следует просто обновить его.

Наши рекомендации здесь: сделайте свое исследование. Читайте отзывы, спрашивайте, общайтесь с экспертами сообщества, сравнивайте предложения разных провайдеров, задавайте этим хостерам конкретные вопросы.

Исправление №3. Оптимизируйте настройки администратора Magento

Раздел администратора Magento часто упускается из виду, но это эффективный вектор оптимизации Magento. Одним из преимуществ оптимизации панели администратора Magento является то, что вам действительно не нужно делать чрезвычайно технические вещи. Просто следуйте простым инструкциям по изменению конкретных настроек в Magento.

Включить плоские каталоги. Это эффективное решение, когда у вас в магазине тысячи уникальных товаров. Плоские каталоги и товары меняют способ, которым Magento сохраняет атрибуты товаров в магазине. Вместо того, чтобы хранить их в отдельных таблицах базы данных, он создает плоскую структуру, которая помогает серверу получать значения атрибутов намного быстрее, чем раньше. Перейдите в « Магазины» > «Настройки» > «Конфигурация» > «Каталог» > «Витрина» и измените эти два параметра на « Да » .

Измените настройки JS. По какой-то причине настройки Magento JS по умолчанию не оптимальны. Но если вы серьезно относитесь к производительности Magento, мы рекомендуем вам перейти в «Магазины» > «Настройки» > «Конфигурация» > «Дополнительно» > «Разработчик» > «Настройки JavaScript» и изменить их, как показано ниже.

Изменить настройки CSS. Неоптимизированный CSS может серьезно повлиять на производительность, поэтому рекомендуется свести это влияние к минимуму. Перейдите в « Магазины» > «Конфигурация» > «Дополнительно» > «Разработчик» и измените на «ДА» параметры «Минифицировать и объединить CSS».

Изменить настройки HTML. Настройки HTML находятся в Stores > Configuration > Advanced > Developer > Template Settings . Включите минимизацию HTML, чтобы сэкономить данные и ускорить загрузку веб-страниц. Минимизированный код менее читаем, но гораздо более компактен, что является отличной функцией, когда вы беспокоитесь о производительности доставки.

Исправление бонуса. Включите эластичный поиск!

Поиск в магазине на самом деле не влияет на оценку Google PageSpeed ​​Insights, но, тем не менее, это то, что вы должны реализовать. Elasticsearch — это огромное улучшение пользовательского опыта, которое предлагает вашим клиентам огромные преимущества в плане качества жизни.

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

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

Перейдите в « Магазины» > «Настройки» > «Конфигурация» > «Каталог» > «Каталог» > «Поиск по каталогу» , чтобы включить Elasticsearch. Процесс установки более сложен, чем предыдущие 3 исправления, но он дает вам достаточно преимуществ, чтобы окупить потраченное время. После включения нужной версии Elasticsearch вам необходимо следовать этому руководству , чтобы полностью установить эту новую поисковую систему.

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

Получение идеального результата. Вам это вообще нужно?

Оценка Google PageSpeed ​​основана на десятках отдельных аудитов, которые оценивают скорость вашего магазина по стольким параметрам, что их даже сложно здесь перечислить. Что вам нужно понять, так это то, что оценка не имеет смысла, если вы гонитесь за ней в одиночку, не обращая внимания на пользовательский опыт и взаимодействие с пользователем. Это реальные показатели, которые вы хотите поднять.

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