Что такое AMP (Accelerated Mobile Pages) — Ускоренные Мобильные Cтраницы

 In SEO оптимизация, Веб технологии и сайты, Статьи
Ч

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

 

AMP — Accelerated Mobile Pages:  Ускоренные Мобильные страницы

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

По статистики Google и Facebook, однако, есть много пользователей в мире, где мобильный интернет не такой уж быстрый (например, 3G, GPRS). Из-за этой причины  эти два гиганта начали принимать меры по обеспечению «лучшего опыта» для пользователей с медленным соединением к сети Интернет. Большинство людей, особенно не в странах первой десятки, до сих пор не используют быстрые сети 4G, LTE или Wi-Fi.

Компания Google таким образом, запустила открытый проект AMP для мобильных устройств с медленным доступом в Интернет. Все дело в том, что веб-сайты становятся более сложными и «тяжелыми», и существует тенденция — постоянно растущий объем контента для мобильных  устройств.

ЧТО же такое AMP?

Ускоренные Мобильные страницы (AMP) – это просто говоря, в основном HTML с расширениями и некоторыми элементами/блоками кастомных страниц  для мобильных сайтов. Есть определенные теги, которые вы можете и должны использовать при разработке сайтов, и есть те (классические), которые вы не можете использовать с AMP. Так, например, тег IMG (изображение) станет в этом случае AMP-IMG, видео заменяется новым AMP тегом и т.д. Даже если это накладывает определенные ограничения для разработчиков, это сулит большие преимущества в плане скорости и продвижения сайта (помогает с SEO).

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

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

ИСПОЛЬЗОВАНИЕ AMP-JS И AMP CDN совместно с AMP HTML

JavaScript (JS) является настолько мощным инструментов, что он может изменить практически любой аспект страницы, но приходится считаться с неутешительным фактом, что он может задерживать (замедлять) рендеринг страниц вебсайта, блокируя блоки DOM. Новая технология AMP-JS обеспечивает более быстрый рендеринг страниц, предполагая использование AMP-тегов (как упоминалось в выше). Теги IMG, video, audio и iframe заменяются на amp-img, amp-video, amp-audio и amp-iframe соответственно.

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

Для сайтов с использованием WordPress и других CMS — как создать AMP HTML?

Первое решение. Используйте AMP плагин! Например, https://wordpress.org/plugins/amp/

Исследования показывают, что более 50% людей отказаться от веб-сайтов, если страница/ы не загружаются в течение 3-4 секунд. Это плохой знак для бизнеса – так как это потенциально потерянные клиенты или даже косвенные потери дохода (особенно для компаний и бизнеса, напрямую зависящего от веб-сайтов и/или поисковых систем).

«Но я сделал свой сайт адаптивным, поэтому он должен хорошо загружаться!» Да, но…

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

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

Перспективы и сложности AMP

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

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

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

Дополнения – рекомендации от Google:

Рекомендации от Google по созданию AMP ускоренных мобильных страниц

Как обеспечить корректный показ ускоренных мобильных страниц в результатах Google Поиска?

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

Google дает рекомендации по оптимизации сайтов  — они относятся и к технологии AMP. А в во второй части этой статьи мы дадим советы по созданию таких страниц:

 

Как 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, а лишние запросы удаляются из критического пути рендеринга для большинства веб-страниц.

Website-development-company

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

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

Система 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

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

Recent Posts

Leave a Comment

Start typing and press Enter to search

Яндекс Директ и Adwords как сделать эффективноPMS системы управления отелем и номерным фондом