Следующая статья поможет вам: Google AMP поможет вам создать потрясающие веб-сайты. Вот как.
Ранее сегодня я узнал о типе страниц, которые будут загружаться «почти мгновенно». Что ж, с таким рэпом я должен был проверить это на себе. Итак, я пошел в Вкусный, кулинарный веб-сайт, на моем рабочем столе и на моем телефоне, чтобы проверить время загрузки для каждого. Домашняя страница обоих загружалась и отображалась за одну секунду. Это было впечатляюще.
Сравнивая домашнюю страницу для мобильных устройств и домашнюю страницу для настольных компьютеров, я увидел, что изображения и макеты были идеально оптимизированы. Это отметило еще один пункт в моем списке.
И, наконец, когда я нажал на рецепт, меня встретило демонстрационное видео в отличном качестве. Это было неожиданно и очень приятно. Это был момент, когда я рассматривал Google AMP как отличный инструмент для сложных, привлекательных веб-сайтов.
Страницы Google AMP могут помочь вам в разработке страниц электронной коммерции, привлекательных рекламных объявлений и захватывающих мобильных приложений благодаря размещению страниц, которые загружаются практически мгновенно. Например, Gizmodo нашел их страницы загружается в три раза быстрее и Mashable увидел 200% увеличение среднего CTR.
Как пользователь, мой опыт работы со страницами Google AMP был впечатляющим. Итак, давайте углубимся в AMP: как они работают, что они из себя представляют, почему они великолепны для бизнеса и как вы можете создать свой собственный.
В отличие от других AMP, Google интегрируется со многими каналами веб-сайта, такими как поиск, кэш AMP и аналитика. Помимо возможности интеграции с каналами Google, вы можете монетизировать структуру AMP HTML с помощью набора объявлений Google (Ads, AdSense и AdManager).
AMP — отличный выбор для улучшения основных бизнес-показателей, таких как количество конверсий на веб-страницах. AMP-страницы загружаются почти мгновенно на всех устройствах. AMP также позволяет преобразовать весь архив веб-сайта за несколько дней, если вы используете популярную CMS, такую как WordPress или HubSpot.
Еще одним большим преимуществом для компаний, использующих Google AMP, является то, что платформа AMP используется популярными глобальными сайтами, такими как Bing и Twitter и позволяет вам создать плавный, нативный опыт. По сути, если на вашем сайте AMP есть ссылка на Twitterнапример, твит будет встроен в вашу веб-страницу, и пользователям не нужно будет уходить, чтобы увидеть твит.
Теперь, когда мы рассмотрели основное определение AMP и то, почему он отлично подходит для бизнеса, давайте более подробно рассмотрим, как работает AMP.
Как работает Google AMP
В этом разделе я расскажу о том, как страницы AMP загружаются так быстро. Всего есть семь причин, и вы можете найти объяснение на этой странице, загруженной Разработчик Google AMP.
1. AMP-страницы загружают все содержимое страницы сразу.
AMP заставляет все компоненты веб-страницы загружаться одновременно. Это отличается от функции веб-страницы без AMP, когда активы загружаются один за другим. Страницы AMP не позволяют использовать какой-либо пользовательский JavaScript, который может прервать одновременную загрузку.
AMP использует iFrames, которые не блокируют отрисовку главной страницы и разрешают только асинхронный JavaScript. AMP может иметь некоторый JavaScript в фоновом режиме, но они разработаны очень тщательно, чтобы убедиться, что они не снижают производительность.
2. Макет AMP-страниц заранее известен браузерам.
На странице без AMP веб-браузер, такой как Google или Firefox, не знает всех компонентов веб-страницы, пока она не будет полностью загружена. В AMP все внешние изображения или фреймы сайта должны указывать свой размер в HTML. Это делается для того, чтобы браузер знал, сколько он будет загружаться, прежде чем начнется загрузка.
Это позволяет AMP загружать все содержимое страницы, не дожидаясь загрузки других элементов или ресурсов. Это называется «статическим макетом» и является важным элементом AMP.
3. CSS встроен и ограничен по размеру.
На страницах AMP требуется только одна таблица стилей: встроенная. Это удаляет несколько HTTP-запросов из пути рендеринга. HTTP предназначен для обеспечения связи между веб-браузерами и серверами.
Удаление нескольких HTTP-запросов оптимизирует взаимодействие браузеров и серверов, необходимых для полной загрузки страницы. Кроме того, встроенные таблицы стилей имеют максимальный объем данных (50 килобайт), что позволяет создавать сложный контент, но достаточно простой, чтобы соответствовать правилам CSS.
4. Веб-шрифты очень большие, поэтому AMP-страницы загружают их в первую очередь.
Оптимизация шрифтов, используемых на веб-страницах, является важным элементом производительности страницы. На веб-странице без AMP с несколькими сценариями и таблицами стилей браузер должен дождаться их загрузки, прежде чем загружать шрифты.
AMP не требует запуска HTTP-запросов до начала загрузки шрифтов. Это возможно по причинам один и два. Таким образом, с AMP нет связи HTTP, блокирующей браузер от загрузки шрифтов.
5. Страницы AMP сводят к минимуму пересчет стиля и макета.
Каждый раз, когда что-то на странице изменяется, браузеру приходится пересчитывать загрузку страницы. Страница без AMP не загружает все элементы одновременно, поэтому браузер не знает макет страницы во время ее загрузки.
Это может быть проблемой, поскольку на традиционных страницах используется несколько скриптов и листов для одновременного выполнения множества динамических функций. Когда это происходит, могут произойти изменения макета, которые в конечном итоге будут выглядеть непривлекательно для пользователей.
Но поскольку AMP может одновременно загружать контент и рендеринг, он также может считывать, понимать и беспрепятственно внедрять эти изменения.
6. Мощность загрузки изображений переносится с ЦП на ГП для ускорения.
Вместо того, чтобы использовать процессор вашего компьютера или центральный процессор для создания изображений для вашей страницы, AMP использует более эффективный графический процессор или графический процессор. Это освобождает процессор от работы, ускоряя работу и загрузку страницы.
Когда ЦП создает изображения, он создает слои, а затем отправляет их в ГП для дальнейших изменений. Например, графический процессор может сжимать, увеличивать, поворачивать или обрезать изображения.
7. Загрузка ресурсов является главным приоритетом для AMP-страниц.
Когда страница AMP начинает загружаться, она начинает оптимизировать свои ресурсы. Это сделано для того, чтобы наиболее важные компоненты имели приоритет. Объявления и изображения загружаются только в том случае, если пользователь может увидеть их внизу страницы.
Важно отметить, что весь контент уже подготовлен для загрузки на странице AMP из-за статического макета. Они полностью загружаются только в том случае, если страница определяет, что пользователь может их увидеть.
Именно по этим причинам страницы AMP оптимизированы до такой степени, что они загружаются почти мгновенно. Довольно круто, правда? Вся эта закулисная работа выполняется страницами AMP для ускорения процесса загрузки.
На этом этапе вам может быть интересно, как создать одну из этих страниц AMP самостоятельно. К счастью, создать AMP-страницу — даже попробовать — довольно интуитивно понятно. Давайте рассмотрим этот процесс в следующем разделе.
Как сделать страницы Google AMP
На данный момент мы заработали, что страницы Google AMP — это веб-страницы, которые улучшают взаимодействие с пользователем благодаря привлекательной графике, плавным макетам и почти мгновенной загрузке. Но так ли просто создать веб-страницу AMP, как кажется?
Краткий ответ: может быть.
Я не разработчик, и мои знания в области кодирования очень минимальны. Но когда я начал играть с «Игровой площадкой AMP», я смог создать очень простую веб-страницу.
Когда вы разрабатываете страницу AMP, Google предлагает рабочий процесс. Сначала вы создаете страницу, которую Google называет «Hello World». Затем вы интегрируете свою страницу, изучаете основы страниц AMP, оптимизируете страницу и настраиваете отслеживание аналитики, а также разрабатываете страницу в соответствии с потребностями и целями своего веб-сайта.
Google AMP интегрируется с платформами CMS. Вы можете найти полный список этих платформ здесь.
Если вы хотите создать веб-страницу, Google проведет вас через весь процесс. Платформа предоставляет шаблон кода, который можно скопировать и сохранить с расширением .html. Он дает вам список необходимая разметка, которую вы должны включить на свою страницу чтобы сделать его рабочим HTML-документом AMP.
На боковой панели переключателя на странице создания есть инструкции по включению изображений, изменению макета, оптимизации для SEO, предварительному просмотру и заключительным шагам перед публикацией.
Если вы хотите попробовать, как будет работать со страницей AMP, посетите домашнюю страницу, amp.dev. Там вы можете немного поэкспериментировать с игровой площадкой AMP, как это сделал я. Здесь я использовал свои очень ограниченные знания в области кодирования для экспериментов, как показано ниже, когда я добавлял текст к пустому объявлению:
Я получил массу удовольствия от этого инструмента. Я мог визуализировать изменения, которые я делал, когда они происходили. Если вы хотите создать образец веб-страницы с игровой площадкой, вот что я сделал.
1. Реализуйте и измените текст заголовка.
Во-первых, я начал с данного стандартного шаблона. Я следовал ключевым словам в коде «
» и «», которые говорят мне, что я буду работать над H2 внутри тела страницы. Я изменил заголовок с «AMP — это просто» на «Добро пожаловать на мой сайт!» поместив текст в скобки h2.
2. Работайте над абзацами тела.
Затем я перешел к разделу абзаца. В коде абзацы помечаются красными «
» и «
». Красный подобен сигналу; Он сообщает веб-странице, что будет содержать последующий контент. В данном случае это был текст, который я изменил на «Ниже показано адаптивное изображение. Адаптивные изображения оптимизированы для мобильных и настольных компьютеров».
3. Измените кнопки в соответствии с потребностями вашей веб-страницы.
Научившись менять абзацы, я прокрутил до кнопок. Зеленый текст «включено» сообщает веб-странице, что следующая за ней фраза будет своего рода кнопкой. В этом случае кнопка будет работать по нажатию, тип — приветствие, и она будет отображаться на веб-странице.
Мы знаем это по коду «tap:greeting.show». Я изменил белый текст, чтобы изменить то, что написано на кнопке, прежде чем убедиться, что добавлено окончание «». Это означает, что я закончил с первой кнопкой.
4. Переключите атрибуты класса, если хотите.
Код AMP Playground дает вам инструкции по внесению изменений в его текст. Для этого шага текст говорит вам, как переключить атрибут класса. Если вы будете следовать строкам кода, вы сможете понять, как вносить простые изменения.
Когда я переключал атрибуты переключения, я играл с цветами и текстом. Вместо оригинального красного цвета я изменил переключатель на зеленый и переключил текст приветствия с «Привет» на «Привет!».
Класс в HTML используется для определения типа атрибута, если у вас их несколько. (Если бы вам нужно было перечислить различные напитки на своем сайте, вы бы использовали «класс», чтобы указать дизайн для вина, водного сока и т. д.). В этом случае атрибут класса был для цвета.
Помните, что это всего лишь пустой шаблон настройки, чтобы вам было удобно создавать веб-страницу. Для этого не нужен отдельный .html файл, можно работать прямо в Google. Вы также можете сделать пробный запуск для историй, электронных писем и рекламы. Мне понравилось использовать это, потому что это было весело, мне было удобно использовать язык программирования, а интерфейс игровой площадки был прост в использовании.
Вы можете использовать AMP-страницы, чтобы сделать взаимодействие с клиентом восхитительным от начала до конца, как в моем случае с веб-сайтом Tasty. Как вы собираетесь вписать эти страницы в свою стратегию в будущем?