Насколько быстр AMP на самом деле? / Хабр

Проект Accelerated Mobile Pages (AMP) от Google вызвал определённый переполох по идеологическим причинам, но саму технологию так и не разобрали подробно. Несколько недель назад Ферди Кристант писал про

несправедливое преимущество, которое получает контент AMP за счёт предзагрузки

. Это заставило меня задуматься: насколько хорошо AMP работает

на самом деле

? Я видел тесты как у Ферди, когда сравнивались одна или две страницы, но ещё не встречал всесторонних объективных тестов.

Оценить производительность AMP на самом деле не так просто, чем кажется. Нужно рассмотреть по крайней мере четыре контекста:

1. Насколько хорошо работает AMP в контексте поиска Google?
2. Насколько хорошо работает библиотека AMP как автономный фреймворк?
3. Насколько хорошо работает AMP при загрузке из кэша?
4. Насколько хорошо работает AMP по сравнению с каноническим документом?

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

В «карусели» поиска это буквально фрейм, куда загружается весь документ AMP. Если вы нажмёте на эту страницу AMP, то она уже загружена в фоновом режиме — и сразу отобразится на экране.

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

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

В своём посте Ферди проанализировал страницу из Scientas. Он обнаружил, что без предварительной загрузки она открывается далеко не мгновенно. На эмуляции 3G статья Scientas AMP показывает вам белый экран в течение 3,3 секунд.

Вы можете подумать, что такое происходит только с одной страницей. Мол, существует большой разброс по скорости и, возможно, Scientas представляет лишь единичный пример. Справедливое замечание, так что давайте разберёмся.

Первым делом я просмотрел новости. Никому не рекомендую это делать, но пришлось.

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

В конце концов, после этой фильтрации получился список из 50 различных статей AMP. Я прогнал их через WebPageTest по эмуляции 3G-соединения на Nexus 5. Каждая страница строилась через AMP, а также загружалась с сервера-источника.

AMP состоит из трёх основных частей:

• AMP HTML
• AMP JS
• AMP кэш

Когда мы говорим о библиотеке AMP, то имеем в виду AMP JS и AMP HTML вместе. AMP HTML — это одновременно и подмножество HTML (есть ограничения, что можно и что нельзя использовать), и дополнение к нему (AMP HTML включает в себя ряд пользовательских компонентов AMP и свойств). AMP JS — это библиотека, которая даёт вам эти кастомные элементы, а также производит различные оптимизации для документов на базе AMP. Поскольку в основе лежат HTML, CSS и JS, то вы можете полностью построить документ с помощью библиотеки AMP без использования кэша Google AMP.

Библиотека AMP должна обеспечить определённый уровень согласованности в отношении производительности. По большей части она справляется.

Большинство страниц теста загрузились в пределах разумного диапазона друг от друга. Но на обоих концах спектра наблюдались некоторые отклонения: минимальные значения оказались довольно низкими, а максимальные — пугающе большими.

Метрика	Мин.	Макс.	Медиана	90-й процентиль
Начало рендеринга	1765 мс	8130 мс	4617 мс	5788 мс
Визуально полный вид	4604 мс	35 096 мс	7475 мс	21 432 мс
Индекс скорости	3729	16 230	6171	10 144
Размер	273 КБ	10 385 КБ	905 КБ	1 553 КБ
Запросы	14	308	61	151

В основном производительность AMP относительно предсказуема. Тем не менее, цифры говорят и о том, что поддержка AMP не даёт 100% гарантии, что страница станет быстрой или лёгкой. Как и с

любой

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

Любое утверждение, что AMP обеспечивает определённый уровень производительности, зависит от отношения к крайностям и от того, что вы считаете «производительностью». Если вы пытаетесь построить весь сайт на основе AMP, то следует понимать: хотя он вряд ли получится слишком раздутым, но и не будет сразу загружаться со скоростью молнии. Для этого потребуется некоторая работа.

По крайней мере, это относится к самой библиотеке. Возможно, кэш AMP покажет значительную прибавку к скорости?

Сама библиотека AMP помогает, но не настолько, насколько можно было подумать. Может быть, кэш Google добавит скорости?

Кэш Google AMP — это CDN для доставки документов AMP. Как и большинство CDN, он кэширует документы и применяет к ним ряд оптимизаций. Кэш включает в себя и систему проверки, что документ является допустимым документом AMP. Когда вы видите значок AMP, например, в поиске Google, документ загружается из Google AMP Cache.

Я снова прогнал те же 50 страниц через WebPagetest. На этот раз я загрузил каждую страницу с Google AMP CDN. Пит Минэн оказал мне услугу и поделился скриптом для WebPagetest, который предварительно разогревает соединения с Google CDN, чтобы результат оказался больше похож на то, что вы увидите в реальности.

logdata 0
navigate https://cdn.ampproject.org/c/www.webpagetest.org/amp.html
logdata 1
navigate %URL%

При загрузке из кэша страницы AMP показали заметное улучшение производительности по всем показателям.

Метрика	Мин.	Макс.	Медиана	90-й процентиль
Начало рендеринга	1427 мс	4828 мс	1933 мс	2291 мс
Визуально полный вид	2036 мс	36 001 мс	4924 мс	19 626 мс
Индекс скорости	1966	18 677	3277	9004
Размер	177 КБ	10,749 КБ	775 КБ	2,079 КБ
Запросы	13	305	53	218

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

Улучшение не удивительно, учитывая различные оптимизации производительности, которые автоматически выполняет CDN, в том числе:

• Кэширование изображений и шрифтов
• Ограничение максимального размера изображений
• Сжатие изображений на лету, а также генерация вариантов разного размера с добавлением srcset для них
• Использование HTTP/2 и HTTPS
• Очистка от HTML-комментариев
• Автоматическое включение подсказок для ресурсов, таких как dns-prefetch и preconnect

Ещё раз стоит отметить, что

ни одна из этих оптимизаций

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

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

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

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

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

Метрика	Мин.	Макс.	Медиана	90-й процентиль
Начало рендеринга	1763 мс	7469 мс	4227 мс	6298 мс
Визуально полный вид	4231 мс	108 006 мс	20 418 мс	54 546 мс
Индекс скорости	3332	45 362	8152	21 495
Размер	251 КБ	11 013 КБ	2762 КБ	5229 КБ
Запросы	24	1743	318	647

Забудем на секунду о кэше Google и снова сравним библиотеку AMP с каноническими страницами.

В метриках «Начало загрузки» и «Индекс скорости» не заметно особой пользы от библиотеки. Фактически, начало рендеринга в документах AMP происходит даже медленнее.

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

Впрочем, по другим показателя AMP явно превосходит каноническую версию.

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

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

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

Главное преимущество AMP — это ограничения на то, сколько контента можно втиснуть на одну страницу.

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

Сравнение графиков загрузки для канонической версии статьи (слева) и версии AMP (справа). Ограничения AMP сводят к минимуму количество запросов

Размер страниц в 90-м процентиле для канонической версии составляет 5229 КБ. Размер в 90-м процентиле для документов AMP из того же источника — 1553 КБ, разница около 70%. Количество запросов в 90-м процентиле для канонических версий страниц — 647, для документов AMP — 151. Сокращение почти на 77%.

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

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

Абсолютно. У всех. Сайтов.

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

Время покажет, изменится ли что-нибудь. Возможно, как и в начале перехода от мобильных сайтов http://m. к адаптивным сайтам, издатели медленно запрягают. Но прямо сейчас похоже, что призывы к переходу на AMP выполняют именно то, что вы думаете: они продвигают AMP, а не производительность.

что это и зачем нужны они сайту?

AMP-страницы (accelerated mobile pages, «ускоренные мобильные страницы») – это одна из последних технологий, разработанных Google для ускорения загрузки страниц и отображения сайтов на мобильных устройствах. Сначала она была запущена на новостных сайтах. Позднее ее начали применять и на других ресурсах, например, в каталогах или в мобильных версиях сайтов. Есть сведения, что AMP не только помогает клиентам быстрее загружать необходимые страницы, но и способно привести к повышению конверсии. Примером может служить сайт AliExpress, на котором рост конверсии составил 4 %.

Эта технология поддерживается такими авторитетными ресурсами, как Twitter, Pinterest, Tumblr, LinkedIn.

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

Как работает технология AMP?

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

Чтобы создать AMP-страницу используют специальные теги и асинхронные скрипты.

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

Чтобы отслеживать статистику посещения AMP-страниц, можно использовать тег AMP-pixel или расширенный компонент AMP-analytics.

Преимущества использования технологии AMP

1. 1 Увеличение скорости загрузки позволяет пользователям с низкой скоростью интернета получать ответы на свои запросы.
2. 2 Поисковики учитывают при ранжировании скорость загрузки. Шанс попасть на топ-позиции у AMP-страниц намного выше.

Однако внедрение AMP приводит и к некоторым негативным моментам, а именно:

• ухудшается визуальное оформление и функционал ресурсов;
• обычного текстового редактора уже недостаточно для того, чтобы разместить текст на странице;
• чтобы сгенерировать AMP-версию страницу надо обладать знаниями разработки;
• отсутствие поддержки AMP-страниц в Яндексе.

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

Существуют уже готовые решения, позволяющие упростить процесс:

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

Услуги, связанные с термином:

AMP для WP — Ускоренные мобильные страницы — Плагин для WordPress

AMP for WP automatically adds Accelerated Mobile Pages (Google AMP Project) functionality to your WordPress site. AMP makes your website faster for Mobile visitors.

What’s New in this Version? | Priority Support | View Demo | Screenshots | Community

Extensions
Some useful extensions to extend AMP features, check AMP Adsense Support, Contact Form 7 Support, Email Opt-in Support and Call To Action Support. To view more, go to our Extensions page.

Support
We try our best to provide support on WordPress.org forums. However, We have a special community support where you can ask us questions and get help about your AMP related questions. Delivering a good user experience means a lot to us and so we try our best to reply each and every question that gets asked.

