Рубріки: HighloadБез категорииБраузернаяОптимизация

Google AMP для ускорения контентных страниц

admin

15.08.2020 02:00

Новая инициатива Google нацелена на улучшение веб-опыта пользователей мобильных устройств. Accelerated Mobile Pages – новый формат построения веб-страниц для оптимизации контента (картинки, JS, плагины соц. сетей) и увеличения отзывчивости мобильной версии сайта, по сути облегчая страницы.

Принцип работы

AMP состоит из трех частей:

AMP HTML – немного видоизмененный язык разметки, в котором некоторые теги заменены на эквиваленты с упором на AMP, а часть и вовсе запрещена;
AMP JS – ограничение на использование библиотеки AMP, которая заточена под асинхронную загрузку;

Google AMP Cache – опциональная возможность кэширования страниц AMP на сервера Google для максимально быстрой отдачи пользователям.

Основные требования и ограничения:

Только асинхронные скрипты;
Только встроенный CSS;
Стили ограничены размером 50 КБ;
Необходимо указывать размер в HTML-ссылках на внешние ресурсы (картинки);
JS всегда выполняется асинхронно;
Поддерживаются только JavaScript для AMP;
Шрифты загружаются при помощи тега ссылки или CSS @font-face rule.

AMP HTML

Разберем простую HTML-страницу, построенную по требованиям AMP:

<!doctype html>

****

Welcome to the mobile web

## Страница AMP с новыми тегами и асинхронным скриптом

Синтаксис AMP-страниц

HTML-документ, разработанный по [https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md требованиям технологии, должен следовать синтаксису]:

Начинаться с <!doctype html>;
Содержать тег верхнего уровня <html ⚡> или <html amp>;
Содержать <head> и <body>;

Первым в <head> должен стоять <meta charset="utf-8">;
Содержать ссылку <link rel="canonical" href="$SOME_URL" /> внутри <head>, которая указывает на обычную версию страницы;
Содержать <meta name="viewport" content="width=device-width,minimum-scale=1"> внутри <head>;
Содержать [https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md