Как получить 90+ баллов Core Web Vitals для магазина электронной торговли (пример из практики)

В этом посте вы узнаете, как набрать 90+ баллов в Google Core Web Vitals (настольном и мобильном) для магазина электронной коммерции, даже если вы используете много плагинов.

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

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

Например, онлайн-чат может загружаться сам по себе за 6-10 секунд. Загрузка базового отслеживания электронной почты с помощью Klaviyo может занять 1-2 секунды. Даже добавление пикселя Facebook может занять сотни миллисекунд.

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

На данный момент, согласно Searchmetrics, 96% сайтов, протестированных в США, не проходят оценку Google Core Web Vitals Assessment для настольных компьютеров, мобильных устройств или того и другого.

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

В этом посте я покажу вам точные шаги, которые я предпринял, чтобы достичь рейтинга Google Core Vitals более 90+ для моего семизначного веб-сайта интернет-магазина.

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

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

Нажмите сюда для того, чтобы скачать

Что такое Google Core Vitals?

Google Core Web Vitals - это набор факторов, которые Google включает в поисковый рейтинг для измерения качества взаимодействия с пользователем.

Google Core Vitals состоит из 3 компонентов.

• Самая большая Contentful Paint (Google требуется 2,5 секунды или меньше) - это измерение того, сколько времени требуется, чтобы увидеть самый большой фрагмент контента, отображаемый на вашем экране. По сути, это то, насколько быстро загружается ваш сайт.
• Задержка первого ввода (Google требует 100 миллисекунд или меньше) - это показатель отзывчивости и удобства использования вашей страницы. В частности, Google измеряет задержку между посетителем, нажимающим на интерактивную функцию, и тем, как быстро страница реагирует на этот щелчок.
• Накопительный сдвиг макета (Google требует 0,1 балла или меньше) - это показатель того, насколько стабильна ваша страница при загрузке. Ваш контент перемещается вверх и вниз по мере отображения страницы? Это единственный показатель Google Core Web Vital, который не имеет ничего общего со скоростью страницы. Кроме того, его труднее всего отлаживать, если вы не знаете, что делаете.

В оставшихся разделах этого поста будет ТОЧНО подробно описано, как я исправил эти 3 метрики для своего магазина электронной коммерции, чтобы набрать 90+ баллов Google Core Vitals как на настольных компьютерах, так и на мобильных устройствах.

Интернет-магазин, использованный для этого тематического исследования

Большинство владельцев магазинов электронной коммерции используют Shopify, WooCommerce, BigCommerce или Shift4Shop, и все эти стратегии применимы независимо от того, на какой платформе вы находитесь.

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

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

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

Вот плагины и сервисы, которые я использую в своем магазине для этого примера.

• Klaviyo - Моя платформа для электронного маркетинга
• Postscript - Моя маркетинговая платформа для SMS
• Vizury - мой провайдер push-уведомлений
• ManyChat - мой маркетинговый провайдер Facebook Messenger, который реализует мой чат в реальном времени.
• Gorgias - Моя программа обслуживания клиентов, которая обрабатывает всю корреспонденцию с клиентами.
• Всплывающее окно Spin To Win - мой основной лид-магнит для моего магазина
• Facebook Pixel - отслеживает все мои продажи через Facebook
• Google Analytics - отслеживает продажи моего веб-сайта
• Уведомить Slide Up - Обеспечивает социальное доказательство, отображая продажи по мере их поступления

Просто для удовольствия, вот как быстро мой сайт загружается БЕЗ каких-либо оптимизаций .

Вот как быстро он работает с оптимизациями, которые я собираюсь научить вас реализовывать.

Как исправить проблемы с большой объемной краской (LCP) и задержкой первого ввода (FID)

Низкие оценки LCP и FID вызваны низкой скоростью страницы . Если вы можете сделать свой веб-сайт быстрее, тогда ваши показатели LCP и FID исправятся сами собой.

В 99% интернет-магазинов проблемы с LCP и FID вызваны…

• Загрузка JavaScript и CSS, которые блокируют рендеринг - без какой-либо оптимизации файлы javascript и css загружаются последовательно, что может блокировать визуальный рендеринг вашей страницы. Лучший способ ускорить ваш javascript - это отложить загрузку кода или отложить рендеринг, чтобы он ничего не блокировал.
• Загрузка больших фотографий и / или видео. Чем больше и выше разрешение ваших изображений, тем дольше они загружаются. Вы никогда не должны загружать изображение большего размера, чем то, что отображается на вашем веб-сайте. Кроме того, вы никогда не должны загружать изображения, которые не видны на экране.
• Медленный сервер - медленный сервер не должен быть проблемой для полностью размещенных платформ, таких как Shopify, BigCommerce или Shift4Shop, но если вы используете WooCommerce, то переход на более быстрый хост, такой как WPEngine, может значительно ускорить ваш сайт.