Bug Reports
Bug reports for AMP for WP are welcomed on GitHub. Please note GitHub is not a support forum, and issues that aren’t properly qualified as bugs will be closed.

Features:

• NEW — Gutenberg Support
• NEW — Divi and Elementor Support More Info
• NEW — GDPR Compliance
• NEW — Google PageSpeed Optimization with SSR (Server Side Rendering)
• NEW — CSS Optimization (Tree Shaking) — This will automatically remove all the unused CSS from your AMP pages
• NEW — Google Font API and Local Fonts Support For All Designs
• Out of the box compatiblity for Yoast SEO, All in One Seo, Rank Math, Genesis, SEOPress, Bridge Qode SEO, The SEO Framework, SmartCrawl and Squrilly SEO Plugin.
• Introducing Page Builder 3.0 for AMP! Learn More & Video
• New Default Theme for AMP called Swift
• 3 Pre-built AMP Layouts for Business websites and landing pages
• OneSignal and TruePush Push Notifications integration
• Advanced WooCommerce Support More Info
• AMP Plugins Manager — Which allows you to disable a specific plugin functionality only in the AMP version
• Structured Data Options
• Page Break / NextPage (Pagination) Support
• Contact Form 7 Support More Info
• Graviry Form Support More Info
• Caldera Form Support More Info
• Ninja Form Support More Info
• Facebook Comments Support
• Github Gist Support
• Email Opt-in Subscription form support in AMP added
• Call to Action boxes and notification bars
• 9 Advertisement sizes — 2 More AD slots added recently
• Comments Forms in AMP.
• Native AMP Search functionality.
• Design 3 Watch the Video Overview
• Disqus Comments Support
• Vuukle Comments Support
• Spot.IM Comments Support
• Google Tag Manager Support
• Page, Category & Tags Support Added
• Custom AMP Editor — Which allows you to override your Content that you had written in Post or page, so you can add the different content just for AMP.
• Mobile Redirection — More than 50% of your traffic is from mobile and you aren’t doing anything to improve their user experience, which means you are falling behind on SEO and it can result in lower SERPS. Lightning fast mobile version means faster User experience means more engagement which directly results in the lower bounce rate.
• Custom Post Type Support
• Custom Taxonomies Support
• Star Ratings
• Drag & Drop Page builder Added
• 4 Designs for AMP
• AMP WooCommerce Support
• Switch on/off Support for Pages & Posts on AMP
• Translation Panel & RTL
• Internal AMP linking — You can browse AMP pages internally
• Related posts below the post
• Recent Comments list
• Automatically integrate AMP to your website.
• Google Adsense (AMP-AD) Support with 6 different Ad slots across the layout! The First Plugin to have this capability.
• Built in MGID Ads Support with 6 different ad slots.
• Google Analytics Support.
• User Friendly Theme Options Panel.
• Unlimited Color Scheme.
• Image Logo Upload.
• Supports Posts and Pages and other custom post types.
• Proper rel canonical tags which means that Google know the original page.
• Overlay Navigation Menu bar.
• Social Sharing in the Single.
• Sexy Design.
• Separate WordPress Menu for AMP version.
• Page builder & Shortcodes Compatibility.
• Carousel support for Gallery.
• Better Image stretching and resizing.
• Youtube Video Embed Support.
• Vine Embed Support.
• Twitter oembed Support.
• Instagram Embed Support.
• Facebook Video Embed Support.
• RTL Support
• Custom AMP FrontPage
• Notifications
• Alexa Metrics, Chartbeat, Hi-stats, Yandex Metrika, Piwik, Segment.com, StatCounter, Effective Measure and comScore Builtin Support
• Incontent & DoubleClick Support
• Great Support & Active Development.
• Widgets & WooCommerce
• Breadcrumb Support added
• Facebook Instant Articles Support Added
• AMP Installation Wizard that makes it easy to setup for new users.
• Category base remover support
• Tag base remover support
• Addthis Sharing Support
• Infinite Scroll Support
• Photo Gallery by 10Web Support
• 12 New Social Media Integrations added (Reddit, Tumblr, Telegram, Digg, StumbleUpon, Wechat, Viber, Hatena Bookmarks, Pocket, Yummly, MeWe, Flipboard)
• AMP Theme Framework Core Support Added. You can now create AMP templates of your own in just minutes. More
• NEW — Make AMP & Non-AMP Same with just one click!
• NEW — Allows you to use AMP as primary website!

JOIN CHAT GROUP COMMUNITY: Purpose of this group is to get proper suggestions and feedback from plugin users and the community so that we can make the plugin even better.

Getting Started:

1. User Documentation: The AMP for WordPress plugin is easy to setup but we have some tutorials and guides prepared for you which will help you dive deep with the plugin.

2. Developer Docs: We have created special documentations for developers and semi technical users who are willing to modify the plugin according to their own needs.

3. Support: We try our best to provide support on WordPress.org forums. However, We have a special community support where you can ask us questions and get help about your AMP related questions. Delivering a good user experience means a lot to us and so we try our best to reply each and every question that gets asked.

4. Premium Support: We will personally take care that your website’s AMP version is perfectly validated. We will make sure that your AMP version gets approved and indexed by Google Webmaster Tools properly and we will even keep an eye on AMP updates from Google and implement them into your website.

Credits

Some code used in this plugin was forked from ‘AMP for WordPress’ plugin https://wordpress.org/plugins/amp/ — License URI: http://www.gnu.org/licenses/gpl-2.0.html.
Mobile & Tablet detection library used https://github.com/serbanghita/Mobile-Detect — License URI: https://github.com/serbanghita/Mobile-Detect/blob/master/LICENSE.txt
PHP CSS Parser library used https://github.com/sabberworm/PHP-CSS-Parser — License URI: https://github.com/sabberworm/PHP-CSS-Parser#license (PHP-CSS-Parser is freely distributable under the terms of an MIT-style license.)
AMP Optimizer library used https://github.com/ampproject/amp-toolbox/tree/main/packages/optimizer — License URI: https://github.com/ampproject/amp-toolbox#license (AMP Toolbox is made by the AMP Project, and is licensed under the Apache License, Version 2.0.)

Can I add analytics?

Yes, you easily can. In fact, we have support for 12 Analytics companies. Including Google Analytics, Facebook Pixel, StatCounter, QuantCast, Chartbeat, comScore to list a few. Also, we have Google Tag Manager (GTM) support as well.

Can I add Ads in my AMP pages?

Yes, you can. We have 6 ad placement slots that are built in and strategically placed to get maximum views. Also, we have an extension from which you can insert ads between the content, will get more ad slots and also add custom banners to all the available slots.

Can I extend/Change the AMP design, so it suits my needs?

Yes, you easily can. We have created this plugin in such a way that it can easily be extended. Check out our AMP Theme Framework

Do you have any prebuilt designs?

Yes, we have AMP themes section where we have free and paid designs available. We also update it regularly. You can check it out our AMP Themes

I’m a developer and I want to add custom functionality for a client, can I do that?

Yes, of course. This plugin is very developer friendly, we have lots of hooks and filters that you can use to extend and customize according to the requirements. Also, we have developer documentation which we update regularly.

How do I report bugs and suggest new features?

You can report the bugs here

Will you Add New features to my request?

Yes, Absolutely! We would suggest you send your feature request by creating an issue in Github . It helps us organize the feedback easily.

How do I get in touch?

You can contact us from here

«AMP для WP — Ускоренные мобильные страницы» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

1.0.77.16 (29th July 2021)

• Improvements: Added Filter to remove last-modified header in amp #5101
• Fixed: Webp images are not converting with Webp Express plugin #5108
• Fixed: Validation error — The tag ‘lite-youtube’ is disallowed #5102
• Fixed: Yoast custom breadcrumbs title not working after update #5100

1.0.77.15 (27th July 2021)

• Improvements: Added Yoast custom breadcrumbs title support #5100
• Fixed: Author name only showing for the first post on homepage #5099
• Fixed: Youtube videos does not appear on the AMP page with the Video Yoast plugin
• Fixed: The parent tag of tag ‘picture’ must be noscript validation error #5097

1.0.77.14 (20th July 2021)

• Fixed: AMP page not showing with query string from 1.0.66 version #5096
• Fixed: Related posts title and excerpt not appearing properly #5095
• Fixed: Debug warnigs with WP Foro plugin #5094

Full changelog available at changelog.txt

Что такое AMP (Accelerated Mobile Pages) / Сайты для компаний и отелей. SEO-Website

Как AMP ускоряет работу сайтов

Итак, что необходимо, чтобы AMP страницы загружались настолько быстро, что клиенты говорили бы о вашем веб-сайте: “о! этот сайт загрузился «мгновенно»”?

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

Разрешать только асинхронные скрипты

(приводим ссылки на оригинал, так как до сих пор нет устоявшихся терминов для перевода в русском языке).

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

 

Размерять все ресурсы статически

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

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

 

Не позволять расширениям блокировать рендеринг веб-страницы

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

Любая веб-страница, которая использует специальный скрипт, или точнее сам сайт, должен сказать системе AMP, что страница будет в конечном итоге иметь кастомный тег (custom tag). Например, сценарий amp-iframe  сообщает системе, что будет иметь amp-iframe тег. И AMP создает окно Iframe, прежде чем даже будет известно, что сценарий будет выполнять это:

“script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js””

 

Держать все сторонние скрипты вне критического пути

Сторонние JavaScript (JS)- скрипты любят использовать синхронную (последовательную – читай медленную) JS загрузку. Они также любят внешние вызовы document.write для синхронизации сценариев. Например, если у вас есть на странице пять рекламных объявлений, и каждое из них вызывает по 3 синхронные загрузки (каждая с задержкой подключения в 1 секунду), то вы будете ждать как минимум 15-18 секунд (и терять столько времени только для JS-загрузки).

