Как я набрал 100 Google PageSpeed ​​Mobile Score на Woocommerce с WP Rocket

Вы стремитесь получить идеальную 100 в Google PageSpeed ​​Insights для мобильных устройств с вашим магазином WooCommerce?

В этой статье я покажу вам, как именно мы достигли этого с помощью Femme-Fatale.gr, красоты, который первоначально работал на Magento. В то время нагрузки на мобильную страницу заняли от 5 до 15 секунд, а сайт был кровоточащим продаж, несмотря на каталог из 35 000 продуктов с 500 категориями продукта и 450 атрибутов продукта.

Я Димитрис Вайенас, основатель Oxford Metadata. За последние три десятилетия я был одержим каждой миллисекундой веб -производительности. В начале 2022 года мой друг Никос Орфанос попросил меня помочь с его интернет -магазином, и мы приступили к работе.

После перехода на Woocommerce и полностью сосредоточившись на скорости - используя ракету WP в качестве нашего секретного оружия - мы разбили баллы мобильных страниц с последовательным результатом от 99 до 100/100. Что еще более важно, сайт перешел от застойного до дохода.

Продолжайте читать, и вы узнаете, как нам удалось получить такие результаты и как WP Rocket помогла нам достичь 95+ баллов, плюс последняя настройка, которая подтолкнула нас к идеальным 100. Что еще более важно, вы обнаружите, что влияние на бизнес, который последовал после того, как сайт начал загружаться всего за 300 миллисекунд.

Зачем сосредоточиться на производительности, особенно на мобильных

В Femme -Fatale.gr более 90% покупок происходит на мобильном телефоне. Это сделало мобильные показатели нашего главного приоритета с первого дня.

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

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

Как я люблю говорить: «Если ваш мобильный опыт не мгновенный, вы теряете реальные деньги с каждой дополнительной миллисекундой».

Поворотный момент: мигрирование из Magento в Woocommerce

В декабре 2021 года Никос обратился с явным испытанием. «Мой магазин достиг пика во время блокировки на 0,81 евро за сеанс. Затем продажи упали до 0,15 евро за сеанс. Можем ли мы вернуться к максимумам блокировки?»

Мы знали, что первым шагом было изменение платформ.

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

Мы пошли в прямом эфире в марте 2022 года, не изменяя данные о продукте или увеличивая маркетинговые расходы. Единственной разницей была скорость. Мы сокращаем загрузки страницы от 5 до 10 секунд до 1 до 2 секунд.

Это скриншот Gtmetrix, показывающий результаты времени загрузки до миграции с Magento: 5,8 секунды для домашней страницы и 7,9 секунды для категории, запечатленной, пока мы все еще разрабатывали новый веб -сайт.

С другой стороны, это текущая производительность, со всеми основными веществами в зеленых веществах:

Какова истинная ценность скорости для Woocommerce?

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

Перед миграцией Femme -Fatale.gr застряла в спектакле. На Magento ежемесячный оборот варьировался от 7000 до 10 000 евро с около 40 000 сеансов, в среднем от 0,15 до 0,20 евро за сеанс. Даже во время пика блокировки в 2020 году, когда трафик увеличился до 62 500 сеансов, лучшая производительность превысила 0,81 евро за сеанс.

К февралю 2022 года, незадолго до того, как мы перешли в Woocommerce, сайт немного улучшился до 0,29 евро за сеанс, но он все еще был далек от его потенциала.

Влияние более высокой производительности было немедленным. В марте 2022 года, в первый полный месяц после миграции, выручка за сессию удвоилась до 0,58 евро, несмотря на временное падение в сессиях, в то время как боты согревали кэши.

Прибыль на этом не остановился. К декабрю 2023 года мы сопоставляли пик блокировки 0,81 евро за сеанс. Сегодня это число поднялось еще выше: веб -сайт теперь зарабатывает 1,11 евро за сессию с 40 000 ежемесячных посещений.

Никос, владелец Femme -fatale.gr, выразил это лучше всего:

Собираясь и теперь превышая наш пик Covid, мы доказали, что скорость является самым большим рычагом в нашем бизнесе.

Фонд производительности каждый нужен сайт WooCommerce

До того, как WP Rocket могла обеспечить свой полной потенциал производительности, необходимо на месте прочную основу. Эти ранние решения оказали серьезное влияние на наши результаты, и это также то, что я настоятельно рекомендую всем, кто управляет магазином Woocommerce:

1. Выберите первую тему Performance: мы протестировали десятки тем, прежде чем остановиться на лучших вариантах. Botiga (на базирующейся в Гутенберге) от Athemes и Ray Theme (на основе Ementor) оба набрали 90+ в демонстрациях поставщиков. Что -нибудь ниже 70? Мы избежали этого.

2. Выберите действительно быстрый хост: мы используем Cloudways , поддержанные Linode, Vultr и DigitaloCean в ключевых европейских регионах, таких как Лондон, Франкфурт, Амстердам, Милан и Стокгольм. Он дает нам обновления PHP и базы данных в один клик, встроенный лак и REDIS, а также плавное обнаружение мобильных устройств. Это гарантирует, что Uncached API -вызовы всегда достигают оптимизированного контента. У нас было нулевое время простоя за три года, и их команда поддержки выдающаяся.
   
   В E -Commerce, близость к вашим клиентам не подлетайте: каждый запрос продукта, обновление корзины и проверка инвентаризации касается вашего происхождения. С покупателями в Афинах или на греческих островах, а также облачными путями, не имеющими локального узла, мы должны развернуть FastPath . Он сталкивается непосредственно со всеми крупными греческими операторами мобильных устройств и CloudFlare, предоставляя подразделением TTFBS подразделений и по -настоящему местным опытом.

3. Партнер с поддерживающими поставщиками: мы выбрали поставщиков, которые предлагают надежную и быструю поддержку, чтобы ответить на вопросы и устранение неполадок рядом с вами, от Athemes и Fibosearch до Welaunch , Pixel на ваш сайт , гравитационные формы , Aioseo и сама ракета WP .

4. Оптимизируйте ваш контент: мы преобразовали все изображения в WebP и организовали их в папки на основе даты, обеспечивая, чтобы каждая папка содержит менее 10 000 файлов. Для шрифтов мы самостоятельно отправили файлы WOFF2 и подмножались, чтобы включить только персонажей, которые нужны нашей аудитории. Это уменьшило размеры файлов шрифтов на 70-80 процентов. Обслуживание их локально и предварительная загрузка помогла устранить внешние поиски и избежать сменов макета.

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

Функции ракета WP, которые доставили нас до 99/100 на PageSpeed

После того, как фундамент был на месте, WP Rocket помогла нам повысить скорость и быстро достичь выдающихся результатов. Эти функции сыграли ключевую роль в том, чтобы привести нас к 95+ баллу на Google PageSpeed ​​на мобильном телефоне:

• Мобильный кеш и предварительная загрузка карты сайта: WP Rocket автоматически обнаруживает мобильные устройства и создает для них выделенный кеш. Это означает, что пользователи смартфонов всегда получают предварительно загруженный HTML -снимок. Предваритель на основе Sitemap также заполняет ваши страницы сразу после любой чистки кэша, которая удаляет задержку, которая часто происходит при первых посещениях.
  
• Минификация CSS и JS : WP Rocket выпускает пробелы и комментарии к уменьшению размеров файлов. Он также может объединить файлы JavaScript в один, уменьшая количество HTTP -запросов. Это особенно важно для мобильных пользователей в более медленных сетях.  
  
• Удалите неиспользованный CSS (RUCSS): В отличие от простого минимификации, RUCSS анализирует HTML ваших страниц и выпускает каждое правило CSS, которое никогда не используется на передней части. Эти деклаттеры стилей часто разрезают десятки килобитов, поэтому браузер быстрее сочетается с меньшим количеством байтов. Мы видели из первых рук, что позволило только RUCSS слить 200 кб с нашей полезной нагрузки на домашнюю страницу, что привело к более быстрому загрузке.
  
• Задержка выполнения JavaScript : сценарии, такие как аналитика, инструменты чата или сторонние виджеты, обычно не нужно работать сразу. WP Rocket задерживает их до тех пор, пока пользователь не прокручивает, постукивает или щелкнет. Это делает страницы интерактивным быстрее и улучшает взаимодействие со следующей краской и общей реакцией Пейджа на взаимодействие с пользователями.

После того, как мы включили эти функции, мы получили 99 мобильных PageSpeed ​​Performance:

Бонус: WP Rocket Addons для особых случаев

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