На высоком уровне, если вы решите 3 проблемы, упомянутые выше, у вас будет молниеносный веб-сайт.

Как добиться скорости загрузки страницы в 1 секунду

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

В общем, вам следует сосредоточиться на 5 и применять 1 и 2 только в том случае, если у вас есть время или если вы супер анальный :)

Если вы хотите знать, как я достиг скорости загрузки страницы в 1 секунду , можете сразу перейти к большому количеству очков с рейтингом 5 :)!

Включить кеширование браузера (оценка 1 из 5)

Кэширование браузера сообщает браузеру клиента кэшировать изображения и другие элементы вашего веб-сайта на локальном компьютере пользователя, чтобы ускорить просмотр вашего веб-сайта ПОСЛЕ начальной загрузки страницы.

Кеширование браузера ВСЕГДА должно быть включено, но учтите, что кеширование браузера НЕ повлияет на работу Google Core Web Vitals . Google заботится только о том, как ваш сайт загружается из полностью холодного состояния.

Свернуть файлы CSS / JS (рейтинг 1 из 5)

Сведение к минимуму вашего CSS / JS удаляет все пустое пространство из ваших файлов CSS и javascript, чтобы сэкономить несколько байтов здесь и там.

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

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

Комбинируйте файлы HTML, CSS и JS (рейтинг 2 из 5)

Объединение файлов HTML, CSS и JS в меньшее количество файлов может повлиять на скорость вашей страницы, потому что ваш сервер должен получать меньше файлов.

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

Очистите свои перенаправления (рейтинг 2 из 5)

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

Например, когда я много лет назад перенес все свои страницы с http: // на https: //, я выполнил 301 редирект с определенных страниц и изображений на их безопасные копии в качестве быстрого решения.

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

Используйте более быстрый веб-хостинг (рейтинг 3 из 5)

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

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

Используйте CDN (рейтинг 2-3 из 5)

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

Если у вас есть клиенты по всему миру и ваш сайт сильно загружен изображениями , то использование CDN может существенно повлиять на скорость вашей страницы.

Но для небольших сайтов, таких как мой, которые в основном обслуживают Соединенные Штаты, использование CDN имеет лишь незначительное влияние на скорость страницы .

Предварительная загрузка изображений и сценариев большего размера (рейтинг 3 из 5)

Такие показатели, как «самая большая содержательная краска», измеряют скорость самого большого элемента на вашей странице. В результате имеет смысл «предварительно загружать» самые большие элементы на вашей странице, предоставляя подсказки в вашем HTML-коде.

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

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

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

Уменьшайте изображения (рейтинг 4 из 5)

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

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

Например, изображение продукта в моем магазине отображается в полном размере, размером 50%, размером 33% и размером 25% в зависимости от страницы.

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

Кроме того, вы должны сжать все ваши файлы JPG до максимального качества 50 в Photoshop (или любой другой программе обработки изображений, которую вы используете).

Сжимайте и кэшируйте свои страницы (рейтинг 4 из 5)

Если вы используете полностью размещенную платформу, такую ​​как Shopify, BigCommerce или Shift4Shop, ваши страницы, скорее всего, уже сжаты и полностью кэшированы, прежде чем они будут обслуживаться.

Но если вы используете платформу с открытым исходным кодом, такую ​​как WooCommerce , убедитесь, что вы используете такой плагин, как WP Rocket.

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

WP Rocket также сожмет вашу веб-страницу до 90% от ее размера.

Используйте меньше подключаемых модулей, загружающих внешний код (рейтинг 4 из 5)

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

На первый взгляд безобидные функции иногда могут значительно замедлить работу вашего сайта!

Например , добавление кнопки «Поделиться» в Facebook или кнопки «Pin it» на Pinterest может потенциально привести к загрузке нового фрагмента кода javascript из внешнего источника.

Для таких кнопок, как Twitter, Facebook или Pinterest, я всегда использую версии «без JavaScript» , для которых не требуется загружаемый извне код.

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

https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/

Ленивая загрузка изображений и кода Javascript (рейтинг 5 из 5) - самое важное!

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

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

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

Как отложить загрузку кода JavaScript и CSS

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

Но как можно безопасно загрузить код javascript на свой сайт?

Вот секрет, как я это делаю.

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

Например , если вы прямо сейчас зайдете в Bumblebee Linens, вы заметите, что мой веб-сайт загружается очень быстро (иногда менее чем за секунду).

Но если вы щелкнете по странице, переместите или прокрутите мышь , только тогда загрузится чат в реальном времени вместе с другими функциями «покупки» в моем магазине.

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

В результате моя страница загружается очень быстро, потому что я загружаю только графические элементы HTML / CSS своего сайта.

С точки зрения пользователя процесс покупок идеален, потому что каждая страница загружается молниеносно. Между тем, Google также видит страницу с быстрой загрузкой.

Как реализовать отложенную загрузку Javascript

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

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

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

Вот как понять, что действительно важно.

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