AMP-страницы все же позволяют сторонние JavaScript, но только в sandboxed iframes (песочнице фреймов). Ограничивая их таким образом (в iframes), скрипты не могут блокировать выполнение и загрузку главной страницы. Даже если они вызывают перерасчеты, то sandboxed-iframes фреймы будут ограничены размером DOM.

Поэтому Iframe-пересчеты будут проходить очень быстро по сравнению с перерасчетом стилей и макета всей страницы.

 

Все CSS должны быть встроенными (inline) и «размеро-привязанными»

CSS стили блокируют рендеринг, загрузку страницы и имеют тенденцию становиться «большими помехами» (раздутыми). В технологии AMP HTML-страниц, разрешены только встроенные стили. Это минимизирует загрузку (избавляются от лишних  HTTP-запросов), т.е. выполняется, как правило, один  HTTP, а лишние запросы удаляются из критического пути рендеринга для большинства веб-страниц.

Шрифты: загрузка должна быть эффективной

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

Система AMP стандартизирует, что не ждет никакие HTTP-запросы, пока шрифты начнут загрузку. Это возможно только потому, что все JS (в AMP) имеет атрибут асинхронной загрузки,  а также разрешены только встроенные таблицы стилей; поэтому нет необходимости ожидания никаких HTTP-запросов, блокирующих браузер от загрузки шрифтов.

 

Минимизация перерасчетов стилей (CSS)

Каждый раз, когда вы хотите что-то загрузить в браузере (измерить), это вызывает перерасчеты стилей CSS, потому что браузер для отображения страницы должен иметь макет всей страницы. В страницах AMP, все DOM-чтение происходит, прежде чем DOM-записи. Это гарантирует, что произойдет  максимум один пересчет стилей во фрейме/странице.

 

Только GPU-ускоренные анимации/изображения разрешены

Единственный способ обеспечить оптимизацию анимированных изображений – это запустить их на видео-карте GPU (устройство должно иметь встроенные видео-адаптер).

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

 

Приоритетность загрузки ресурсов

AMP контролирует все загрузки ресурсов: но отдает приоритет загрузке тех ресурсов, которые нужны больше/раньше, а также поддерживает предварительную выборку загруженных ресурсов.

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

AMP также поддерживает предварительную выборку нагруженных ресурсы и lazy-loaded изображения. Ресурсы загружаются как можно позже, но с prefetch-упреждением как можно раньше. Таким образом, все загрузки происходят очень быстро, а CPU используется только тогда, когда необходимые ресурсы фактически показываются пользователям.

 

Загрузка страниц “мгновенно”

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

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

Подробнее о том, почему AMP HTML не в полной мере может воспользоваться сканером предварительной загрузки можно дополнительно прочитать: preload scanner.

***
На основе материалов www.ampproject.org, Google.com

Плагины WordPress AMP — Accelerated Mobile Pages

С Accelerated Mobile Pages, Google обещает практически мгновенную загрузку контентных страниц благодаря их оптимизации, особенной разметке и практически полному отказу от JavaScript скриптов.

На данный момент существует много дискуссий и споров на тему WordPress AMP, особенно в группе Advanced WordPress Facebook.

Смотрите также:

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

• “Мы заканчиваем работать над WordPress шаблоном и находимся в процессе его адаптации для мобильных устройств. Теперь, когда Google выпустила AMP для WordPress, мы можем просто установить плагин AMP, а не продолжать возиться с кодом? «
• «Accelerated Mobile Pages является явным победителем, потому что создает AMP версию домашней и других стандартных страниц, а также постов. В то время как AMP от Automattic создает AMP-версию только для постов.»

Во-первых, WordPress AMP плагины не являются заменой для адаптивного сайта. Это просто еще один интерфейс для чтения новостных статей и постов в блоге, на которые Google ссылается в своих результатах поиска.

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

Если у вас есть CPT (Custom Post Type), который выполняет те же задачи, что новостная статья или статья блога, то также можно прибегнуть к помощи AMP.

В каких случаях AMP не оправдывает ожиданий

Естественно, при работе с этим форматом возникают и некоторые проблемы.

Более детально ознакомиться с возможными трудностями и недостатками AMP можно в этой статье от Yoast, но если вкратце:

• AMP устанавливает ограничения на то, что вы можете предлагать своим читателям через Интернет
• AMP приносит пользу нескольким крупным компаниям
• Поддерживается только 5 рекламных платформ, 2 из них принадлежат Google
• Не вся аналитика будет работать с AMP

Но несмотря на это все, Google упорно продвигает Accelerated Mobile Pages и делает ударение на том, что отсутствие или присутствие AMP версий ваших статей влияет на результаты поиска для мобильных устройств.

Плагины WordPress AMP

Когда дело доходит до выбора WordPress плагинов AMP, есть четыре основных аспекта, которые мы должны учитывать:

• Фактическая/amp версия вашего поста
• Интеграция с плагином SEO, чтобы к AMP страницами прикреплялись соответствующие метаданные
• Интеграция с Google Analytics или другим инструментом для сбора аналитики, чтобы можно было отслеживать трафик AMP версий
• Плагин для показа AMP рекламы, если вы издатель

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

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

Здесь нет настроек. Вы получаете минимальное оформление и, кроме логотипа, нет иных опций для брендинга.

2. WP AMP от TeamDev

Пожалуй, лучшее решение для создания AMP на WordPress. Позволяет настроить из админки практически всё: внешний вид, положение блоков на странице, добавить рекламные блоки, код Google аналитики и т.д. Плагин также поддерживает магазины на WooCommerce.

Общие настройки:

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

Настройки отображения хедера:

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

Реклама:

Эта страница настроек плагина позволяет добавить рекламные блоки от AdSense и Doubleclick.

Полный обзор плагина вы можете прочитать здесь. А купить WP AMP можно на CodeCanyon.

3. AMP от PageFrog

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

• возможность оформить статью AMP с вашим брендингом
• аналитика
• возможность использовать Facebook и Google Adsense рекламу

Брендинг

Стилизация продумана, есть поддержка логотипа, выбор шрифтов между serif и sans-serif, а также несколько цветов, так что вы сможете использовать цвета вашего бренда.

Аналитика

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

В настоящее время есть поддержка: Google Analytics, Chartbeat, Parsly, а также возможность добавления других платформ, которые предоставляют аналитику для AMP.

Это можно сделать с помощью разных хуков и фильтров, прописать весь код самостоятельно или прибегнуть к помощи плагина PageFrog.

Реклама

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

Другие особенности:

• возможность включения формата AMP для других типов постов, даже кастомных, созданных с помощью других плагинов
• поддержка Facebook Instant статей, которая пока доступна только в закрытой бета версии

4. Glue for Yoast SEO & AMP

Этот плагин отвечает за то, чтобы дефолтный плагин WordPress AMP использовал правильные YoastSEO метаданные. Без этого такие вещи как канонические ссылки, например, могут работать некорректно.

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

Другие WordPress плагины AMP

AMP Analytics — расширяет возможности AMP для поддержки аналитики на вашем WordPress сайте (Google Analytics)

Accelerated Mobile Pages (AMP) для WordPress — Создает AMP темы для вашего WordPress сайта

Заключение

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

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

Источник: cozmoslabs.com

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Полное руководство по ускоренным мобильным страницам (AMP) на 2021 год

Когда дело доходит до вашего веб-сайта, чем быстрее, тем лучше.

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

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

Однако за последние несколько лет об AMP стало меньше говорить. В 2021 году Google незаметно удалил символ AMP из результатов поиска.

В чем дело с AMP? Будет ли это актуально в 2021 году? Почему это вообще имело значение?

Это обновленное руководство по AMP охватывает все, что вам нужно знать, в том числе, что такое AMP, почему он важен, как он работает, плюсы и минусы, и стоит ли вам беспокоиться о его внедрении в 2021 году. (Спойлер: Вероятно, нет.)

Что такое ускоренные мобильные страницы (AMP)?

Accelerated Mobile Pages, также называемые AMP, — это проект кодирования с открытым исходным кодом, созданный Google, чтобы помочь веб-сайтам быстрее загружаться на мобильных устройствах.AMP работает, разделяя страницы до наиболее важных частей и сохраняя кешированную версию на серверах Google, что позволяет им доставлять контент практически немедленно.

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

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

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

Какова цель AMP для веб-сайтов?

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

Основная цель

AMP заключалась в увеличении скорости страницы. Однако Google, вероятно, стремился составить конкуренцию мгновенным статьям Facebook и Apple News.

Как работает подключаемый модуль AMP?

Пол Шаппиро из Search Engine Land излагает трехчастную структуру AMP:

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

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

Вот еще несколько вещей, которые вам следует знать:

• С AMP вы должны использовать упрощенную версию CSS.
• Вам разрешено использовать только библиотеку JavaScript, предоставляемую AMP. Поскольку вы не контролируете ситуацию, вы можете столкнуться с отложенной загрузкой.
• Для работы AMP-сайтов они должны быть правильно проверены.
• Пользовательские шрифты должны быть загружены специально.
• Чтобы изображения не выглядели необычно, не забудьте указать высоту и ширину.
• Используйте расширения, одобренные AMP, если хотите, чтобы на вашей странице были видеоролики.
• Эксперты сообщают, что AMP снижает доход от рекламы и затрудняет обнаружение статей «фальшивых новостей».

Каждая страница AMP также имеет свой URL-адрес. Например, классический URL-адрес может быть:

.

https: // neilpatel.ru / what-is-content-marketing /

Для страницы AMP URL-адрес включает префикс AMP, который выглядит следующим образом:

google.com/amp/s/www.neilpatel.com/….

Видите google.com в начале URL?

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

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

Какие плюсы и минусы AMP?

AMP с большой помпой впервые появился в результатах поиска в феврале 2016 года. Многие эксперты назвали это будущим маркетинга. Однако за последние несколько лет AMP потерял свой блеск.

Google недавно прекратил показывать значок AMP в результатах поиска, что указывает на то, что AMP теряет доверие пользователей. Кроме того, исследование Kinsta показало, что AMP сократила количество потенциальных клиентов на целых 59 процентов.

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

