AMP’ing Up AMP Framework

Константин Сохан, директор по дизайну и Дэвид Тапп, клиент-партнер, MetaLab

TL; DR - мы путешествовали в мир AMP и изучили некоторые вещи

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

Что такое AMP?

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

Видя обе стороны

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

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

Не позволяйте имени обмануть вас

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

Краткое

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

Что мы построили и почему

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

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

Дизайн для художественной галереи AMP Site

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

Дизайн для бронирования путешествий AMP Site

Для кого AMP?

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

Живем ли мы в будущем?

Не совсем, но прогрессировать ежедневно! Сайты AMP, найденные в сети сегодня, по-прежнему в основном носят медиа, новости и редакционный контент (на данный момент). Преимущества очевидны, поскольку построение на AMP обеспечивает серьезное повышение производительности и возможности обнаружения. Является ли AMP и его стремления будущим всей сети? Может быть. Возможно, нет. Одно можно сказать наверняка, знания и лучшие практики, которые помогает создать структура, определенно здесь, чтобы остаться. AMP также внедряет новейшие и лучшие в сети в режиме реального времени с развертыванием своих функций. Его сообщество разработчиков постоянно стремится идти в ногу с новыми тенденциями; заблаговременно извлекать из Интернета новые функциональные возможности и делиться ими с вами сегодня.

Уроки развития на основе наших уроков от AMP

Что касается разработки в рамках AMP, мы узнали некоторые вещи, которые, как мы думали, были бы полезны. Известные идеи ниже:

  1. AMP запрещает пользовательский JavaScript за пределами iframe, заставляя вас полагаться на его библиотеку оптимизированного кода. Это сделано для того, чтобы ни один плохо оптимизированный или злонамеренный код не имел возможности мешать работе пользователя. Мы замечаем, что многие, в противном случае, хорошо построенные сайты могут замедляться из-за включения мегабайт рекламных и отслеживающих скриптов. Важность оптимизации и тщательной проверки любого кода JavaScript, включенного в ваш сайт, очень важна для AMP.
  2. AMP отдает приоритет контенту, который виден пользователю. Он знает, какой контент находится ниже сгиба, и откладывает его загрузку или рендеринг до тех пор, пока он не понадобится. Посетителям страниц AMP никогда не придется ждать, поскольку все загружаемые изображения и реклама блокируют их доступ к странице. Кроме того, если посетитель никогда не решит прокрутить вниз, ни одна из его мобильных данных не будет потрачена впустую, загружая контент, который никогда не будет виден.
  3. AMP решил «загрузить мусор». На странице AMP каждый элемент должен иметь детерминированную известную высоту, будь то реклама, изображение или видео, или абзац текста. Вы никогда не будете испытывать смещение контента на экране, так как элементы выше загружаются.
  4. Эффективность рекламы: AMP устанавливает новую планку интеграции рекламы на сайтах. Объявления должны правильно отображаться на странице и соответствовать оптимальному пользовательскому интерфейсу. До свидания полноэкранные захваты и другой неприятный контент, который вы не хотите на странице. AMP обеспечивает, чтобы реклама вела себя как хорошие граждане.

В заключение

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