Как улучшить скорость загрузки интернет-магазина с помощью технологии AMP?

• Согласно данным Google Analytics, за период с 2019-ый по 2020 год мобильный трафик во всем мире вырос с 63% до 68% и еще продолжает расти. То есть большинство пользователей заходят на сайты с мобильных устройств.
• Более половины пользователей также используют свои мобильные телефоны для покупок товаров в Интернете (Datareportal, 2020).
• Согласно исследованию Delloite «Миллисекунды приносят миллионы» (Milliseconds Make Millions), уменьшение времени загрузки даже на 0,1 секунды может улучшить скорость продвижения пользователя по всей воронке продаж.

• По данным аналитической платформы kissmetrics,  65% пользователей готовы ждать загрузки сайта только до 20 секунд и всего 35% — от 20 и больше секунд, прежде чем покинуть страницу. Одна дополнительная секунда ожидания загрузки страницы снижает уровень конверсии на 7%*. 

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

Почему скорость загрузки сайта важна для Google?

Еще в 2010 году Google объявил скорость загрузки страниц фактором ранжирования, а с мая 2021-го вступают в силу Google Core Web Vitals, для которых высокая скорость играет ключевую роль в ранжировании. Поэтому улучшение скорости загрузки сайта — важная задача для SEO-продвижения в 2021 году. В нашей новой статье мы рассказали о технологии AMP как инструменте для решения проблем со скоростью загрузки мобильной версии сайта, ее возможностях, ограничениях и результатах внедрения.

Материал подготовлен на базе выступления Никиты Селиванова, руководителя группы SEO в pult.ru, на конференции Optimization-2020.

Как AMP-страницы помогают уменьшить время ожидания загрузки сайта? 

AMP (accelerated mobile pages) — формат мобильных страниц сайта, который позволяет быстрее загрузить и отобразить страницу. В материале рассматривается применение формата AMP для Google. Яндекс не поддерживает формат AMP, но имеет собственный аналогичный инструмент — режим Турбо. 

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

Кроме того, АМР-страницы сохраняются в кэше и загружаются прямо из него. Благодаря кэшированию и ограничениям в верстке мы и получаем более высокую скорость загрузки. После внедрения AMP у страницы в поисковой выдаче появляется иконка, а при клике на неё в мобильной версии Google пользователь видит адрес «https //www google ru/amp/s/названиестраницы».

Как внедрить формат АМР для интернет-магазина?

2. Подготовьте скрипты. На сайте интернет-магазина есть много элементов, которые подключаются с помощью внешних скриптов. В формате АМР внешние скрипты подключить нельзя, иначе код будет невалидным с точки зрения АМР-формата. Поэтому разработчики АМР создали готовые скрипты практически для любого элемента интернет-магазина, встроенные в формат АМР. О том, какие элементы можно сделать с помощью встроенных скриптов, можно узнать в инструкциях: меню hamburger, список с выпадающем меню (аккордеон), скролл к началу страницы, галерея изображений, попапы и лайтбоксы, скрытый текст, табы в карточке товара.

Мнение эксперта

Никита Селиванов, руководитель группы SEO в pult.ru:

Были некоторые элементы, которые не получилось внедрить в формат АМР, например добавление товара в корзину. Тогда я сделал кнопку добавления в корзину ссылкой, при клике на которую пользователь попадал на обычную (HTML) версию страницы этого товара с GET-параметром. Основной сайт на HTML настроили так, чтобы при добавлении GET-параметра с ID товара этот товар автоматически добавлялся в корзину.

3. Подключите микроразметку. Яндекс не работает с форматом страницы АМР и форматом микроразметки json-d, эти страницы поисковик читать не будет. Поэтому для микроразметки можно использовать формат json-d. Не забудьте проверить разметку через валидатор. Для помощи при создании микроразметки можно использовать мастер разметки Google и генератор разметки Schema.org.

4. Свяжите основные и АМР-страницы. Для корректной работы сайта нужно рассказать Google, что у обычной HTML-страницы есть альтернативная версия в формате АМР. Как это сделать: на все HTML-страницы добавьте тег link и укажите ссылку на аналогичные АМР-страницы, а на АМР-страницах укажите в теге link ссылку на страницы в HTML. Так вы свяжете страницы между собой, чтобы поисковик видел и основную, и альтернативную страницы. Подробнее о том, как это сделать, можно узнать в руководстве.

Кейс: как изменилась скорость загрузки после внедрения АМР?

Никита Селиванов поделился результатами внедрения формата АМР на сайте интернет-магазина pult.ru

• сразу после переиндексации АМР-версия страницы заняла место основной в поисковой выдаче и получила более высокие позиции;
• скорость загрузки стала в шесть раз выше, чем у аналогичных страниц в HTML;
• видимость страницы в Google Organic выросла на 4.4%;
• трафик в Google Organic вырос на 14%;
• конверсия в Google Organic просела на 0.02%.

Мнение эксперта

Никита Селиванов, руководитель группы SEO в pult.ru:

Еще раз напомню, что речь идет о поисковике Google и только о мобильной версии. На десктопные версии сайта АМР не влияет. Что касается результатов внедрения, не буду утверждать, что улучшение трафика, позиций и скорости загрузки заслуга только АМР. Это не волшебное средство, позволяющее выйти в топ и остаться там навсегда. Но это хороший инструмент, с помощью которого я смог улучшить скорость загрузки, трафик и получил достойные результаты.

Выводы