К сожалению, недостатков тоже немало. Давайте посмотрим на плюсы и минусы AMP.

AMP Плюсы

AMP предоставляет пользователям урезанную версию веб-контента, которая имеет несколько преимуществ. К ним относятся:

• Лучшее время загрузки веб-сайта : AMP помогает сайтам быстрее доставлять контент, удаляя второстепенные элементы.Это очень важно, поскольку все больший процент людей в мире полагается на мобильные устройства для доступа в Интернет.
• Более высокий рейтинг в поиске: Хотя AMP никогда не был фактором ранжирования, скорость им является. Это означает, что более быстрая загрузка ваших страниц может улучшить рейтинг Google.
• Легко реализовать на WordPress : Помимо более быстрого времени загрузки и немного более высокого рейтинга в поиске, AMP было несложно реализовать, по крайней мере, для сайтов WordPress. Многим владельцам сайтов казалось выгодным использование простого плагина для увеличения трафика.

Минусы усилителя

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

• Трудно реализовать, если у вас нет WordPress. : чтобы создать страницу AMP, вам понадобится опыт программирования и помощь разработчика, по крайней мере, если у вас нет WordPress.
• Снижение дохода от рекламы : На AMP-страницах отображается меньше рекламы, что хорошо для скорости, но не так хорошо, если это основной источник вашего дохода.
• Ограниченная аналитика : вы не можете использовать стандартные теги аналитики на страницах AMP, поскольку страница фактически находится на серверах Google. Это затрудняет понимание того, как изменения влияют на трафик и сокращают посещаемость вашего сайта.
• Меньший контроль над контентом и дизайном : AMP удаляет множество «ненужных» элементов, но это может включать функции для брендинга и привлечения трафика на другие страницы.
• Ограничивает сбор потенциальных клиентов: AMP также удаляет формы для захвата потенциальных клиентов и загружаемые ресурсы, что снижает возможности сайтов по сбору потенциальных клиентов.
• Ограничения публикации в социальных сетях: Кнопки публикации в социальных сетях могут даже отображаться некорректно, поскольку большинство из них разработано с использованием JavaScript.

Как видите, минусы AMP в большинстве случаев перевешивают плюсы. Основная цель AMP — сделать Интернет быстрее, но есть много других способов увеличить скорость сайта.

Для кого лучше всего подходит AMP?

Многие компании хотят знать, стоит ли AMP того. По правде говоря, это зависит от обстоятельств. AMP может не стоить усилий для большинства веб-сайтов, тем более, что Google удалил символ AMP из результатов поиска.

Итак, как узнать, является ли AMP лучшим выбором для вашего сайта? Вот несколько причин, по которым вы можете использовать AMP:

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

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

Лучшие практики AMP

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

• Убедитесь, что он имеет смысл для вашего веб-сайта: AMP больше не так полезен, как раньше, поэтому проверьте, имеет ли он смысл для вашего сайта, прочитав раздел о том, для кого AMP лучше всего.
• Если у вас нет WordPress, обратитесь за помощью. : Плагин AMP WordPress довольно удобен для пользователя, но реализовать его самостоятельно — непростая задача.Свяжитесь или наймите веб-разработчика.
• Не применяйте AMP на страницах с высоким трафиком или высокой конверсией: AMP удаляет такие элементы, как формы подписки и брендинг, поэтому не используйте AMP на страницах, которые вы используете для создания своего бренда или привлечения потенциальных клиентов.
• Используйте A / B-тестирование , чтобы узнать, стоит ли AMP того: AMP поддерживает A / B и многовариантное тестирование, поэтому обратите внимание на то, как оно влияет на такие показатели, как коэффициент конверсии, время на странице и т. Д.

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

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

Как мне разместить AMP на моем веб-сайте?

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

Полезны ли страницы AMP?

Они уже не так полезны, как раньше. Похоже, что более крупные сайты отходят от AMP, и Google удалил символ AMP из результатов поиска.Если ваш сайт не публикует большое количество своевременных новостей, вероятно, это не стоит усилий.

Какие проблемы с ускорением мобильных страниц?

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

Подходят ли страницы AMP для SEO?

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

Ускоренные мобильные страницы Заключение

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

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

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

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика.Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четкой окупаемостью инвестиций.

Заказать звонок

Что такое AMP? — Полное руководство по ускоренным мобильным страницам

РАЗДЕЛ 1. Что такое ускоренные мобильные страницы?

Мышление, ориентированное на мобильные устройства, никуда не денется — это утверждение верно как для бизнеса, так и для потребителей.

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

Только в США каждый день происходит 30 миллиардов мобильных моментов (момент, когда клиент смотрит на свой телефон и ожидает немедленного ответа). Это означает, что каждый день у вашего бренда есть 30 миллиардов мобильных возможностей предложить пользователям то, что они хотят.

И все же расходы на мобильную рекламу отстают от потребления мобильных медиа:

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

Ответьте на этот вопрос — как долго вы ждете загрузки мобильной веб-страницы?

Согласно данным, собранным Google и SOASTA, 40% потребителей покидают страницу, загрузка которой занимает более трех секунд.

Три секунды.

Это все время, когда вам нужно удерживать внимание пользователя, которому понравилось ваше объявление и который нажал на него. И если ваша веб-страница не загружается в течение вышеупомянутого времени, вы создали объявление, независимо от того, насколько оно было привлекательным, напрасно. Плохая новость заключается в том, что согласно данным, большинству розничных мобильных сайтов для загрузки требуется около 6,9 секунды, что более чем вдвое превышает время ожидания 40% пользователей перед тем, как покинуть страницу.

Как скорость веб-страницы влияет на показатель отказов

Скорость — важный фактор при измерении показателя отказов для мобильных веб-страниц.Прежде чем мы углубимся в это, важно объяснить, что скорость в первую очередь рассматривается в двух аспектах для показателей отказов мобильного сайта, то есть время готовности DOM и время загрузки полной страницы:

1. Время готовности DOM: Время готовности DOM — это количество времени, которое требуется для получения и анализа HTML-кода страницы браузером — это лучший показатель показателя отказов. Даже если пользователь может не знать, когда HTML-код получен и проанализирован, код должен быть загружен до того, как могут быть загружены какие-либо элементы страницы, такие как изображения.Если HTML-код занимает слишком много времени, время загрузки веб-сайта будет медленным. Чтобы ускорить время готовности DOM вашей мобильной веб-страницы, лучше избегать использования JavaScript, который блокирует и не позволяет браузеру анализировать HTML-код. Элементы страницы, использующие JavaScript, включают стороннюю рекламу и социальные виджеты, которые необходимо получить с внешнего сервера перед загрузкой страницы.

2. Время загрузки полной страницы: Время загрузки полной страницы включает время, затрачиваемое на изображения, шрифты, коды CSS и т. Д.для загрузки на веб-страницу. Более быстрая загрузка страницы приводит к снижению показателя отказов:

.

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

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

Рассмотрим эти поразительные откровения о скорости загрузки страницы:

• В среднем мобильный сайт загружается через соединение 3G за 19 секунд, а 77% мобильных сайтов загружаются более 10 секунд.
• Google обнаружил, что конверсия снижается на 20% за каждую дополнительную секунду загрузки веб-страницы. Для сравнения: сайты, загруженные за 5 секунд, приносили в 2 раза больше доходов от мобильной рекламы, чем сайты, загруженные за 19 секунд.
• 61% пользователей вряд ли вернутся на мобильный сайт, к которому у них возникли проблемы с доступом.

Что это значит?

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

Что такое AMP?

Google запустил проект с открытым исходным кодом Accelerated Mobile Pages, чтобы обеспечить оптимальную скорость работы мобильных веб-страниц.

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

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

При создании мобильных страниц в формате AMP вы получаете:

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

2. Гибкость и результаты: Компании имеют возможность решать, как представить свой контент и какие поставщики технологий использовать, поддерживая и улучшая KPI.

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

Вот как узнать AMP в результатах поиска:

Вот как выглядит AMP-страница по сравнению с обычной веб-страницей:

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

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

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

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

РАЗДЕЛ 2: Как работает AMP?

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

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

С момента запуска почти два года назад 25 миллионов доменов опубликовали более 4 миллиардов AMP-страниц:

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

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

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

Chartbeat проанализировал данные 360 веб-сайтов с использованием AMP с июня 2016 г. по май 2017 г. и выяснил, что типичный издатель, использующий AMP-страницы, видел 16% всего мобильного трафика на своем AMP-контенте.

AMP-страницы загружаются примерно в четыре раза быстрее, чем стандартные веб-страницы, плюс пользователи взаимодействуют с AMP-страницами на 35% больше, чем со стандартными мобильными веб-страницами:

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

3 основных компонента AMP

AMP-страницы состоят из следующих трех основных компонентов:

AMP HTML

AMP HTML — это, по сути, HTML, только с некоторыми ограничениями для надежной работы.Самый простой HTML-файл AMP выглядит так:

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

Вы можете выбрать версию страницы без AMP и версию AMP или только версию AMP.

AMP JavaScript (JS)

Библиотека AMP JS обеспечивает быструю визуализацию HTML-страниц AMP.Библиотека JS реализует все лучшие практики AMP, такие как встроенный CSS и запуск шрифтов, управляет загрузкой ресурсов и предоставляет настраиваемые теги HTML для обеспечения быстрой отрисовки страницы.

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

Кэш AMP

Кэш Google AMP используется для обслуживания кэшированных HTML-страниц AMP. AMP Cache — это сеть доставки контента на основе прокси, используемая для доставки всех действительных документов AMP. Cache извлекает страницы AMP HTML, кэширует их и автоматически улучшает производительность страницы.

Для обеспечения максимальной эффективности AMP Cache загружает документ, файлы JS и все изображения из одного источника, который использует HTTP 2.0.

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

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

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

Весь AMP JavaScript выполняется асинхронно

