Ускоренные мобильные страницы: AMP для мобильной оптимизации WordPress

Серфинг и поиск в Интернете должны быть быстрыми и легкими. Веб-мастера постоянно пытаются сделать это возможным, оптимизируя производительность веб-сайта и повышая скорость его работы, и отличный способ добиться этого – использовать AMP для WordPress.

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

Чтобы удовлетворить этот спрос на быструю загрузку контента, приложения, разработанные для конкретных мобильных платформ, доступны в Apple (Новости), Facebook (Мгновенные статьи) и Snapchat (Discover). В начале этого года. Google представила ускоренную мобильную страницу (AMP), чтобы ускорить доставку мобильного контента и улучшить взаимодействие с пользователем.

Что такое AMP?

Проект AMP был анонсирован Google в октябре 2015 года и запущен в феврале 2016 года. Это инициатива с открытым исходным кодом, которая дает издателям возможность один раз создать оптимизированный для мобильных устройств контент и мгновенно загрузить его повсюду в мобильной сети.

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

По состоянию на август 2016 года в индексе Google Search было более 150 миллионов AMP-документов, и их число увеличивалось со скоростью 4 миллиона в неделю. В начале августа Google также начал предварительную версию поиска Google для расширенного содержания. Он планирует более широко внедрить его в конце этого года.

AMP в предварительном просмотре поиска

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

Какие сайты должны использовать AMP?

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

От первых пользователей поступают положительные отзывы. Washington Post сообщает, что благодаря сокращению времени загрузки документов AMP на 88% количество вернувшихся пользователей с мобильных телефонов увеличилось на 23%. eBay – одна из крупнейших компаний электронной коммерции, перешедшая на AMP с почти 15 миллионами страниц просмотра продуктов на основе AMP. Ожидается, что в ближайшее время эти страницы будут увеличены, чтобы их можно было обнаружить в поиске.

Итак, какие веб-сайты должны использовать AMP? Определенно те, которые сильно зависят от мобильного трафика. Но учитывая, что все больше и больше пользователей предпочитают использовать свои мобильные устройства для просмотра Интернета, AMP для WordPress (или любого другого веб-сайта) может быть хорошим дополнением.

Чем отличается AMP?

Эта система доставки контента основана на платформе AMP HTML и работает быстрее, чем обычный HTML, потому что,

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

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

Почему издатели и блоги должны включать AMP

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

Страницы AMP отображаются рядом со значком молнии, чтобы отличать их от обычных веб-страниц. Зрители, нажавшие на эту опцию, будут перенаправлены непосредственно на страницы AMP в средстве просмотра AMP. Мало того, контент будет мгновенно доступен в поиске Google и доступен через социальные платформы, такие как Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel и Pinterest.

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

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

Какие оптимизации необходимы для AMP

AMP – это на самом деле целый ряд оптимизаций веб-сайта, выполняемых единообразно, как того требует Google. Чтобы сделать веб-страницу совместимой с AMP, необходимо выполнить следующие оптимизации:

• Разрешить только асинхронный JavaScript – чтобы он не задерживал рендеринг страницы. Это означает, что вы не можете использовать какой-либо созданный вами JavaScript и должны полагаться на элементы AMP для обработки интерактивного содержимого ваших страниц. JS в iframe разрешен, но только если он не препятствует отрисовке.
• Статический размер всех ресурсов – AMP загружает страницу, не дожидаясь загрузки таких ресурсов, как изображения и фреймы. Размер этих ресурсов должен быть указан в протоколе HTTP, чтобы размер и положение этих ресурсов были известны до начала загрузки.
• Не позволяйте механизмам расширений блокировать рендеринг – если на страницу должно быть включено какое-либо расширение, пользовательский скрипт должен проинформировать об этом систему. Таким образом, пространство для расширения создается еще до того, как AMP узнает, что оно будет включать. Расширения для лайтбоксов, встраивания Instagram и твитов – это нормально, поскольку они не блокируют рендеринг страницы, даже если для этого требуются дополнительные HTTP-запросы.
• Не допускайте попадания всего стороннего JavaScript в критический путь – пользовательский JavaScript разрешен только в изолированных окнах iframe. Таким образом, он не блокирует загрузку главной страницы.
• Все CSS должны быть встроенными и ограниченными по размеру – это помогает уменьшить количество HTTP-запросов на критическом пути.
• Запуск шрифтов должен быть эффективным – система AMP не разрешает HTTP-запросы, пока шрифты не начнут загружаться.
• Сведите к минимуму перерасчет размера – перерасчет задерживает рендеринг, поэтому его нужно свести к минимуму.
• Запускайте только анимацию с поддержкой графического процессора – все анимации должны работать на графическом процессоре (графическом процессоре).
• Приоритет загрузки ресурсов – в первую очередь загружается только необходимый контент, причем реклама и изображения загружаются как можно скорее, но загружаются только при необходимости. Таким образом, нагрузка на ЦП сведена к минимуму.
• Загружайте страницы мгновенно – предварительный рендеринг требует много ресурсов процессора и ресурсов. Предварительный рендеринг AMP сначала загружает только необходимый контент, а сторонние фреймы и другие ресурсы – только при необходимости.

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

