Россия+7 (495) 960-65-87

Мобильные страницы с ускоренной загрузкой: из чего они сделаны и зачем нужны?

Россия+7 (495) 960-65-87
Шрифт:
7 17006

Уже совсем скоро, в начале февраля, Google запустит проект AMP (Accelerated Mobile Pages). И пока все прогрессивное человечество готовится к этому, редакция SEOnews решила подробно разобраться, в чем особенность этой технологии, как она работает и, главное, какие фишки уже приготовил Google для своего нового детища.

Из чего сделаны AMP

AMP (Accelerated Mobile Pages) – мобильные страницы ускоренной загрузки – были анонсированы командой Google в начале октября 2015 года. По сути, это новый единый формат облегченной загрузки текстовых материалов на мобильных устройствах.

Функционально AMP состоит из трех частей:

  • AMP HTML
  • AMP JS
  • AMP CDN

AMP HTML – это обычный HTML с рядом ограничений для более надежной работы и некоторыми расширениями для создания медийного контента.

amp html.PNG

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

  • amp-ad – отвечает за рекламу. 
  • amp-img – альтернатива тега img.
  • amp-pixel – счетчик посещений.
  • amp-video – альтернатива тега HTML5 video.

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

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

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

В CDN AMP есть встроенная система проверки, подтверждающая работоспособность страниц и их соответствие AMP HTML.

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

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


Зачем нужны AMP

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

В официальном релизе сказано:

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

На самом деле проект должен закрыть несколько разноплановых задач:

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


Что уже готово

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


Судя по всему, Google серьезно настроен относительно своего нового проекта. За прошедшие 4 месяца с анонса AMP представители компании уже успели разослать рекомендации по использованию нового формата в Search Console и объявить о:

  • Добавлении свойств для AMP в документацию по разметке статей. С декабря прошлого года в документации по созданию расширенных сниппетов для страниц статьей появилась дополнительная информация, касающаяся страниц с ускоренной загрузкой.
  • Необходимости использования на AM-страницах атрибута rel=canonical. rel=caconical, указывающий на страницу веб-версии сайта, поможет избежать проблем с дублированием контента.
  • Специальном отчете об ошибках в Search Console. С его помощью издатели, работающие с AMP, смогут мониторить общую ситуацию на сайте и быстрее узнать об ошибках на страницах и переходить к их решению.
  • Запуске аналитического компонента для AMP. Издатели смогут измерять показатели на страницах с ускоренной загрузкой с помощью Google Analytics.
  • Поддержке рекламных форматов. По словам руководителя рекламного направления Google Шридхара Рамасвами, на AMP уже тестируются разнообразные форматы рекламы, в том числе и нативной, и со временем их число будет расти. На сегодняшний день среди рекламных провайдеров AMP – AOL, AdSense, DoubleClick, Kargo, OpenX, OutBrain и др.

В заключение

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

О своем опыте работы с AMP пишите в комментариях или на почту редактору: darya@seonews.ru