JavaScript может изменять каждый аспект страницы, он может блокировать построение DOM и задерживать рендеринг страницы — оба фактора приводят к медленной загрузке страницы. Чтобы JavaScript не задерживал отрисовку страницы, AMP допускает только асинхронный JavaScript.

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

AMP выполняет сторонний JavaScript в окнах iframe, но не может блокировать отрисовку страницы.

Все ресурсы имеют статический размер

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

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

Механизмы расширения не блокируют рендеринг

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

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

Весь сторонний JavaScript не попадает в критический путь

Сторонний JavaScript использует синхронную загрузку JS, что замедляет время загрузки.На AMP-страницах разрешен сторонний JavaScript, но только в изолированных фреймах iframe, при этом загрузка JavaScript не может заблокировать выполнение главной страницы. Даже если изолированный JavaScript iframe запускает многократные пересчеты стилей, их крошечные iframe имеют очень мало DOM.

Пересчет iframe выполняется очень быстро по сравнению с перерасчетом стилей и макета страницы.

CSS должен быть встроенным и иметь привязку к размеру

CSS блокирует рендеринг, он также блокирует всю загрузку страницы и имеет тенденцию вызывать раздувание.AMP HTML допускает только встроенные стили, это удаляет 1 или в основном несколько HTTP-запросов из критического пути рендеринга к большинству веб-страниц.

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

Срабатывание шрифта исправно

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

Платформа AMP объявляет ноль HTTP-запросов до тех пор, пока не начнется загрузка всех шрифтов. Это стало возможным только потому, что весь JavaScript в AMP имеет атрибут async и разрешены только встроенные листы, нет HTTP-запросов, блокирующих загрузку шрифтов браузером.

Минимизированы перерасчеты стилей

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

Запуск анимации только с ускорением на GPU

Чтобы запустить быструю оптимизацию, вы должны запустить ее на графическом процессоре. Графический процессор работает послойно, он знает, как выполнять некоторые действия на этих слоях — слои можно перемещать и затемнять. Однако, когда графический процессор не может обновить макет страницы, он поручает эту задачу браузеру, что плохо сказывается на времени загрузки страницы.

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

Приоритет загрузки ресурсов

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

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

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

Мгновенно загружать страницы

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

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

Вы также можете использовать следующее видео, чтобы узнать «7 способов, которыми AMP ускоряет ваши страницы»:

Теперь, когда мы знаем, как работает AMP, давайте посмотрим, как AMP сравнивается с мгновенными статьями, адаптивным веб-дизайном и прогрессивными веб-приложениями Facebook.

AMP против мгновенных статей Facebook

Facebook запустил Instant Articles в 2015 году, чтобы помочь издателям обеспечить невероятно быстрое и захватывающее чтение для людей на Facebook.Мгновенные статьи Facebook:

• В 10 раз быстрее, чем стандартные статьи для мобильного Интернета
• В среднем на 20% больше мгновенных статей читается
• 70% читателей с меньшей вероятностью откажутся от мгновенной статьи

Instant Articles помогает издателям быстро создавать интерактивные статьи на Facebook. Они предоставляют вам следующие преимущества:

• Быстро и оперативно: Мгновенные статьи загружаются мгновенно, независимо от того, какое соединение или устройство использует пользователь.Статьи просты в использовании, поскольку они трансформируются для мобильного повествования.
• Интерактивные и увлекательные: Захватывающие возможности статей делают их более интерактивными, поэтому мгновенные статьи публикуются на 30% чаще, чем статьи в Интернете для мобильных устройств. Это поможет расширить охват ваших историй в ленте новостей.
• Простая и гибкая монетизация: Монетизация является неотъемлемой частью Instant Articles. Чтобы развивать свой бизнес с помощью статей, вы можете расширить прямую продажу рекламы и заполнить доступный рекламный инвентарь с помощью сети аудитории Facebook и даже создать собственный брендированный контент.

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

Однако скорость принятия AMP-страниц намного выше, чем у мгновенных статей, и это в значительной степени потому, что Facebook все больше отдает предпочтение видео над текстовыми статьями в своей ленте новостей. Это привело к тому, что несколько издателей перестали использовать Instant Articles, в том числе New York Times и The Guardian.

По словам Парсли, Google обогнал Facebook в качестве основного источника внешнего трафика для издателей. Сейчас на Google приходится 42% внешнего трафика издателей:

Когда Facebook запустил Instant Articles, превзойдя Google в качестве основного источника трафика на медиа и контентные веб-сайты, однако, с запуском и успехом AMP Google снова вышел в лидеры.

Успех проекта AMP заключается в том, что это инициатива с открытым исходным кодом, а не деловое партнерство.Вместо того, чтобы ограничивать пользователей определенным приложением, как это сделал Facebook с Instant Articles, проект AMP нацелен на изменение способа, которым издатели создают мобильные веб-страницы.

AMP против адаптивного веб-дизайна (RWD)

Создание веб-сайтов, удобных для мобильных устройств, было приоритетом для маркетологов с тех пор, как Google запустил Mobilegeddon в начале 2015 года. Адаптивный веб-дизайн призван помочь в создании веб-страниц, ориентированных на гибкость. Адаптивная веб-страница работала на любом устройстве или на любом экране, обеспечивая более удобную работу в мобильной сети.

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

1. RWD ориентирован на гибкость: Отзывчивый веб-дизайн добавляет гибкости вашему веб-сайту. Вы можете создать страницу, которая автоматически реагирует на размер экрана посетителей, это обеспечивает охват вашей страницы и возможность предоставить пользователям удобную работу с мобильными устройствами на экранах самых разных размеров.Адаптивный веб-дизайн ориентирован не только на мобильные устройства, но и на всех устройствах и для любого пользовательского интерфейса.

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

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

4. AMP обеспечивает лучший пользовательский опыт: Есть два основных фактора, которые определяют взаимодействие с мобильным пользователем, а именно: удобство использования элементов страницы для мобильных устройств и скорость. Хотя адаптивный веб-дизайн хорошо справляется с масштабированием элементов страницы в соответствии с экраном пользователя, он ужасно не справляется со скоростью по сравнению со страницами AMP.

5. AMP имеет ограничения JavaScript: Адаптивный веб-дизайн отдает предпочтение всем сторонним скриптам и медиа-библиотекам, чего нельзя сказать о страницах AMP.Чтобы страницы загружались быстро, фреймворк AMP имеет очень ограниченные функции JavaScript и CSS.

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

AMP против прогрессивных веб-приложений (PWA)

Progressive Web Apps — это мобильное веб-приложение, которое доставляется через Интернет, оно ведет себя как обычное приложение. Основное различие между PWA и собственными приложениями заключается в том, что PWA не нужно загружать из Google или магазина приложений.

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

Потребность в прогрессивных веб-приложениях возникла из-за того, что 1000 лучших мобильных веб-сайтов посещают в 4 раза больше людей, чем 1000 лучших нативных приложений. Однако эти веб-сайты привлекают пользователей в среднем в 20 раз меньше минут, чем мобильные приложения.

По сути, это означает, что мобильные веб-сайты привлекают посетителей, но не привлекают их.

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

PWA:

• Надежность — Они загружаются мгновенно даже в условиях слабой сети.
• Fast — Быстро реагируйте на действия пользователя с плавной анимацией и без резкой прокрутки.
• Вовлеченность — Они ощущаются как собственное приложение на устройстве, обеспечивая иммерсивный пользовательский интерфейс.

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

Это ключевые различия между AMP и PWA:

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

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

1. AMP как прогрессивное веб-приложение

Если ваш контент в основном статичен и вы можете довольствоваться ограниченной функциональностью AMP, этот вариант позволит вам создавать молниеносные впечатления от прогрессивного веб-приложения.Например, AMP построен так — прогрессивное веб-приложение, полностью заряженное AMP. У него есть сервисный работник, который обеспечивает автономный доступ, а также манифест, который запрашивает баннер «Добавить на главный экран».

2. AMP для прогрессивного веб-приложения

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

3. AMP в прогрессивном веб-приложении

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

Это включает использование другой формы AMP, называемой «Shadow AMP», которая позволяет вставлять AMP в область веб-страницы.Результат — AMP в оболочке прогрессивного веб-приложения.

Washington Post демонстрирует идеальный пример совместной работы PWA и AMP для улучшения взаимодействия и сокращения времени загрузки. Когда Washington Post изначально сделала свой веб-сайт адаптивным, их скорость составляла 3500 мс. Когда они приняли AMP, время загрузки страницы было сокращено до 1200 мс, а затем с помощью технологии AMP CDN оно было сокращено до 400 мс.

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

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

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

РАЗДЕЛ 3: Преимущества и ограничения AMP

AMP обеспечивает более быструю загрузку веб-страниц, что способствует удобству работы пользователей и позволяет посетителям дольше оставаться на странице.AMP использует AMP HTML, который помогает мобильным страницам загружаться быстрее. Фактически, по словам Гэри Иллайеса из Google, среднее время загрузки AMP-страниц составляет 1 секунду, что в 4 раза быстрее, чем средняя стандартная HTML-страница.

Мы уже обсуждали связь между показателем отказов страницы и скоростью страницы, и мы видели подробный отчет о том, как работает AMP и как он сравнивается с PWA, RWD и мгновенными статьями Facebook.

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

Преимущества AMP

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

AMP предлагает следующие преимущества для ваших мобильных страниц.

Привлекает аудиторию

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

Максимальный доход

Каждую дополнительную секунду для загрузки вашей страницы количество конверсий падает на 12%. Это означает, что если вы хотите привлечь аудиторию и повысить рентабельность инвестиций, вам необходимо убедиться, что ваша мобильная страница соответствует ожиданиям посетителей по скорости.

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

Сохранение гибкости и контроля

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

Вы также можете использовать A / B-тестирование, чтобы протестировать и создать для своих клиентов наилучшие возможности для мобильных пользователей.

Упростите работу

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

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

