Google AMP: увлекательное и удобное руководство по ускоренным мобильным страницам

Смотреть видео. Игнорируйте копию.

Я вам советую, как только вы попадете на сайт Google, посвященный новому проекту Accelerated Mobile Pages (AMP):

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

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

Однако посмотрите видео, и вы почти сразу поймете, что такое AMP (не говоря уже о забавной ссылке на Spinal Tap , см. Ниже).

Или вы можете просто прочитать это руководство, потому что это будет самое интересное, что вы когда-либо читали об AMP и о том, как он влияет на ваш контент-маркетинг.

Обещаю.

Что такое проект Google AMP?

С момента зарождения философии Google Zero Moment of Truth в 2011 году ни для кого не секрет, что они хотят «значительно улучшить производительность мобильного Интернета».

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

Скорее всего, у вас есть мобильное устройство. И есть вероятность, что вы щелкнули ссылку на этом устройстве на странице результатов поиска, на сайте социальных сетей или в почтовом ящике… желая получить контент.

Но этого никогда не происходит.

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

«Сколько времени это займет?» вы не взываете ни к кому конкретно.

Кто знает, но вы никогда не узнаете, потому что, как и 40 процентов населения, вы выйдете на страницу загрузки в течение 3 секунд. Тогда вы скажете, как мой черный кот Аполлон Обезьянья повязка: «Ле вздох».

Такие невыносимые мобильные моменты, которые Google хочет устранить с помощью AMP.

Как быстро AMP сделает ваши страницы?

По шкале от 1 до 10, где один означает «не загружается вообще», а десять - «загрузка за одну секунду», AMP-контент будет загружаться со скоростью страницы 11. (Это ссылка на Spinal Tap, о которой я вас предупреждал).

А если серьезно, как быстро?

Джон Париз, инженер-программист Pinterest, сказал: «Ускоренные мобильные страницы загружаются в четыре раза быстрее и используют в восемь раз меньше данных, чем традиционные страницы, оптимизированные для мобильных устройств».

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

Согласно NiemanLab, статья New York Times, оптимизированная для AMP, полностью загружается на мобильный телефон за 2,99 секунды. Для сравнения, в тесте в Chrome на быстром iMac настольная версия этой страницы заняла 3,82 секунды (мобильная версия была быстрее).

Если вы не знали, NYTimes.com был печально известен как один из самых медленных мобильных новостных сайтов по эту сторону Сатурна.

С тех пор они это исправили.

Вы уверены, что это достаточно быстро?

Но подождите, скажете вы, 2,99 секунды - это все еще верхний предел временного интервала, который наш пассажир метро готов ждать. Он, как и 40 процентов населения, выручил за 3 секунды. 2.99 секунды сокращают его! Это не большое улучшение.

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

Что еще более важно, версия AMP достигла «domContentLoaded - ключевой точки в загрузке веб-страницы, где HTML полностью загружен и определенный важный анализ был завершен» за 0,857 секунды.

Моргание глаза длится около 0,33 секунды.

Другими словами, дважды моргните, и вы, наш пассажир в метро, ​​почти мгновенно начнете читать полезную часть контента благодаря AMP.

Что заставляет традиционные мобильные страницы загружаться так медленно?

Думаю, я знаю, но поскольку я не разработчик, дизайнер или программист (и даже не уверен, что это разные дисциплины), я позвонил одному из наших разработчиков в Rainmaker Digital, Майку Хейлу, чтобы он помог мне с переводом.

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

В старом медленном примере New York Times, приведенном выше, одна статья могла содержать «192 запроса, некоторые к хостам Times, большинство - к потоку других серверов, на которых размещено множество скриптов».

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

Все еще потерявшись, я настаивал на Майке: «Но что за вещи просят ?! Что называется ?! »

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

Разумные, повседневные вещи, но они складываются. И быстро.

Проблема в том, что у вашего мобильного устройства просто нет вычислительных мощностей, чтобы справиться с этим быстро.

Эта иллюстрация объясняет проблему с мобильным контентом.

Представьте, что вы пошли в банк, подошли к кассиру и попросили 100 долларов, но в особом порядке: пятнадцать однодолларовых купюр, три пятидолларовых банкноты, пять десятидолларовых банкнот и одна двадцатидолларовая банкнота.

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

