АМП — это код HTML, создающий кастомные (не родные) элементы, которые оптимизируют доставку содержимого, но ограничивают стандартные возможности.
Ускорение АМП состоит из 3 частей:
- HTML — базовая разметка с надстройками и ограничениями;
- JS — библиотека компонентов;
- Cache — АМП страница кэшируется гуглом и отдается с его серверов.
Ускорение происходит за счет:
- Асинхронные скрипты;
- Определение размеров ресурсов (изображений, видео, iframe);
- Предотвращение блокировки визуализации механизмами расширений;
- Устранение сторонних сценариев JavaScript из основного потока операций;
- Все CSS должны быть встроенными и ограниченными по размеру;
- Переключение шрифта должно быть эффективным;
- Сокращение пересчетов стилей;
- Запуск анимации только с аппаратным ускорением;
- Приоритетная загрузка ресурсов;
- Мгновенная загрузка страниц.
Внедрение АМП на сайт
- Создать АМП версию страниц и указать о них на основной странице;
- Вместо основной страницы использовать АМП версию.
Но у вас нет выбора, если функционал сайта зависит от JavaScript. В этом случае вам придется урезать функционал и делать отдельную АМП версию, так как в АМП страницах не работает JavaScript (за исключением библиотек элементов).
Ограничения АМП
- У медиа файлов обязательно указание размеров;
- Размер CSS ограничен и он должен быть заинлайнен в head;
- У АМП страниц формата BlogPost в микроразметке обязательно указание изображения;
- Поддерживаются последние 2 версии популярных браузеров;
- iframe с вашего домена недоступен, если нужно что-то встроить через iframe — вам нужен другой домен или субдомен.
Настройка метрики для сайта с AMP
Рекомендации для сайтов с AMP:
- Внимательно изучите документацию;
- Проверяйте результат через валидатор;
- Начинайте по чуть-чуть, не спешите переписывать весь проект;
- Подключите гугл вебмастер к сайту и следите за ошибками в АМП;
- Размечайте микроразметку согласно содержимому страницы, о поддерживаемых видах читайте на schema.org;
- Используйте расширение для хрома для проверки валидности документа.