Увеличьте рентабельность инвестиций

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

Создайте устойчивое будущее

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

Повысьте удобство работы пользователей

Конечно, наиболее очевидным преимуществом использования ускоренных мобильных целевых страниц после клика является то, что они принесут гораздо больше удовлетворения пользователям.Когда каждый второй человек не может ждать загрузки веб-сайта всего 10 секунд, ускорение процесса на 15–85% может оказать огромное влияние на удовлетворенность посетителей.

Получите повышение SEO

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

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

Хотя использование AMP-страниц дает вам множество преимуществ, у AMP также есть некоторые недостатки.

Нет стороннего JavaScript

Поскольку у вас нет возможности использовать сторонний JavaScript, вам нужно попрощаться с возможностями аналитики и отслеживания, которые позволяют вам предоставлять точные рекламные возможности.

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

Нет отслеживания Google Analytics

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

Вот как вы можете отслеживать AMP-страницы в Google Analytics с помощью Диспетчера тегов Google.

У страниц AMP

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

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

РАЗДЕЛ 4: Истории успеха AMP

Когда мы говорим о мобильных веб-страницах, скорость означает доход. Исследование SOASTA показывает, что даже задержка загрузки страницы в 100 мс может привести к снижению конверсии:

Чтобы подчеркнуть влияние AMP на мобильные веб-страницы, Google поручил Forrester Consulting провести полное исследование Economic Impact ™ среди издателей и веб-сайтов электронной коммерции с использованием AMP.

В исследовании выделяются 4 веб-компании, которые использовали формат AMP. Глядя на результаты четырех компаний, Forrester создал модель для прогнозирования ожидаемой отдачи от внедрения AMP в течение трех лет.

Используя эту модель, веб-сайт с ежемесячным числом посещений 4 миллионов и 10% -ной нормой прибыли может рассчитывать на возмещение затрат на внедрение AMP-страниц и начало получения положительных результатов менее чем за 6 месяцев:

Это основные результаты исследования:

• Увеличение конверсии продаж на 20%.A / B-тестирование, проведенное двумя веб-сайтами электронной коммерции, опрошенными в рамках этого исследования, продемонстрировало 20% -ное увеличение коэффициента конверсии на их страницах AMP, что, согласно модели Forrester, принесло бы более 200 тысяч долларов годовой прибыли.
• Увеличение посещаемости AMP-сайтов на 10% по сравнению с прошлым годом. Увеличение посещаемости сайта приводит к дополнительным продажам и просмотрам рекламы, что, согласно модели, принесет более 75 тысяч долларов годовой прибыли для сайта в первый год.
• Увеличение количества страниц за посещение на 60%.AMP-страницы показали положительные результаты для издателей электронной коммерции и новостей, которые заявили, что количество людей, посещающих сайт, увеличилось на 60%, и эти люди провели на сайте вдвое больше времени с небольшим увеличением возвращающихся посетителей на 0,3%.

AMP — относительно новый формат, и, очевидно, вам придется понести некоторые затраты на его внедрение. Однако выгода от внедрения формата AMP перевешивает первоначальные затраты.

Gizmodo использует страницы AMP, чтобы стать в 3 раза быстрее на мобильных устройствах

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

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

Глава отдела аналитики данных Gizmodo Джош Лаурито почувствовал, что это их главная задача:

Мы предоставили пользователям мобильных и настольных компьютеров одинаковые (большие) полезные нагрузки JavaScript и CSS, что затрудняет улучшение одного опыта без ухудшения другого.

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

Gizmodo опубликовал более 24 000 страниц AMP и ежедневно получает 100 000 посещений этих страниц:

AMP помог сделать мобильные страницы Gizmodo в 3 раза быстрее, чем обычные мобильные веб-сайты, и более 80% трафика Gizmodo со страниц AMP — это новый трафик по сравнению с менее чем 50% всех мобильных сеансов.Кроме того, у блога на 50% больше показов на просмотр страницы на AMP.

TransUnion увеличивает конверсию с помощью AMP

TransUnion столкнулся с проблемой медленной загрузки мобильных страниц, которая приводила к более высоким показателям отказов и более низким показателям конверсии для мобильных устройств по сравнению с показателями конверсии для настольных компьютеров. Агентство кредитной информации хотело создать лучший в своем классе мобильный веб-сайт на своей CMS, HP TeamSite, чтобы улучшить взаимодействие с пользователем и получить высокую рентабельность инвестиций.

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

Страницы AMP, загруженные за 1,6 секунды при подключении 3G, по сравнению со страницами без AMP, загруженными за 7,1 секунды. AMP-страницы TransUnion быстро начали приносить на 3% больше конверсий, показатель отказов снизился на 26%, а пользователи проводили на веб-сайте в 2,5 раза больше времени:

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

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

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

РАЗДЕЛ 5. Почему вам следует создавать целевые страницы AMP после клика

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

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

Чтобы мобильные пользователи не ограничивались просмотром веб-сайтов, в платформе AMP были введены целевые страницы AMP Ad, созданные после клика — страницы, созданные в AMP HTML, которые загружаются невероятно быстро, менее чем за одну секунду.

Ускоренная целевая страница после клика или (ALP) загружается быстро благодаря следующим методам оптимизации:

1. Предварительное подключение к целевой странице после клика: Типичные объявления не знают URL фактической целевой страницы после клика.Однако объявления, связанные с ALP, всегда знают URL, это инициирует запрос предварительного подключения к соответствующей целевой странице после клика, и страница загружается мгновенно.
2. Предварительная выборка целевых страниц после щелчка: Ресурсы, не требующие интенсивного использования ЦП, которые видны в первом окне просмотра целевой страницы после щелчка, загружаются до того, как пользователь нажимает на объявление, поэтому страница загружается мгновенно.
3. Использование Google Cache URL: при вводе канонического целевого URL для объявления сервер объявлений может переключить его на AMP-версию URL (с согласия трафик-менеджера) с помощью AMP URL API.Рекламный сервер также может встраивать код, необходимый креативу для упреждающей выборки и предварительного подключения к целевой странице после клика. Рекламные серверы, такие как DoubleClick for Publishers (DFP), интегрируют такие функции в течение следующих нескольких кварталов, чтобы упростить передачу целевых страниц AMP после клика.
4. Без переадресации: AMP исключает переадресацию на сервер объявлений, AMP инициирует запросы переадресации только после того, как пользователь попал на целевую страницу после клика. Формат поддерживает компонент amp-pixel для сторонних перенаправлений отслеживания, которые могут выполняться на целевой странице после клика.

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

Вот как целевые страницы AMP-рекламы после клика по сравнению с обычными целевыми страницами после клика:

Это то, насколько быстро ALP загружается после нажатия на объявление, не только это, но и пользователь может легко вернуться к содержанию, которое он читал до того, как нажал на объявление:

Ускоренные целевые страницы после клика дают посетителям более качественную целевую страницу после клика, потому что:

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

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

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

Компании, использующие AMP-страницы, уже демонстрируют высокую рентабельность инвестиций, так что же мешает вам создавать ускоренные целевые страницы после клика?

Как создавать AMP-страницы с Instapage

В феврале 2018 года мы объявили о нашем партнерстве с Google по разработке функциональности ускоренных мобильных страниц (AMP) на платформе Instapage.Они пригласили нас выступить на их глобальной конференции AMP, где мы обсудили, как сбалансировать ограничения AMP с функциями оптимизации.

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

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

Шаг 1. Создайте новую страницу

Выберите страницу AMP из модального окна:

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

Шаг 2: Добавьте элементы на страницу

Второе отличие, которое вы заметите, заключается в том, что виджеты Timer и HTML отсутствуют на панели инструментов, но у вас все еще есть оставшиеся виджеты:

AMP не поддерживает HTML / CSS или JavaScript, поэтому вы не найдете эти настройки в конструкторе Instapage AMP.Однако вы по-прежнему будете видеть эти параметры:

Примечание. Совместная работа («Комментарий») и Instablocks ™ работают в конструкторе AMP. К сожалению, тепловые карты и глобальные блоки не применимы.

У целевых страниц

AMP после клика есть ограничение в 75 КБ, и каждый виджет в конструкторе Instapage AMP имеет вес. Когда вы создаете страницу, валидатор работает в фоновом режиме, чтобы ваша страница не превышала лимит в 75 КБ. При достижении 80% предела в нижней части экрана появляется этот предупреждающий индикатор:

Шаг 3. Создайте вариант A / B-теста

Нажмите «Создать A / B-тест» и добавьте новый вариант или импортируйте свой собственный:

С новым вариантом вы можете дублировать, приостанавливать, переименовывать, переносить или удалять его в любое время:

Шаг 4: Подтвердите страницу

По мере того, как вы продолжаете создание и приближаетесь к пределу 75 КБ, появляется другой индикатор, запрашивающий у вас проверку страницы, чтобы убедиться, что она находится в допустимых пределах:

Если страница прошла проверку, вы увидите это сообщение на экране:

После того, как вы закончите и нажмете «Опубликовать», вы получите уведомление, если вы превысите лимит в 75 КБ:

После проверки ваша страница готова к публикации.

Шаг 5. Опубликуйте

WordPress и пользовательские домены могут публиковать целевые страницы AMP после клика в Instapage. Вы можете выбрать любой метод после нажатия синей кнопки публикации:

Для WordPress: установите плагин Instapage и войдите в него на своем веб-сайте, а затем опубликуйте новую целевую страницу AMP после щелчка в WordPress:

В противном случае введите свой домен и субдомен:

Как только страница будет запущена, вы увидите логотип AMP рядом со страницей на панели инструментов:

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

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

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

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

Что вам нужно знать об ускоренных мобильных страницах (AMP)

Взгляды автора полностью принадлежат ему (за исключением маловероятного случая гипноза) и могут не всегда отражать взгляды Moz.

