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

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

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

Здание для мобильной аудитории

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

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

Ключевые различия между AMP и адаптивным веб-дизайном

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

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

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

  • Ленивая загрузка
  • Использование предварительного подключения
  • Предварительная загрузка ресурсов
  • Асинхронный Javascript
  • Встроенные таблицы стилей
  • Нет загружаемых шрифтов
  • Приоритизация ресурсов

Это лишь некоторые из принципов, которые заставляют AMP загружаться так быстро. Тем не менее, в этом списке также есть некоторые пункты, которые могут заставить давних веб-профессионалов съежиться. Встроенные таблицы стилей, например. В течение многих лет многим из нас говорили, что все стили должны содержаться во внешних таблицах стилей. Возможность стилизовать множество страниц сайта на одном внешнем листе — одна из сильных сторон CSS — сила, которая сводится на нет, если страницы используют вместо этого встроенные стили. Да, вы избавляете от необходимости загружать внешний файл, но за счет возможности управлять всем этим сайтом с помощью единой таблицы стилей. Так какой подход лучше? Реальность такова, что у них обоих есть свои преимущества и недостатки. Сеть постоянно меняется, и у разных людей, которые посещают ваш сайт, разные потребности. Очень трудно установить правила, которые будут применяться во всех случаях, потому что разные подходы имеют смысл в разных ситуациях. Главное — взвесить преимущества или недостатки каждого подхода, чтобы определить, какой из них лучше всего подходит для вашего конкретного случая.

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

Javascript Соображения

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

Выбор правильного решения

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

Ссылка на основную публикацию