Сегодня быстрая загрузка веб-страниц является необходимым условием для любого сайта, который претендует на звание успешного и популярного среди пользователей мобильных устройств. К тому же скорость загрузки напрямую влияет на такие параметры, как показатель отказов в Google Analytics и конверсия.
Большинство интернет-пользователей считает, что скорость загрузки мобильных версий сайтов должна как минимум соответствовать параметрам загрузки десктопных аналогов. Согласно исследованиям, проведенным компанией Амазон, одна секунда задержки в процессе загрузки сайта может стоить этой компании более полутора миллиардов долларов.
Именно поэтому сегодня настолько актуальны ускоренные мобильные страницы. В среде разработчиков такие страницы принято называть AMP (аббревиатура от Accelerated Mobile Pages). AMP способны загружаться порядок быстрее, чем стандартные страницы. Иногда AMP обеспечивают увеличение скорости загрузки до 80%! И при этом подобное ускорение никак не отражается на функциональности сайта.
Единственный нюанс, который мешает повсеместному распространению AMP – сложность интеграции этой технологии в некоторые CMS. Однако разработчики, работающие на ВордПресс, с такими трудностями наверняка не столкнуться, ведь именно этот «движок» считается наилучшей тестовой площадкой для внедрения AMP.
Настройка этой технологии на ВордПресс состоит из 7 этапов.
Примечание. Эта инструкция предусматривает, что в процессе настройки ВордПресс разработчик уже активировал Yoast SEO. Если этот плагин не используется, разработчик может смело пропускать этапы, связанные с Yoast SEO. AMP можно интегрировать и без этого плагина. Но все-таки опытные веб-разработчики советуют использовать этот плагин ввиду того, что он способствует максимально эффективной оптимизации веб-ресурсов на ВордПресс.
Установка и активация AMP-плагинов
На первом этапе осуществляется установка плагина AMO от компании Automattic. Этот плагин считается основой любой AMP-страницы.
Этот плагин генерирует AMP версии постов. Для их просмотра достаточно вставить /amp/ в конец адресной строки.
Стоит сделать акцент на том, что при использовании данного плагина AMP-совместимыми становятся именно посты. Для того чтобы то же самое сделать со страницами, потребуется установка еще одного плагина, о котором будет рассказано ниже.
Этот плагин предусматривает возможность дополнения при помощи других плагинов, которые существенно расширять функциональность. Прежде всего, стоит обратить внимание на:
- AMP for WP. Этот плагин обеспечивает возможность интеграции с Google AdSense и создания AMP-содержимого, которое будет отличаться от контента стандартной мобильной версии сайта.
- Glue for Youst SEO. Этот плагин предназначен для создания AMP-совместимых страниц и медиконтента. Он также обеспечивает использование корректных мета-данных. Еще одним преимуществом стоит назвать возможность настройки оформления AMP-страниц.
Примечание. Стоит обратить внимание на то, что этот плагин будет работать только тогда, когда разработчик выполнил установку и активировал Yoast SEO.
Настройка Google Analytics
Для настройки Google Analytics, в первую очередь, необходимость узнать уникальный идентификатор отслеживания сайта. Это можно сделать путем выполнения следующих действий:
- Вход в аккаунт GA;
- Выбор вкладки Администратор.
- Выбор необходимого аккаунта в раскрывшемся меню Аккаунт.
- Выбор необходимого ресурса в соответствующем меню.
- Переход во вкладку Отслеживание, а затем Код отслеживания. Идентификатор находится в верхней части страницы и начинается с UA.
Далее необходимо скопировать найденный идентификатор и вернуться в ВордПресс. В панели администратора есть раздел AMP, а в нем подраздел Analytics. Скопированный ID необходимо вставить в поле Google Analytics. После этого остается только лишь сохранить внесенные изменения.
Настройка параметров плагина Glue
На следующем этапе необходимо изучить базовые конфигурации плагина Glue для Youst SEO. Данная информация будет актуальна только для тех разработчиков, которые установили этот плагин.
Представленные базовые конфигурации позволят не только выполнить настройку интерфейса AMP-страниц, но и включить поддержку AMP для всего используемого контента. Изучение доступных конфигураций необходимо начать с перехода в Yoast SEO, а затем в AMP. После этого нужно выбрать Post Types и указать типы постов, которые следует сделать AMP-совместимыми.
После этого следует перейти на вкладку Design. Там можно выполнить настройку интерфейса AMP-страниц:
- выбор стиля CSS;
- настройку цвета шрифта;
- загрузку иконки AMP и т.д.
Проверка настроек AMP
После создания URL в формате AMP, разработчик должен убедиться в корректной работе этих адресов. Если в процессе их создания были допущены какие-то неточности, Гугл не отобразит их в результатах поиска.
Для проверки URL в AMP-формате рекомендуется выбрать несколько страниц и протестировать их AMP-версии. Для этого, как говорилось выше, в конце адресной строки необходимо добавить /amp/. После этого нужно выполнить проверку одним из предложенных способов.
Проверка страниц AMP
- Нужно перейти на страницу https://search.google.com/test/amp.
- Далее следует указать необходимый адрес и нажать кнопку «Проверить». После этого разработчик узнает соответствует ли выбранная страница требованиям AMP.
Консоль разработчика в Google Chrome
- Необходимо открыть страницу в AMP-формате и вставить в конец адресной строки следующий текст: #development=1.
- Затем нужно открыть консоль разработчика в Хроме и выполнить проверку страниц на ошибки валидации. Если таких ошибок нет, валидация будет успешной
AMP Validator
- Нужно перейти на страницу https://validator.ampproject.org/.
- Там следует указать URL страницы в AMP-формате и нажать на кнопку Validate.
- После этого Валидатор найдет и отметит все имеющиеся ошибки.
Добавление AMP-страниц
- В случае применения инструмента «Проверка страниц AMP» существует возможность добавления страницы в Google сразу же после успешного завершения проверки.
- Пользователи, авторизованные в Search Console, также могут рассчитывать на быстрое добавление страницы в Google.
Стоит помнить, что Гугл выполняет индексацию AMP-страницы тогда, когда на нее будут указывать внутренние линки. Альтернативный вариант – она должна быть указана в XML-карте.
Проверка отчета по AMP
Search Console от Гугл позволяет разработчикам управлять доступными AMP-страницами из одного места. Для этого достаточно открыть отчет «Ускоренные мобильные страницы».
Здесь будет указано число проиндексированных AMP-страниц и выявленные ошибки.
Проверка скорости загрузки
На последнем этапе разработчик сможет оценить все преимущества AMP-страниц. Для этого достаточно выполнить проверку скорости загрузки обычных и ускоренных мобильных страниц. С этой целью обычно используется такой инструмент, как WebPageTest. После этого можно будет сравнить результаты и убедиться в эффективности технологии AMP.
В завершение стоит напомнить, что Гугл уже анонсировал запуск первого мобильного индексатора, благодаря которому в ранжировании мобильных страниц также будет учитываться скорость их загрузки. Поэтому интегрировать AMP стоит прямо сейчас. Данная инструкция позволит выполнить интеграцию AMP на ВордПресс-сайт максимально быстро и легко.