Возможно, вы слышали термин «AMP», который часто встречается в последнее время. Что такое ускоренные мобильные страницы, что они означают для поиска и как ко всему этому подготовиться? На этой неделе на доске British Whiteboard Friday Уилл Кричлоу и Том Энтони из Distilled изложили все важные детали.

Щелкните изображение доски выше, чтобы открыть версию с высоким разрешением в новой вкладке!

Транскрипция видео

Том: Привет, фанаты Moz, добро пожаловать на British Whiteboard Friday. Мы снимаем это в лондонском офисе Distilled. Это основатель и генеральный директор Уилл Кричлоу. Я Том Энтони, глава отдела исследований и разработок, и сегодня мы будем говорить об ускоренных мобильных страницах.
Буду…

Что такое ускоренная мобильная страница (сокращенно AMP)?

Уилл: Я рад, что ты спросил, Том.Итак, Accelerated Mobile Page (или сокращенно AMP) — это проект от Google и Twitter , предназначенный для создания действительно быстрых мобильных страниц. По сути, это упрощенная форма HTML , диетический HTML, если хотите. Том расскажет немного подробнее об этом.

Но по сути, это HTML-страница, очень легкая и очень быстрая загрузка. Так что Google, Twitter, множество других компаний развернули это — своего рода ответ на такие проекты, как проект Facebook Instant Articles от Facebook, Apple News и так далее.Это должно быть открытым ответом. Итак, это с открытым исходным кодом , и в проекте есть все виды элементов открытости.

Что делает AMP таким быстрым?

Том: Совершенно верно. Как сказал Уилл, это похоже на диетический HTML. Итак, определенных тегов HTML вы просто не можете использовать . Такие вещи, как формы, которые отсутствуют. Вам также необходимо использовать упрощенную версию CSS . Вы можете использовать большую часть CSS, но некоторые части подпадают под лучшие практики, и их просто нельзя использовать.Тогда JavaScript вообще не разрешен . Вы должны использовать готовую библиотеку JavaScript, которую они вам предоставляют, и которая обеспечивает такие вещи, как отложенная загрузка.

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

Уилл, ты расскажешь нам, как это работает?

Как это работает на вашем мобильном устройстве

Уилл: Да, это диаграмма, которая у нас посередине. Итак, мы все привыкли к этой идее обычной веб-страницы. Я назвал это WWW на схеме.Это обычная настольная версия страницы. В исходном коде, если у вас есть версия AMP, вы должны обозначить ее ссылкой rel AMP HTML, которая указывает на вашу, которую мы называем «размещенной страницей AMP».

Итак, это страница в вашем собственном домене, созданная из этой урезанной формы HTML . Так что, если вы хотите увидеть это в действии, я сослался на Guardian здесь. Они были одними из первых референтных партнеров. Вы можете поставить / amp в конце любой новости на веб-сайте Guardian и увидеть AMP HTML.Он связан на дисплее со ссылкой AMP HTML в исходном коде.

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

Итак, когда вы действительно видите эти вещи в результатах поиска Google, о которых мы поговорим чуть позже, версия, которая там появляется, обычно размещается на gstatic.com, другими словами, кэшированная версия, размещенная в Google. И, что критически важно, оба из них, и та, что вы размещаете сами, и версия, которая кэшируется в Интернете, возможно, даже другими людьми, обе будут содержать rel = canonical обратно к оригиналу. Это похоже. Это как альтернатива rel в мобильном мире.

Так что это быстро, потому что HTML урезан, но также потенциально спроектирован так, что эти вещи представляют собой фрагменты контента, которые могут быть кэшированы потенциально кем угодно, без ссылки rel = canonical, указывающей на вас.

Том: Думаю, стоит сказать, что даже на кешированных версиях страниц Google сказал, что вы все равно сможете размещать свои собственные рекламные объявления. Мы пока не знаем подробностей, но они создали платформу, на которой вы можете показывать рекламу от AdSense, Outbrain, большинства основных рекламных платформ, и вы все равно будете получать весь доход. Они не принимают ничего из этого.

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

Уилл: Да, это очень важно. Это часть той структуры JavaScript, о которой мы говорили, где вы получаете эти ограниченные контейнеры, которые представляют собой своего рода очень ограниченную функциональность JavaScript, которую вы можете использовать самостоятельно.

Влияние на поисковую выдачу

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

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

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

Мы ожидаем, что это скоро начнется. Последняя официальная строка Google — возможно, февраль 2016 года. . Но, так или иначе, мы ожидаем увидеть это в мире довольно скоро.

Так что его еще нет, но скоро будет.

Что мы можем сделать, чтобы подготовиться, Том?

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

Итак, чтобы проверить ваши AMP-страницы , вы фактически используете инструмент, встроенный в Chrome. Итак, если вы откроете инструменты разработчика в Chrome, там есть система — и вы можете найти ее на веб-сайте проекта AMP — где вы действительно можете перейти на страницу и попросить ее проверить: «Это страница AMP? «и сообщит о любых проблемах с этой страницей.

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

Уилл: А сейчас самое время сделать это, потому что присутствие на запуске — это время, чтобы получить определенный толчок, выгоду от того, когда эти вещи начнут разворачиваться. Так что это большая предыстория.

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

Том: Стоит сказать, что на данный момент вы, очевидно, увидите только демонстрационные результаты на этой странице. Так что вы можете только …

Будет: Да, и на мобильном устройстве.

Том: И на мобильном устройстве, да.

Уилл: А это оригинал, главная веб-страница проекта, где вы можете найти репозиторий кода GitHub, все подобные валидаторы и так далее, и мы написали еще кое-что здесь.Это ссылка на наш сайт.

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

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

Том: Пока.

Транскрипция видео от Speechpad.com

Дополнительная информация и ресурсы

• g.co/ampdemo — Демонстрация того, как AMP могут выглядеть в результатах поиска
• ampproject.org — главная веб-страница проекта, где вы найдете техническое введение, учебник, репозиторий GitHub и многое другое.
• dis.tl/amp-pages — Дополнительная информация об AMP и их работе

Что такое ускоренные мобильные страницы (AMP)?

Возможно, вы уже слышали о Facebook Instant Articles, которая позволяет издателям размещать контент в инфраструктуре Facebook таким образом, чтобы он загружался намного быстрее, чем эквивалентная веб-страница в стандартном мобильном браузере.Технология Facebook закрыта, но Google (и другие) создали более открытую структуру с аналогичными целями, названную проектом Accelerated Mobile Pages (AMP).

В самом простом виде AMP HTML — это подмножество HTML, в котором доступны только определенные «компоненты» JavaScript. Он предназначен для создания контента для чтения, а не для чего-либо интерактивного. Он уже разработан для включения рекламных блоков и будет иметь стандартизированный способ включения кода аналитики, но он резко ограничивает использование JavaScript.

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

@willcritchlow Только что заметил бит, кто-то действительно не смог устоять перед этим…

— Мэтт Раунд (@mattround) 7 октября 2015 г.

Ключевая цитата:

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

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

Вы можете посмотреть демонстрацию, перейдя по этой ссылке на своем телефоне, которая показывает:

Как AMP выглядит в поиске Google.

