Использование Google AMP для ускорения загрузки мобильных страниц вашего сайта WordPress

Почему скорость страницы имеет значение

Если вы, как и миллиарды из нас, недавно просматривали веб-контент на мобильном устройстве, вы заметили, что опыт может быть улучшен. Чтение новостных статей часто мучительно медленное , страницы долго загружаются. Даже после того, как текст загружается на страницу, страницы продолжают загружаться в течение многих секунд, поскольку загружаются реклама, отслеживание javascript и изображения.
Мобильные приложения приучили нас к быстрой загрузке контента , просмотру в автономном режиме и быстрому интерфейсу. Но мобильные сайты часто буквально отстают. Это особенно верно для сайтов новостей и блогов, которые используют множество виджетов для рекламы, аналитики, обмена и комментирования. Вы можете легко проверить это, установив блокировщик контента на устройство iOS и заметив увеличение скорости.
Конечно, вы можете использовать адаптивную тему для решения некоторых проблем, но адаптивный дизайн не влияет на скорость загрузки страницы. В большинстве случаев адаптивность лежит в основе проблемы : мы разрабатываем веб-сайты, которые подходят для дисплеев с разными разрешениями, и нам не удается создать интерфейс, оптимизированный для самых маленьких дисплеев, более низкой производительности процессора и самых медленных соединений. При адаптивном дизайне все десктопные ресурсы и функции будут по-прежнему загружаться при отображении страницы на мобильных устройствах, что часто приводит к снижению производительности. По данным Facebook, среднее время загрузки новостной статьи на мобильном телефоне составляет 8 секунд.
В то время как некоторым из нас посчастливилось иметь сетевые подключения 3G или 4G на наших смартфонах, вам просто нужно выбраться из городских центров, чтобы скорость сети резко упала. И, конечно же, есть «следующий миллиард» людей и устройств, подключающихся из развивающихся стран, где быстрые сетевые подключения еще не доступны.
К счастью, дела идут в правильном направлении, и все крупные игроки работают над тем, чтобы ускорить загрузку контента на мобильных устройствах. Facebook запустил Instant Articles, решение для быстрой загрузки веб-контента, хотя и ограниченное их огороженным садом. Apple запустила собственное новостное приложение. Google запустил AMP (Accelerated Mobile Pages) — инициативу с той же целью, что и у Facebook, но с открытым стандартным подходом.
Недавно WordPress объявила о добавлении поддержки Google Accelerated Mobile Pages (AMP) на сайты WordPress.com и WordPress.org в виде бесплатного плагина.
Итак, давайте посмотрим, как вы можете добавить AMP в свой блог или новостной сайт WordPress.org и воспользоваться новейшими технологиями для ускорения работы вашего сайта на мобильных устройствах.

Что такое Google AMP?

Обещание Google AMP заключается в том, чтобы ваши страницы мгновенно загружались на мобильных устройствах. Он исправляет одну из последних оставшихся проблем с мобильным интернетом. Несмотря на то, что все его используют, мобильный интернет на удивление медленный. AMP обходит это, ограничивая числовые функции на странице, удаляя функции дизайна для скорости. Google утверждает, что скорость загрузки AMP на 85 процентов выше, чем у обычных веб-страниц.
AMP создает специальное мобильное представление для вашего сайта. Этот новый мобильный сайт улучшает ваш контент для поддерживаемых клиентов, таких как мобильный поиск Google и Chrome. Это новое представление является дополнением к уже имеющимся у вас обычным и мобильным веб-сайтам. В этом представлении ваши страницы выглядят как обычные веб-страницы, но с удаленным всем содержанием, кроме содержимого. Из-за этого вам нужно убедиться, что ваш сайт WordPress готов к этому.

Как работает AMP?

AMP HTML — это, по сути, подмножество HTML, в котором разрешены только определенные элементы JavaScript. Основное внимание уделяется ускорению загрузки сайтов с большим объемом контента, таких как новостные сайты и блоги. Хотя он сильно ограничивает Javascript, он позволяет размещать на ваших страницах определенные элементы аналитики и рекламы, что делает его хорошим вариантом для издателей новостей.
Чтобы создать новое мобильное представление, AMP использует три основных элемента:

• AMP HTML — это подмножество HTML добавляет некоторые настраиваемые теги и свойства со многими ограничениями, которые позволяют клиентам AMP отображать ваш контент так, как вы хотите, не беспокоясь о производительности. Плагин автоматически добавляет эти новые теги на ваши страницы, но вы можете использовать их в своих собственных шаблонах для AMP, если они вам нужны.
• AMP JS . Этот фреймворк JavaScript был создан для мобильных страниц и управляет обработкой ресурсов и асинхронной загрузкой, которые обеспечивают работу процесса AMP. Обратите внимание, что вы не можете использовать сторонний JavaScript на своих страницах AMP.
• AMP CDN — AMP предоставляет дополнительную сеть доставки контента, которая может кэшировать и дополнительно оптимизировать ваши AMP-страницы.

