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

Для кого эта статья?

• Для SEO-специалистов и вебмастеров.
• Для руководителей отдела продвижения.
• Для владельцев интернет-магазинов.

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

• Согласно данным 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/названиестраницы».

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

1. Подготовьте верстку страниц. В первую очередь нужно подготовить верстку страниц сайта, делать это нужно вручную. Страница должна содержать обязательные атрибуты, подробнее о них можно узнать в руководстве. Для помощи при создании страниц удобно пользоваться генератором АМР. 

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

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

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

5. Отправьте страницы на переиндексацию. Переиндексация нужна для того, чтобы Google проанализировал обновления страниц и учёл их при  ранжировании. Как ускорить переиндексацию для всех многочисленных страниц сайта: добавьте в ответ в заголовке сервера Last Modified — с помощью этого заголовка можно показать браузеру, что страница недавно была изменена. Также можно в Sitemap актуализировать дату изменения и поставить высокий приоритет, чтобы поисковик увидел необходимость переиндексации.

6. Настройте канал трафика. После внедрения формата АМР в Google Analytics появится новый источник или канал трафика. Так происходит, потому что адрес отображается не с вашего сервера, а из кэша Google: если пользователь перешел из поисковой выдачи на АМР-версию страницы, а потом попал на основную страницу, то для Google это новый источник трафика. Транзакции, которые должны были попасть в канал Organic в Google Analytics, попадают в новый источник, и это можно исправить. Первый способ: добавить в Google Analytics фильтры, которые будут записывать трафик в Organic. Второй способ: связать визиты на АМР-версиях страниц и на основных страницах с помощью тега linker. Подробнее о втором способе — в руководстве.

7. Исправьте ошибки. Основными ошибками, из-за которых страницы АМР отображаются некорректно, являются неправильные форматы картинок, недопустимые атрибуты, неверные теги и т.д.

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

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

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

Выводы

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