Страницы AMP вверху кэшируются на gstatic URL (например: https://amp.gstatic.com/v/mobile.nytimes.com/2015/10/07/us/politics/hillary-clintons-proposed-changes -to-health-law-zero-in-on-availability.amp.html? amp_js_v = 0). Эта страница NYT выглядит так на мобильном устройстве (хотя работает на настольном или мобильном устройстве):

Как будет выглядеть статья, использующая AMP.

Вы можете использовать Chrome для рабочего стола, чтобы вникнуть в это / изучить закулисье и т. Д., Эмулируя мобильный браузер — взгляните на мою колоду SearchLove из Лондона 2014, чтобы узнать, как:

Дополнительную информацию можно найти на собственной странице часто задаваемых вопросов AMP.

Первые мысли

Очевидно, будет «какой-то способ» канонизировать все это (я предполагаю: rel = canonical), чтобы у вас могли быть как обычные страницы, так и AMP-версии этих страниц.

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

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

Это интересный материал, и я действительно хочу услышать ваше раннее мнение об AMP.Присоединяйтесь ко мне в твиттере (@willcritchlow):

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

— Уилл Кричлоу (@willcritchlow) 7 октября 2015 г.

Inside Google планирует сделать всю сеть такой же быстрой, как AMP

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

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

Если вы не знакомы, AMP — это попытка Google сделать веб-страницы такими же быстрыми и портативными, как и другие «мгновенные статьи» (например, то, что вы могли бы прочитать в Facebook или Apple News). Идея состоит в том, что, когда вы нажимаете ссылку на этих других платформах, вам не нужно ждать загрузки статьи, потому что она уже предварительно загружена в приложение. Цель AMP — обеспечить такую ​​же производительность в Интернете.

Google зашёл прямо в центр зарослей

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

Все это беспокойство метастазировало за последние несколько месяцев с широко распространенным открытым письмом в Google с просьбой исправить AMP, большим количеством сообщений в блогах Medium, чем можно прочитать за неделю, скринами в Twitter и аргументами в комментариях на собственном GitHub AMP. репозиторий кода. И это только материалы от веб-разработчиков.(У меня есть папка закладок, которую я называю «AMPhole», чтобы не отставать, и эта дыра становится все глубже почти с каждым днем.)

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

«Мы не изобрели AMP, потому что хотели все контролировать, как думают люди», — говорит он.Вместо этого, утверждает он, вернитесь назад и посмотрите, насколько ужасным было состояние мобильного Интернета несколько лет назад, до появления AMP. Это отстой — на самом деле, Нилай Патель опубликовал на этом же сайте статью под названием «Мобильный интернет — отстой» в 2015 году. Он был прав. Apple и Facebook решили эту проблему, создав проприетарные форматы, а затем убедили издателей распространять свои новости в этих форматах на своих платформах. Как писал Нилай:

Взятые вместе, Apple News и Facebook Instant Articles — самое печальное опровержение революции открытого Интернета: это несовместимые проприетарные издательские системы, полностью находящиеся под контролем огромных корпораций, ни одна из которых не разбирается в издательском деле или СМИ.

Besbris видел то же самое: «Тенденцией в отрасли в то время был простой способ решения этих проблем, при котором вы гарантировали, что можете контролировать опыт… но это происходит за счет Интернета». Таким образом, решением Google был AMP, фреймворк, который был разработан, чтобы сделать Интернет таким же хорошим, как и эти платформы, чтобы у Интернета был шанс конкурировать с Apple и Facebook.

Несмотря на все свои недостатки, AMP — очень умная разработка.

Чтобы сделать веб-страницы мгновенными и переносными, потребовался очень умный — и очень громоздкий — прием.

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

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

«Нам нужен автомобиль, чтобы разобраться в этом».

«Раньше считалось, что Интернет не может делать ничего из этого», — говорит Бесбрис. Убл и его команда придумали комбинацию технологий, которая сделала это возможным, но для этого требовалась технология, которая в настоящий момент не встроена в Интернет.Таким образом, перед Google стоял выбор: не торопиться, чтобы попытаться убедить орган веб-стандартов принять его, а производителей браузеров поддержать его, или просто выпустить его в мир как проект, в основном поддерживаемый Google, в отношении собственных продуктов Google, в первую очередь поиск.

«Нам нужен автомобиль, чтобы разобраться в этом. Вы не можете просто узнать это, не попробовав, — утверждает Бесбрис. Google должен был доказать, что Интернет может быть не хуже Instant Articles. Что еще более важно, он должен был стать таким же быстрым — прежде, чем люди отказались от него в пользу миллиона различных пользовательских приложений и форматов статей.Бесбрис говорит, что Google не мог дождаться, пока комитеты, которые помогают создавать веб-стандарты, сделают это. «Если вы начнете с того, что попробуете все в процессе стандартизации, мы все равно будем об этом говорить», — утверждает он.

Считается ли AMP «Интернетом» на самом деле является одним из спорных вопросов, хотя, как и следовало ожидать, Besbris и Ubl твердо убеждены в этом и приводят веские аргументы в пользу этого. Они утверждают, что для ускоренных мобильных страниц не обязательно использовать серверы Google или показывать рекламу Google; они могут публиковаться и распространяться полностью независимо от Google.

Независимо от того, что думают инженеры Google, за пределами Маунтин-Вью AMP гораздо сильнее ассоциируется с Google, чем с Интернетом, даже несмотря на то, что он был принят Bing, Twitter, Baidu и другими. Частично проблема в том, что AMP был реакцией Google на Facebook и Apple, поэтому он попал в простую цепочку «проприетарных форматов статей». Но в основном это то, что Google огромен и сильно продвинул AMP, выпустив свой самый большой продукт: поиск. Издатели, поддерживающие AMP, появляются в карусели главных новостей Google, что означает поток трафика.Это огромный стимул для поддержки AMP.

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

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

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

Google не слепой: он знает, что другие компании вряд ли станут использовать AMP в качестве универсального решения для исправления проблем в Интернете.Хотя Убл с радостью расскажет, сколько не-гуглеров вносят свой вклад в код AMP, в конце концов, он работает в Google и является BDFL (Доброжелательный диктатор на всю жизнь) в проекте AMP. Новые стандарты, многие из которых уже находятся в разработке, кажутся действительно полезными для Интернета. Но что не менее важно, они с большей вероятностью будут приняты конкурирующими компаниями, если будут рассматриваться как фундаментальные новые веб-технологии, а не просто проект Google.

Google считает, что AMP может указать путь к более быстрому и менее раздражающему мобильному Интернету

«Мы всегда стремились перенести AMP — извлечь положительные моменты и уроки, извлеченные из создания AMP — на путь стандартов», — говорит Бесбрис.

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

Цель Google — расширить поддержку таких функций, как карусель Top Stories, до AMP-подобного контента, который (1) соответствует набору критериев производительности и взаимодействия с пользователем и (2) реализует набор новых веб-стандартов.Некоторые из предлагаемых стандартов для критического пути — это политика функций, веб-упаковка, продвижение iframe, временная шкала производительности и время отрисовки.

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

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

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

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

Окончательная доработка этих новых веб-стандартов займет некоторое время

После того, как эти стандарты будут согласованы и внедрены, любая страница, которая им соответствует, может появиться в карусели главных новостей, в ленте новостей Google на Android и даже получить тот же маленький синий значок в виде молнии, который появляется рядом с результатами, поддерживаемыми AMP в поиск.Однако этим страницам не будет гарантировано лучшее размещение в результатах поиска — точно так же, как AMP не гарантирует размещение в поиске сегодня. «То, что вам нужно делать, чтобы занять высокое место в поиске, будет и дальше, и мы продолжим не рассказывать вам, что это такое», — шутит Бесбрис.

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

Вот как Besbris подводит итоги сегодняшних новостей:

Цель состоит в том, чтобы лучше сообщать о наших намерениях. Мы всегда хотели [сделать технологию AMP веб-стандартом] и всегда говорили об этом, но не очень четко. … Мы просто хотим очень четко заявить, что AMP — это не что иное, как попытка сделать Интернет лучше.Уроки, извлеченные из AMP, помещаются в стандартные тела, поэтому мы можем сделать так, чтобы другие фреймворки также реализовали те же вещи.

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

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

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

«Да», — отвечает он.

Определение ускоренных мобильных страниц — SEO-глоссарий

Почему AMP?

По количеству поисковых запросов с мобильных устройств больше, чем с компьютеров. Платформа с открытым исходным кодом, получившая название «Ускоренные мобильные страницы» (AMP), была создана с одной главной целью: сократить время загрузки для мобильных пользователей. Это было реакцией на растущий спрос на короткое время загрузки — вопрос, который неоднократно поднимался издателями и предприятиями.

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

Как развивался проект AMP

«Проект ускоренных мобильных страниц» был запущен в 2015 году группой компаний, включая Google, WordPress и софтверного гиганта Adobe. С самого начала несколько международных новостных порталов также участвовали в проекте AMP, при этом одними из первых веб-сайтов, реализующих AMP, были The Guardian (Великобритания), The Washington Post и Buzzfeed (США), Frankfurter Allgemeine Zeitung и Die Zeit (Германия). ) и Эль-Паис (Испания).Twitter и LinkedIn также были вовлечены в AMP с самого начала в качестве технологических партнеров.

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

Почему AMP — хорошая идея

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

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

Проблема: Интернет… сайты… которые… загружаются… слишком… медленно… ly

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

Решение: AMP

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

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

Исходный код AMP

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

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

Какие изменения необходимо внести в код HTML для реализации AMP?

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

Кроме того, на каждой странице должны быть включены следующие теги, чтобы ее можно было правильно отображать с помощью AMP:

• Тип документа:
• Тег верхнего уровня: tag или
• Теги и
• Канонический тег в заголовке:
• Кодировка:
  в заголовке
• Область просмотра:
• Ссылка на AMP CDN:
• Примечание о непрозрачности:

Преимущества AMP для различных групп заинтересованных сторон

Как упоминалось выше, AMP был запущен с большой целью принести пользу всем: рекламодателям, издателям и пользователям.

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

AMP и индекс Mobile-First

AMP — это всего лишь один из подходов к оптимизации веб-сайтов для мобильных устройств. Осведомленность о важности мобильной оптимизации — не только среди SEO-сообщества — выросла, особенно после выпуска Google Update в 2015 году, который был специально нацелен на повышение удобства использования веб-сайтов для мобильных устройств.С тех пор поисковая система Google пошла дальше в направлении подхода, ориентированного на мобильные устройства, объявив, что ее мобильный индекс — в какой-то момент — станет основным индексом для результатов поиска Google. Это только повысит важность AMP.

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

Представляем проект Accelerated Mobile Pages для более быстрого и открытого мобильного Интернета

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

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

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

Со временем мы ожидаем, что другие продукты Google, такие как Новости Google, также будут интегрировать HTML-страницы AMP.И сегодня мы объявляем, что в нем также принимают участие около 30 издателей со всего мира.

Это начало увлекательного сотрудничества с издателями и технологическими компаниями, которые объединились, чтобы сделать мобильный Интернет лучше для всех. Twitter, Pinterest, WordPress.com, Chartbeat, Parse.ly, Adobe Analytics и LinkedIn — одни из первых технологических партнеров, планирующих интегрировать HTML-страницы AMP.

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

• Контент: Издатели все больше полагаются на богатый контент, такой как карусели изображений, карты, социальные сети -ins, визуализации данных и видео, чтобы сделать их истории более интерактивными и яркими.Им также необходимо внедрить рекламу и аналитику, чтобы монетизировать контент и понимать, что нравится и что не нравится их читателям. Проект Accelerated Mobile Pages предлагает подход с открытым исходным кодом, позволяющий издателям сосредоточиться на создании качественного контента, полагаясь на общие компоненты для обеспечения высокой производительности и удобного взаимодействия с пользователем. Первоначальная техническая спецификация, разработанная с использованием ввода и кода наших партнеров в издательском и технологическом секторах, публикуется сегодня на GitHub.
• Распространение: Издатели хотят, чтобы люди наслаждались великолепной журналистикой, которую они создают где угодно и где угодно, чтобы истории или контент, созданные в Испании, можно было мгновенно передать по всему миру, например, в Чили. Это означает, что распространение на всех типах устройств и платформ имеет решающее значение. Поэтому в рамках этих усилий мы разработали новый подход к кэшированию, который позволяет издателю продолжать размещать свой контент, обеспечивая при этом эффективное распространение через высокопроизводительный глобальный кеш Google.Мы намерены открыть наши кеш-серверы для бесплатного использования кем-либо.
• Реклама: Реклама помогает финансировать бесплатные услуги и контент в Интернете. С помощью Accelerated Mobile Pages мы хотим поддерживать широкий спектр рекламных форматов, рекламных сетей и технологий.