Как добавить AMP для WordPress

У Google есть руководство, к которому вы можете обратиться для создания базовых HTML-страниц AMP, их размещения, проверки на соответствие AMP, публикации и распространения. Проверка страниц AMP важна, потому что таким образом третьи стороны, такие как Twitter и Instagram, уверены, что страницы будут хорошо отображаться на их платформах.

Что касается веб-сайтов, размещенных на WordPress.com, они автоматически поддерживаются WordPress без дополнительных действий. Самостоятельные веб-сайты WordPress могут включить AMP для WordPress, установив плагин.

Плагин AMP WordPress от Automattic

После того, как вы загрузите, установите и активируете плагин AMP на веб-сайте WordPress, ваши сообщения будут автоматически иметь динамически сгенерированную версию AMP. Вы можете получить доступ к этим страницам, добавив amp в конце своего URL-адреса (example.com/my-post/amp). Если у вас не включены красивые постоянные ссылки, добавьте к ссылкам ? Amp = 1 (который будет выглядеть как example.com/?p=100&=1). Единственный другой шаг – протестировать и подтвердить свои страницы, как указано выше.

Вы вообще не заметите никаких настроек или функций для этого плагина. Есть одна добавленная опция панели управления для AMP Analytics, куда вы можете вставить свой собственный код конфигурации JSON, но это все, ребята.

Этот плагин является официальным плагином из стабильной версии Automattic, и в настоящее время он не поддерживает страницы и архивы, а также вы не можете настраивать страницы. Но это очень простой и легкий в использовании вариант, и вы можете найти некоторые инструкции по настройке в документации на Github.

AMP для WP – ускоренные мобильные страницы

Еще один отличный бесплатный вариант – AMP для WP. Этот бесплатный плагин WordPress предлагает быструю и простую настройку – просто установите, включите настройки и начните автоматически создавать свой AMP для вашего сайта. Бонус – этот плагин также совместим с несколькими сайтами.

Есть встроенные настройки для включения AMP (посты, страницы, архивы), добавления областей мобильной рекламы, структурированных данных (важная часть SEO), интеграции метатегов Yoast SEO, расширенных параметров индекса / без индекса, push-уведомлений, встроенных Комментарии AMP, пользовательские переводы AMP (если вы используете язык, отличный от английского, вы захотите обновить его) и многое другое. Настройки очень обширны для бесплатного плагина, и это здорово.

Лучше всего то, что этот плагин предлагает варианты дизайна, так что вы можете настроить внешний вид вашего AMP-вывода. Используйте включенные по умолчанию AMP-темы или используйте их AMP Theme Framework, чтобы создать свой собственный уникальный дизайн.

AMP для WP также предлагает премиальные расширения для добавления функций (таких как призыв к действию или кеширование AMP) и поддержку популярных плагинов, включая WooCommerce, Advanced Custom Fields и Contact Form 7.

Другие способы добавить AMP для WordPress

Конечно, это не единственный способ добавить AMP на ваш сайт на WordPress. Другие плагины, которые могут помочь вам с AMP для веб-сайтов WordPress, включают:

• WP AMP – для создания индивидуального дизайна AMP без программирования и повышения SEO. Вы можете прочитать об этом здесь.
• Ускоренные мобильные страницы (AMP) для WordPress – для создания темы AMP для вашего сайта.
• Пользовательский AMP – чтобы помочь настроить ваш AMP-контент.
• Мгновенные статьи Facebook и страницы Google AMP – для публикации и управления вашим контентом прямо из WordPress на страницы Google AMP с поддержкой рекламы и аналитики.
• Клей для Yoast SEO и AMP – чтобы убедиться, что плагин WordPress AMP по умолчанию использует правильные метаданные Yoast SEO и позволяет изменять дизайн страницы AMP.

Стоит ли добавлять AMP для WordPress?

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

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

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

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

Источник записи: https://www.wpexplorer.com