10 важных компонентов ускоренных мобильных страниц (AMP), которые вы должны знать

Ускоренные мобильные страницы или же AMP инициатива Google по сделать мобильный интернет быстрее. Для достижения этой цели стандарты AMP ограничивают использование HTML, CSS и JavaScript, а также управляет загрузкой внешних ресурсов, такие как изображения, видео и реклама через собственную среду выполнения.

Это влечет за собой то, что вы не можете использовать любой пользовательский (написанный автором или сторонний) JavaScript или любые связанные с ресурсами элементы HTML, такие как изображения и видео в ваших документах AMP.

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

Компоненты AMP являются конкретные теги HTML. Они ведут себя подобно обычным тегам HTML: у них есть открывающие и закрывающие теги, атрибуты, и большинство из них можно стилизовать с помощью CSS. Их можно легко узнать, так как они всегда начинать с ампер- префикс.

Существует два типа компонентов AMP: встроенный а также расширенный Компоненты.

Встроенные компоненты AMP

Встроенные модули встроены в среду выполнения AMP JavaScript, поэтому вам не нужно отдельно включать их.

1. амп-IMG

заменяет тег в AMP HTML документах. Вам нужно добавить ЦСИ а также альт атрибуты так же, как когда вы работаете с обычным элемент.

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

Если хотите сделать изображение отзывчивым, добавить макет = «отзывчивый» приписывать. расположение атрибут контролирует макет в документах AMP, и его можно добавить к любым компонентам AMP (узнайте больше об этом в системе макетов AMP).

Вы также можете использовать srcset атрибут на тег к указать разные изображения для разных видовых экранов и плотности пикселей. Он работает так же, как с изображениями без AMP.

2. амп-видео

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

Источник видео должен обслуживаться по протоколу HTTPS. Вы должны добавить ширина а также рост атрибуты, так же, как с составная часть.

тег имеет много необязательных атрибутов, таких как Автовоспроизведение а также плакат который вы можете указать, чтобы настроить отображение вашего HTML5-видео.

поддерживает mp4, webm, ogg и все другие форматы, поддерживаемые HTML5

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

  
 
Ваш браузер не поддерживает видео HTML5.
 
    

3. Усилитель-объявления а также амп-код вставки

предоставляет вам песочницы iframe в котором вы можете показывать ваши объявления. Вы должны показывать свои объявления через протокол HTTPS.

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

компонент требует от вас добавить размеры объявления с использованием ширина а также рост атрибуты.

Вы можете определить рекламную сеть, которую вы используете с тип приписывать. Смотрите список поддерживаемых рекламных сетей.

Каждая рекламная сеть имеет свою данные-* атрибуты, которые вы также должны добавить. Чтобы увидеть, что вам нужно, нажмите на свою рекламную сеть в приведенном выше списке.

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

4. ампер-пиксели

С , вы можете добавить пиксель отслеживания в ваши документы AMP HTML для количество просмотров страниц. У него только один атрибут, обязательный ЦСИ атрибут, по которому нужно указать URL, принадлежащий пикселю отслеживания.

тег позволяет стандартные замены URL, что означает, что вы можете генерировать случайное значение URL отслеживать каждое впечатление.

См. Руководство по замене URL AMP, если вы хотите использовать этот компонент. Обратите внимание, что вы не можете стилизовать составная часть.

Расширенные компоненты AMP

Как расширенные компоненты AMP не являются частью среды выполнения JavaScript, вы всегда нужно импортировать их в раздел страницы AMP, на котором вы хотите использовать их.

Примечание: версии компонентов могут измениться в будущем, поэтому не забудьте проверить текущую версию в документации.

5. усилитель аудио

заменяет HTML5 тег, и позволяет напрямую вставлять аудио файлы HTML5 на страницах AMP.

Чтобы использовать его, вам необходимо указать ЦСИ, ширина а также рост атрибуты, и вы также можете добавить три дополнительных атрибута: Автовоспроизведение, петля а также приглушенный.

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

Компонент AMP поддерживает те же форматы аудио, что и Тег HTML5.

  
 
Ваш браузер не поддерживает аудио HTML5.
 
    

Использовать , включите следующий скрипт в раздел вашего документа AMP:

6. амп-IFrame

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

Есть несколько правил, связанных с Вы должны следовать, чтобы пройти проверку.

Вы должны указать ширина, рост, а также песочница атрибутов. песочница атрибут по умолчанию пуст, но вы можете присвоить ему разные значения, чтобы изменить поведение iframe, напримерпесочница = "Allow-скрипты"позволяет iframe запускать JavaScript. Вы также можете использовать атрибуты стандартных фреймов.

В то время как размеры предопределены ширина а также рост атрибуты, есть способ изменить его размер во время выполнения. Чтобы использовать компонента, добавьте следующий скрипт на страницу AMP:

7. усилитель-гармошка

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

Разделы аккордеона должны использовать

  
 
Секция 1
 
Содержание раздела 1
 
 
 
Раздел 2
 
Содержание раздела 2
 
 
 
Раздел 3
 
    
 
  

  расширять