Согласно диаграмме выше, загрузка klaviyo_subscribe.js занимает 450 мс. Кроме того, klaviyo_subscribe.css занимает еще 420 мс.

Klaviyo - это мой инструмент электронного маркетинга, и я точно знаю, что Klaviyo НЕ влияет на отображение моего сайта.

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

Фактически, удаление кода Klaviyo сократит скорость моей страницы почти на целую секунду !

Используя GTMetrix, создайте список всего кода с медленной загрузкой, который не требуется для визуализации визуальных элементов вашего сайта, а затем отложите загрузку кода при возникновении ЛЮБОГО из следующих событий.

• Движение мыши
• Прокрутка страницы
• Сенсорный экран

Вот небольшой фрагмент кода, который иллюстрирует мою реализацию javascript.


function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}

// Массив событий DOM, который следует интерпретировать как
// активность пользователя.
var activityEvents = [
'mousedown', 'mousemove', 'keydown', 'scroll',
'touchstart'
];

window.onload = function () {
// добавляем эти события в документ.
// регистрируем функцию активности как параметр слушателя.
activityEvents.forEach (function (eventName) {
document.addEventListener (имя_события, активность, истина);
});
}

Как только вы реализуете этот шаг, вы сможете достичь скорости загрузки страницы менее 1 секунды на мобильных и настольных компьютерах!

Как исправить проблемы с кумулятивным сдвигом макета

90% проблем с кумулятивным сдвигом макета будет вызвано двумя следующими причинами.

Загрузка элементов без размеров

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

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

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

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

<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">

Динамическое добавление контента с помощью Javascript

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

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

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

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

Как решить более сложные проблемы CLS

Как упоминалось ранее, 90% ваших проблем с CLS можно решить, добавив размеры к вашим элементам. Но остальные 10% может быть ЧРЕЗВЫЧАЙНО сложно решить без использования определенного набора инструментов.

Что касается моих сайтов, мне буквально потребовалось 3 недели, чтобы исправить мои проблемы с CLS, потому что тест Google Page Speed ​​НЕ отражает оценки CLS, измеренные в полевых условиях.

Например, в моем блоге на MyWifeQuitHerJob.com были отличные оценки CLS в лабораторном тесте скорости страницы, но тест CLS в полевых условиях не прошел.

Если вы не понимаете, о чем я говорю, вот краткое описание Google Page Speed ​​Test.

Наивысший балл - это данные, полученные от реальных пользователей, использующих браузер Chrome. Нижний балл - это тестовый прогон в идеальных условиях .

Когда 2 балла не совпадают, это сложно исправить, потому что Google не сообщает вам, что не так . Фактически, вы можете получить идеальный результат по CLS в лабораторных условиях, но полностью потерпеть неудачу с CLS в полевых условиях.

Вот что Google НЕ говорит вам о CLS.

Тест скорости страницы измеряет ваш CLS в верхней части страницы только в идеальных условиях. В реальной жизни пользователь прокручивает вверх и вниз потенциально более медленное интернет-соединение.

Чтобы решить ваши проблемы с CLS, вы ДОЛЖНЫ имитировать медленное соединение и вести себя как настоящий пользователь!

Как подражать реальному пользователю, чтобы исправить CLS

Лучший способ сделать это - использовать встроенный отладчик Chrome.

Вот как шаг за шагом отлаживать проблемы с CLS .

Шаг 1. Откройте отладчик Chrome

Шаг 2. Уменьшите скорость вашей сети

На вкладке «Сеть» снизьте скорость страницы до «Медленный 3G». Это значительно снизит скорость загрузки страницы, чтобы вы могли легко обнаруживать сдвиги макета.

Шаг 3. Отрисовка областей сдвига макета

Перейдите на вкладку «Производительность» и убедитесь, что флажок «Области сдвига макета» установлен в разделе «Рендеринг».

Шаг 4. Обновите страницу

После настройки отладчика Chrome обновите страницу и прокрутите страницу вверх и вниз, как настоящий пользователь.

Убедитесь, что вы ищете выделенные синим цветом области , указывающие на сдвиг макета.

Шаг 5: проанализируйте график производительности

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

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

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

Самая сложная часть - это диагностировать проблемы с CLS, потому что тест Google Page Speed ​​учитывает только верхнюю часть страницы.

Вы можете достичь 90+ основных показателей эффективности в Интернете для магазина электронной торговли

Если вы будете следовать всем вышеперечисленным указаниям, вы сможете достичь скорости загрузки страницы менее 1 секунды и достичь рейтинга 90+ в Core Web Vitals как для мобильных, так и для настольных компьютеров.

В общем, вы всегда должны делать свой сайт как можно более простым и любой ценой избегать использования плагинов!

Спросите себя, действительно ли вам нужна определенная функция, ДО того, как вы ее реализуете . Затем поищите решения, которые не требуют добавления на ваш сайт дополнительного кода javascript .

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

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

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