Что такое AMP (Accelerated Mobile Pages) — Ускоренные Мобильные Cтраницы
ЧТО такое 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.
- Видимость. Сделайте страницы видимыми для пользователей.
- Проверка. Узнайте, правильно ли созданы страницы.
- Структурированные данные. Разметьте содержание страниц.
- Статус. Отслеживайте эффективность страниц с помощью Search Console.
Как 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
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.