• Изменить параметры RUCSS: мы отрегулировали, как часто и как глубоко прогоны ракета WP удаляют неиспользованные CSS. Это было важно для совместимости с такими плагинами, как AutomateWoo, которые могут перегрузить планировщик задач.
• Деактивировать фрагменты тележки Woocommerce: Поскольку наша база данных уже была оптимизирована, мы отключили кэш-фрагмент WP Rocket, чтобы еще больше ускорить вызовы за кассе.
• Отключить использованные шрифты CSS Предварительная загрузка: мы использовали пользовательские самостоятельные шрифты WOFF2 с ручными правилами предварительной нагрузки. Это дополнение гарантировало, что эти правила не были переопределены автоматической нагрузкой WP Rocket.
• Удалить правила HTML истекает: наши CDN и сервер уже обрабатывали заголовки кэша, поэтому мы удалили правила HTML по умолчанию WP Rocket, чтобы избежать конфликтов.
• Установите планшеты как мобильные: мы обработали планшеты, такие как мобильные устройства, чтобы убедиться, что они выиграли от мобильной кэширования и адаптивной оптимизации. Это было важно для пользовательской функциональности, основанной на проверке wp_is_mobile ().

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

Секрет 100/100: совершенствование ленивой загрузки и это изображение LCP

Достигнув 99 в Google PageSpeed ​​Insights была большой вехой, но мы не были удовлетворены. Одна точка стояла между нами и совершенством.

Во -первых, мы решили вздутие элемента, что означает уменьшение количества элементов HTML на странице. Google наказывает страницы с более чем 810 элементами DOM, а наши меню, ползунки и нижний колонтитул подтолкнули нас к 1000.

Вот что мы сделали:

• Статическое содержание с ленивым нагрузкой : мы откладывали некритические элементы, такие как меню заголовка, ползунки категории продуктов, карусели для бренда и нижний колонтитул до начала первоначальной краски.

• Удаленные ненужные элементы : мы обрезали глубокие уровни меню и отключили неактивные области виджетов на мобильных устройствах. Это помогло нам получить общее количество DOM ниже порога штрафа Google.

Даже с более чистой страницей мы все еще не могли взломать 100. Последний выпуск был изображением героя.

Первоначально это было изображение 350 × 622 PX с наложениями, тенями и текстом - слишком сложным для быстрого загрузки. Мы упростили его до WEBP 350 × 350 PX и предварительно загрузили его с высоким приоритетом, используя следующий код:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

И именно так, упрощая и предварительно загрузив изображение героя, мы достигли идеальной оценки 100/100 фунтов на квадратный дюйм от мобильного.

Влияние на бизнес: скорость как двигатель роста

Как я объяснил, скорость не просто улучшила наш счет на странице. Это напрямую увеличило нашу прибыль.

После оптимизации производительности и использования ракетных функций WP мы увидели измеримые результаты в результатах:

• Коэффициент конверсии подскочил на 33%.

• Выручка за сеанс увеличилась более чем на пять раз , с 0,20 до 1,11 евро.

Эти результаты были переведены в дополнительные 384 000 евро в течение первых 18 месяцев после миграции .

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

Как мне нравится: «Каждый бриганный миллисекунд добавил настоящие евро в итоги».

3 практические советы для владельцев бизнеса

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

1. Отслеживайте реальных пользователей: используйте реальное мониторинг пользователя (RUM), чтобы следить за полевыми данными. Лабораторные оценки полезны, но что действительно имеет значение, так это то, как ваш сайт работает для реальных посетителей. Просто убедитесь, что отключите его при запуске тестов PageSpeed ​​Insight, чтобы избежать искаженных результатов.
2. Геолокатируйте свое происхождение: размещайте свой сайт рядом с вашими клиентами. Когда ваш сервер Origin находится рядом с вашей аудиторией, все от поиска продукта до проверки становится быстрее и надежнее.
3. Наклонитесь на WP Rocket: начните с настроек по умолчанию. Они автоматически решают большинство проблем с производительностью сразу. После того, как ваш базовый уровень будет прочной, вы можете точно настроить, включив некоторые дополнительные функции, например, для оптимизации файлов CSS и JS. И если вы не подкованные технологии, помните: «Более быстрые сайты означают меньше разочарования, больше продаж и более счастливых клиентов».

Завершая

Мы переехали из Magento в Woocommerce, подняли наш балл мобильной страницы с 55 до идеальных 100 и увеличили доход за сеанс с 0,20 до 1,11 евро. Это путешествие ясно доказало одну вещь: скорость - это больше, чем технический вех. Это настоящий драйвер роста бизнеса.

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