Установка AMP

вам нужно будет установить плагин, прежде чем вы сможете использовать AMP на своем сайте WordPress. Если вы используете WordPress.com, это уже доступно для вас.

Официальный плагин

Хотя вы можете найти официальный плагин AMP в магазине плагинов WordPress, вы найдете только последнюю версию на сайте проекта Github . Таким образом, у вас есть выбор.
Установка плагина через WordPress — самая быстрая. Вам просто нужно найти amp-wp в разделе «Добавить новый» панели администратора плагинов WordPress. Затем вы просто нажимаете «Установить», а затем активируете, чтобы начать использовать AMP на своем веб-сайте.
Если вам по какой-либо причине нужна последняя версия, вам придется установить плагин вручную. После загрузки пакета Github вам просто нужно нажать «Загрузить плагин» на панели «Добавить новый» плагинов. Просто найдите zip-файл, содержащий пакет, и пусть WordPress возьмет все оттуда. После завершения загрузки вы можете просто активировать плагин, чтобы начать его использовать.

PageFrog и другие плагины AMP

Официальный плагин разработан непосредственно командой проекта Google AMP, что делает его самой современной версией AMP. Он создает /amp/ версию каждой страницы и публикации, которые у вас есть. Вам просто нужно добавить /amp/ в конец URL-адресов, чтобы увидеть их самостоятельно.
Однако вы не можете редактировать эти страницы AMP. Если вам нужно нечто большее, чем то, что дает вам базовый плагин, вам понадобится один из других плагинов AMP, например PageFrog.
PageFrog основан на основном плагине AMP, позволяя вам редактировать некоторые изменения, которые он вносит. Он даже позволит вам добавить некоторые стили и тематические функции, а также другие протоколы, такие как мгновенные статьи Facebook. Вы можете найти PageFrog и несколько других плагинов AMP в магазине плагинов WordPress.

Настройка вашего сайта WordPress для AMP

После того, как вы активировали плагин, все готово. Для большинства установок вам просто нужно создать контент, как обычно, а плагин позаботится обо всем остальном. Однако обратите внимание, что такие вещи, как ваш код Google Analytics, не будут работать на ваших страницах AMP по умолчанию. Прочтите, чтобы узнать, как добавить функции Analytics и SEO на ваши новые страницы AMP. .

Добавление Google Analytics на ваши AMP-страницы

Если вам нужны эти функции и на ваших мобильных страницах, вы должны вручную добавить их в шаблон страницы single.php плагина.
Для этого вам нужно будет щелкнуть параметр редактирования рядом с именем плагина AMP в вашем списке плагинов. Оттуда вы просто щелкаете ссылку single.php, чтобы начать его редактирование. Обратите внимание, что вам, возможно, придется повторять это каждый раз при обновлении плагина.

SEO-плагины и AMP

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

• Glue for Yoast SEO — добавляет поддержку AMP в плагин Yoast SEO WordPress.
• Schema App Structured Data — плагин схемы SEO с AMP от schema.org
• WP SEO Structured Data Schema — плагин схемы SEO с AMP от Kansas City SEO

Исправление любых ошибок

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

Реклама на ваших AMP-страницах

AMP HTML не поддерживает JavaScript, поэтому реклама не может быть встроена напрямую — вместо этого она находится в изолированных окнах iframe без доступа к основному содержимому статьи.
Google разработал AMP, чтобы пропускать некоторые виды рекламы. Вам просто нужна AMP-совместимая версия ваших рекламных плагинов. Вы можете найти полный список этих совместимых плагинов на странице AMP Github .
В настоящее время поддерживаются следующие поставщики рекламы:

• А9
• AdReactor
• AdSense
• AdTech
• Двойной щелчок

AMP или мобильное приложение?

Хотя AMP может помочь ускорить страницы статей вашего сайта при определенных условиях, он не будет работать в любой ситуации и на всех устройствах. Мало того, он также имеет большие ограничения на то, какую аналитику (без js!) и рекламу вы можете размещать на своих страницах.
AMP может быть эффективным решением для трафика, поступающего из поиска, но как насчет ваших самых лояльных читателей?
Для них, я считаю, приложение по-прежнему имеет смысл, в зависимости от типа и размера вашей аудитории. Приложение по-прежнему может обеспечить множество преимуществ, которые не могут обеспечить даже AMP или Instant Articles : доставка контента и повторная активация с помощью push-уведомлений, кэширование контента и использование в автономном режиме, присутствие в магазинах приложений и, что еще более важно, домашний экран пользователя.
Поэтому, если вы ищете платформу, которая поможет вам стимулировать рост с течением времени, сохраняя при этом контроль над своим контентом и специальными мобильными опциями для рекламы и аналитики, рассмотрите возможность публикации собственного приложения. Если вы используете WordPress на своем сайте новостей или блога, возможно, у нас есть подходящее решение для вас в MobiLoud .