(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Гость
    больше года назад
    Подскажите пожалуйста, установил счетчик ливинтернет как сказано тут wfi.lomasm.ru/%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9.wfi_%D0%B2_%D0%BD%D0%BE%D0%B3%D1%83_%D1%81%D0%BE_%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%B5%D0%BC/%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%...
    Подскажите пожалуйста, установил счетчик ливинтернет как сказано тут wfi.lomasm.ru/%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9.wfi_%D0%B2_%D0%BD%D0%BE%D0%B3%D1%83_%D1%81%D0%BE_%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%B5%D0%BC/%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8_wfi_%D0%B8_accelerated_mobile_pages
    но не нахожу ни каких данных в статистике, на странице ошибок нет, и сам счетчик не отображается(
    -
    0
    +
    Ответить
  • Гостьгость
    больше года назад
    Видео Студера поправьте. В статье просто код.
    -
    0
    +
    Ответить
  • Skarui
    96
    комментариев
    0
    читателей
    Skarui
    больше года назад
    ReatcJS или MeteorJS решат проблему
    -
    -3
    +
    Ответить
  • Гость
    больше года назад
    Просто задолбали, и так сайты делать сложно, они теперь ещё второй html решили придумать!
    -
    1
    +
    Ответить
    • Гость
      больше года назад
      Тесты показывают неплохие результаты, но пока все сырое. Имхо, на этом стоит заморачиваться если это прочно войдет в обиход как например адаптивная/мобильная верстка.
      -
      3
      +
      Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
Светлана Зубрицкая
1
комментарий
0
читателей
Полный профиль
Светлана Зубрицкая - Нужно убрать пробелы между строк и заменить кавычки на вот такие "
#SEOnews14: мы празднуем – вы получаете подарки!
Rizat Sundetov
1
комментарий
0
читателей
Полный профиль
Rizat Sundetov - 14
Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
Георгий
1
комментарий
0
читателей
Полный профиль
Георгий - Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html, оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
Война с дубликатами. Как нужно и как не нужно канонизировать URL
Ann Yaroshenko
5
комментариев
0
читателей
Полный профиль
Ann Yaroshenko - Дмитрий, добрый день! Если вы проставили на странице с автозапчастями rel=canonical ( а я вижу в коде, что не проставили) или в HTTP хедере, то бот, как правило: выберит ту страницу главной, которую вы указали в rel=canonical ссылке. Eсли же вы этого не сделали, то бот сам выберит оригинал (алгоритмы, по которым бот это делает, скрыты Googl-ом)
«Аудит, чтобы ты заплакала…», или Что делать, когда получил сторонний аудит сайта
TehotdelSamara@gmail.com
4
комментария
0
читателей
Полный профиль
TehotdelSamara@gmail.com - Артур! Задели своим комментарием "за живое") Абсолютно,... целиком.... и полностью согласны с вами! А именно, с тем, что продажи клиента зависят в первую очередь от клиента, перечисленных вами выше и других факторов! А ещё с тем, что чистое SEO в классическом его понимании зачастую уже не даёт результата в виде роста продаж. Если хотим увеличить продажи - нужно бить по всем фронтам, SEO - только один из них, об этом клиент должен знать и быть предупреждён... Касательно нашей рекомендации смотреть на эффективность по тому, увеличилось ли число и качество заказов или нет - в контексте данной статьи говорится о том, что SEO бывает разное. По большому счёту, результат SEO — это именно привлекаемый поисковый трафик. И этот трафик может быть качественным, целевым или нет. Кроме того, трафик должен расти. Мы говорим о том, что если специалист хорошо проработал семантику, изучил бизнес клиента, исключил фразы с околонулевым спросом и проч., то трафик должен быть целевым, растущим, что значит рост обращений в отдел продаж клиента !при условии! , что само предложение и сайт располагают к тому, чтобы обратиться в отдел продаж клиента. Действительно, современное SEO предполагает учёт значительного количества факторов, в том числе и коммерческих. Без этого и трафика зачастую не будет. Нужно доносить всё это до клиента, включать подобные работы в стоимость по SEO или отдельно. А с "хочу все подряд за 25к в месяц" мы сталкиваемся тоже. Тут только пояснять и подсказывать, давать рекомендации заранее, чтобы клиент заранее был предупреждён о том, что ему требуется сделать параллельно с нашими работами по SEO. И в итоге вся эта деятельность должна привести к росту целевого трафика как на сайт, так и в отдел продаж.
BDD 2019: Как перестать убивать время на сбор и обработку тонны данных для SEO-аудита
Feth
1
комментарий
0
читателей
Полный профиль
Feth - Тот момент, когда от статьи в интернете получаешь больше полезных знаний и навыков, чем от своего начальства. По статьям нетпиковцев можно учебник про SEO уже сшивать, ребята молодцы. Спасибо, что делитесь информацией.
Как вывести сайт в ТОП 10 Google в 2019 году
Анна Макарова
356
комментариев
0
читателей
Полный профиль
Анна Макарова - Сергей, в нашей отрасли много заимствований из английского, иногда с ними быстрее, проще .Но будем стараться ))
Как улучшить репутацию сайта недвижимости с помощью крауд-маркетинга
Евгений
2
комментария
0
читателей
Полный профиль
Евгений - а у вас какое впечатление от статьи?
Как построить качественный ссылочный профиль на основе конкурентов
Ирина
7
комментариев
0
читателей
Полный профиль
Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
Как я пытался купить CRM-систему, но мне ее поленились продать
Kristina
1
комментарий
0
читателей
Полный профиль
Kristina - Очень рекомендую CRM-систему польской фирмы Firmao. Все функции настраиваются в соответствии с индивидуальным потребностям компании! Советую попробовать бесплатную демо-версию, чтобы попробовать все необходимые функции, без лишних кнопок и траты дополнительных финансов! :) Сайт: firmao.ru/info
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
356
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
105
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
69
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

Отправьте отзыв!
Отправьте отзыв!