Каждая из этих поездок - это «звонок».

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

AMP призван упростить запросы, которые должен делать браузер.

«Единственный сценарий, который вы можете вызвать, - это javascript AMP», - сказал Майк. «Все упаковано в одну пачку. Я вручаю тебе все сразу ».

А вот как Йоаст описал мобильный контент AMP:

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

Чувствуете горечь в последней строчке? Это не твое воображение. Мы вернемся к этому через минуту. Во-первых, давайте посмотрим на AMP, чтобы понять, что я имею в виду.

Как выглядит мобильный контент, оптимизированный для AMP?

К счастью, вы можете протестировать демонстрацию новостного контента AMP.

1. Вытащите свой смартфон.
2. Откройте браузер (любой браузер).
3. Введите g.co/ampdemo.
4. Введите популярные ключевые слова, такие как «День рождения Джастина Бибера», «Дженнифер Лоуренс» или «Йоко Оно» в поле поиска Google.
5. Нажмите «Отправить».

Это пример того, как будут выглядеть результаты:

Как видите, AMP-контент получает самые высокие счета. Он находится в карусели, которая находится над сгибом. Стандартные записи находятся под ним.

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

Приятного чтения, а!

Почему Google так поступает и стоит ли вам это волновать? (Вроде)

Вот где это становится странным.

Как я упоминал выше, последние пять лет Google был одержим оптимизацией производительности мобильного Интернета, поэтому мы писали о важности очень высокой скорости веб-сайта (в этой статье есть шесть инструментов для проверки скорости вашего сайта, кстати) так же долго.

Вот почему мы предупреждали вас в прошлом году об обновлении Google для мобильных устройств «Mobilegeddon».

Итак, на данный момент AMP - это своего рода кульминация внимания Google к оптимизации мобильного Интернета, но как он помогает издателям?

Это звучит упрощенно, но Google думает: пользователям нравится контент. Они любят быстрый контент. Чем быстрее вы сможете разложить быстрый контент, тем больше контента можно будет использовать.

Однако в этом шаге есть кое-что еще: Google пытается выиграть войну за потребление новостей.

Чем AMP отличается от мгновенных статей и новостей Apple?

В прошлом году Apple и Facebook запустили приложения, позволяющие пользователям читать новостные статьи: Apple News и Instant Articles.

Оба эти приложения являются автономными продуктами.

Кристиан Кантрелл, старший инженер по развитию в команде Adobe XD, написал в Smashing Magazine: «По сути, это модные агрегаторы новостей с настраиваемыми модулями визуализации, построенными на основе проприетарных форматов синдикации».

Другими словами, Instant Articles и Apple News - это возрождение RSS.

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

На данный момент в нем приняли участие известные новостные издатели:

• Time Inc.
• Атлантический океан
• Vox
• BBC
• The Huffington Post

Также к нам присоединились ряд технологических компаний, таких как WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn и Pinterest.

Две распространенные жалобы на AMP

Жалобы бывают как минимум двух видов:

1. Недоброжелатели ненавидят ограничения на то, что может делать мобильный контент.
2. Недоброжелатели сетуют, что мелкий издатель будет наказан.

Йоаст попадает в первую категорию. Йост де Валк писал: «AMP ограничивает то, что вы можете делать на страницах HTML. Фантастический дизайн лишен скорости. AMP - это скорее функция, чем проект формы ».

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

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

Пол Шапиро из Search Engine Land сказал следующее:

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

AMP может оказаться надежным инструментом для оптимизации работы на мобильных устройствах. Так стоит ли вам AMP?

Кому следует беспокоиться об AMP?

Это зависит.

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

«Определенно то, что нужно держать в поле зрения издателя, - сказал мне наш главный директор по продуктам и основатель StudioPress Брайан Гарднер. «Но я предполагаю, что какое-то время это будет гибкая сделка».

Кто знает? Возможно, в будущем есть более простой способ сделать все это - что-то также предложил Джейк Голдман, президент и основатель 10up, консалтингового агентства по управлению контентом WordPress:

