ЧТО ТАКОЕ ACCELERATED MOBILE PAGES (УСКОРЕНИЕ АМП) И ДЛЯ ЧЕГО ОНО НУЖНО?

  • 06.11.2017
Поставь лайк, если понравилась статья!
+1

АМП - это код HTML, создающий кастомные (не родные) элементы, которые оптимизируют доставку содержимого, но ограничивают стандартные возможности.

Ускорение АМП состоит из 3 частей:

  1. HTML — базовая разметка с надстройками и ограничениями
  2. JS — библиотека компонентов
  3. Cache — АМП страница кэшируется гуглом и отдается с его серверов

Ускорение происходит за счет:

  1. Асинхронные скрипты
  2. Определение размеров ресурсов (изображений, видео, iframe)
  3. Предотвращение блокировки визуализации механизмами расширений
  4. Устранение сторонних сценариев JavaScript из основного потока операций
  5. Все CSS должны быть встроенными и ограниченными по размеру
  6. Переключение шрифта должно быть эффективным
  7. Сокращение пересчетов стилей
  8. Запуск анимации только с аппаратным ускорением
  9. Приоритетная загрузка ресурсов
  10. Мгновенная загрузка страниц

Внедрение АМП на сайт

  1. Создать АМП версию страниц и указать о них на основной странице
  2. Вместо основной страницы использовать АМП версию

Но у вас нет выбора, если функционал сайта зависит от JavaScript. В этом случае вам придется урезать функционал и делать отдельную АМП версию, так как в АМП страницах не работает JavaScript (за исключением библиотек элементов).

Ограничения АМП

  1. У медиа файлов обязательно указание размеров
  2. Размер CSS ограничен и он должен быть заинлайнен в head
  3. У АМП страниц формата BlogPost в микроразметке обязательно указание изображения
  4. Поддерживаются последние 2 версии популярных браузеров
  5. iframe с вашего домена недоступен, если нужно что-то встроить через iframe — вам нужен другой домен или субдомен

Настройка метрики для сайта с AMP

Рекомендации для сайтов с AMP

  1. Внимательно изучите документацию
  2. Проверяйте результат через валидатор
  3. Начинайте по чуть-чуть, не спешите переписывать весь проект
  4. Подключите гугл вебмастер к сайту и следите за ошибками в АМП
  5. Размечайте микроразметку согласно содержимому страницы, о поддерживаемых видах читайте на schema.org
  6. Используйте расширение для хрома для проверки валидности документа