«Со временем мы подозреваем, что AMP в конечном итоге станет таким же сложным, как« неограниченный »HTML, или станет спорным из-за достижений в области мобильного оборудования, скорости широкополосного доступа и стандартизованных функций конфиденциальности - решение проблемы, которой у нас больше нет.

Но предположим, что вы действительно хотите поиграться с AMP.

Как создать свою первую AMP-страницу

Здесь вы можете натянуть штаны разработчика для больших мальчиков и девочек, потому что для начала работы с AMP требуется некоторая базовая разметка.

Я рекомендую вам изучить этот базовый урок. Он научит вас:

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

В разметке вы увидите, что у некоторых элементов есть тег AMP. Таким образом, тег <img> становится <amp-img>. Тег <anim> становится <amp-anim>. Тег <video> становится <amp-video>.

И так далее.

Что делать пользователям WordPress?

Если вы хотите попробовать AMP, вам повезло.

24 февраля 2016 года Automattic выпустила официальный плагин AMP. Следовательно, пользователи WordPress - это просто загружаемый плагин вдали от оптимизированного для AMP контента.

Однако имейте это в виду: согласно официальной странице плагина AMP, плагин не поддерживает страницы или архивы. Просто посты.

Но как только вы активируете плагин - бац - все ваши сообщения автоматически AMPlified!

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

Вы можете увидеть AMP-версию своих сообщений в Интернете, поставив «/ amp» в конце URL-адреса. Например, AMP-версия yourwebsite.com/amp-wicked-fast становится yourwebsite.com/amp-wicked-fast/amp.

А если вы являетесь клиентом платформы Rainmaker: у нас есть AMP на экранах наших радаров. Мы не собираемся ни к чему спешить, учитывая, что в истории Google драматические повороты на 180 градусов. Но если AMP действительно окажется важным в будущем, мы предложим нашим пользователям простое решение AMP.

Является ли AMP фактором ранжирования в поисковой сети?

Нет.

Джон Мюллер из Google заявил, что AMP не является фактором ранжирования. Он сказал, что «преобразование страниц в формат AMP будет соответствовать сигналу ранжирования для мобильных устройств, но нет сигнала ранжирования, связанного исключительно с AMP».

Сотрудник Search Engine Journal Мэтт Саузерн отмечает:

«Мой вопрос: какое имеет значение, является ли AMP сигналом ранжирования или нет, если контент AMP уже имеет односторонний билет наверх первой страницы? По большей части AMP-контент уже ранжируется выше обычных результатов, что является одним из величайших повышений рейтинга, о которых можно просить ».

Таким образом, есть преимущество в том, чтобы выйти и опередить своих конкурентов в игре с мобильным контентом - пряник на палке, который люди Distilled машут вам в лицо в этом видео Whiteboard Friday.

Еще одна причина, по которой я рекомендую вам посмотреть видео Whiteboard Friday, заключается в том, что сотрудники Distilled подчеркнули еще одно важное отличие, которое предлагает AMP: сверхбыстрая доставка через кэширующий сервер.

Том Энтони, руководитель отдела исследований и разработок Distilled, говорит:

«И все это спроектировано так, чтобы действительно сильно кэшироваться, чтобы Google мог размещать эти страницы, размещать ваш фактический контент прямо там, и им даже не нужно больше получать его от вас»

Просто для усмешки вот что блог Google сказал об их новом подходе к кешированию:

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

Мне нравится бесплатно.

Повлияет ли AMP на вашу рекламу?

Не должно.

Согласно Google: «Мы хотим поддерживать широкий спектр рекламных форматов, рекламных сетей и технологий. Любые сайты, использующие AMP HTML, сохранят свой выбор рекламных сетей, а также любых форматов, которые не мешают работе пользователей ».

И если вам интересно, вот список поддерживаемых рекламных сетей с официального сайта проекта Google AMP:

• A9
• Adform
• AdReactor
• AdSense
• AdTech
• Точка и медиа
• Двойной клик
• Flite
• Plista
• Умный AdServer
• Yieldmo
• Revcontent

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

К тебе ...

Вау. Мы прошли здесь очень многое.

Спасибо, что остались со мной. Надеюсь, вы нашли это полезным, и я ответил на все ваши вопросы о проекте Google AMP.

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

В любом случае, я с нетерпением жду вашего ответа.