Благодаря объединению следующих оптимизаций страницы AMP становятся настолько быстрыми, что их загрузка происходит почти мгновенно.
Если вам больше нравится слушать, чем читать, в следующем видеоматериале ведущий разработчик AMP Малти Убл (Malte Ubl) представит обзор, аналогичный содержанию следующих параграфов.
Использование только асинхронных скриптов
JavaScript – мощный инструмент, способный изменить практически любой аспект страницы, но он также может препятствовать построению модели DOM и задерживать визуализацию страницы (см. также документ Оптимизация JavaScript для быстрой визуализации страницы). Чтобы JavaScript не задерживал визуализацию страницы, AMP разрешает только асинхронное выполнение его сценариев.
Страницы AMP не могут содержать какой-либо сценарий JavaScript, созданный их автором. Вместо применения JavaScript интерактивные возможности страницы обеспечиваются персонализированными элементами AMP. В этих персонализированных элементах AMP может использоваться JavaScript, однако в их тщательно продуманном дизайне были устранены факторы, способные снизить производительность.
Хотя во встроенных фреймах разрешено использование сторонних сценариев JS, они не могут блокировать визуализацию. Например, если сторонний сценарий JS использует API с методом document.write, чрезвычайно снижающим общую производительность, это не заблокирует визуализацию основной страницы.
Статическое определение размеров всех ресурсов
Размеры внешних ресурсов, таких как изображения, реклама или встроенные фреймы, должны быть установлены в HTML, поэтому AMP может определить размер и положение каждого элемента до загрузки ресурсов. AMP загружает макет страницы, не ожидая загрузки каких-либо ресурсов.
AMP отделяет макет документа от макета ресурса. Для компоновки всего документа требуется лишь один запрос HTTP (+шрифты). Поскольку оптимизация AMP позволяет избежать пересчетов стиля и макетов в браузере, при загрузке ресурсов не возникает какой-либо перекомпоновки.
Предотвращение блокировки визуализации механизмами расширений
AMP не позволяет механизмам расширений блокировать визуализацию страницы. AMP поддерживает расширения для таких компонентов, как окна просмотра, вставки Instagram, сообщения Twitter и др. Хотя эти расширения требуют дополнительных запросов HTTP, эти запросы не блокируют компоновку и визуализацию страницы.
Любая страница, использующая персонализированный скрипт, должна сообщить системе AMP, что у нее впоследствии появится собственный тег. Например, скрипт amp-iframe сообщает системе, что на странице появится тег amp-iframe. AMP создает область встроенного фрейма еще до того, как его содержимое станет известным:
Устранение всех сторонних сценариев JavaScript из основного потока операций
Сторонние сценарии JS часто используют синхронную загрузку JS. В них также часто применяется метод document.write для загрузки других синхронных скриптов. Например, если у вас есть пять рекламных блоков, каждый из которых выполняет три синхронные загрузки с задержкой соединения на 1 секунду, то вы потеряете 15 секунд только на загрузку JS.
Страницы AMP разрешают выполнение сторонних сценариев JavaScript, но только внутри изолированных встроенных фреймов. Ограничение выполнения этих сценариев встроенными фреймами не позволяет им блокировать обработку основной страницы. Даже когда они запускают многократные пересчеты стиля, их небольшие встроенные фреймы имеют очень малый размер модели DOM.
Пересчеты стиля и макетов обычно зависят от размера модели DOM, поэтому пересчеты для встроенных фреймов выполняются гораздо быстрее аналогичных пересчетов для всей страницы.
Все таблицы CSS должны быть встроенными и ограниченными по размеру
Обработка таблицы CSS блокирует всю визуализацию, препятствует загрузке страницы, а ее размер имеет тенденцию к увеличению. В страницах AMP HTML разрешены только встроенные стили. Это позволяет устранить один запрос HTTP (а часто и больше) из основного потока операций визуализации в сравнении с большинством других веб-страниц.
Кроме того, размер встроенной таблицы стилей не должен превышать 50 килобайт. Хотя этот размер достаточен для очень сложных страниц, он все же требует от автора страницы воздерживаться от засорения CSS.
Переключение шрифта должно быть эффективным
Размер веб-шрифтов обычно очень значителен, поэтому их оптимизация имеет критическое значение для производительности. На обычной странице, которая содержит несколько синхронных скриптов и несколько внешних таблиц стилей, браузер подолгу ожидает их выполнения, прежде чем начать загрузку таких тяжеловесных шрифтов.
Система AMP не выдает запросов HTTP до загрузки шрифтов. Это возможно лишь потому, в AMP все сценарии JS имеют атрибут async и разрешены только встроенные таблицы стилей. Никакие запросы HTTP не блокируют загрузку шрифтов в браузере.
Сокращение пересчетов стилей
Каждое уточнение какого-либо размера запускает пересчеты стилей, которые отнимают значительное время, поскольку браузер должен перекомпоновать всю страницу. В страницах AMP все операции чтения модели DOM выполняются до любых операций записи. Это гарантирует, что для каждого фрейма будет выполняться не более одного пересчета стилей.
Ознакомьтесь с дополнительной информацией о влиянии пересчетов стилей и макетов на скорость визуализации.
Запуск анимации только с аппаратным ускорением
Единственным способом ускорения операций оптимизации является их запуск на графическом процессоре. Графический процессор имеет представление о слоях, умеет выполнять некоторые операции с этими слоями, может перемещать или затенять их, но он не сможет обновить макет страницы и передаст эту задачу браузеру, а это плохо.
Правила для таблиц CSS, связанных с анимацией, гарантируют, что эта анимация будет выполняться с аппаратным ускорением. В частности, AMP разрешает выполнять анимацию и переходы только для свойств transform и opacity, поэтому перекомпоновка страницы не требуется. Ознакомьтесь с дополнительной информацией об использовании свойств transform и opacity для анимационных изменений.
Приоритетная загрузка ресурсов
AMP управляет всеми загрузками ресурсов – определяет приоритетные загрузки, загружает только то, что действительно необходимо, и выполняет предварительное извлечение медленно загружаемых ресурсов.
AMP оптимизирует загрузки ресурсов, загружая первыми те из них, которые наиболее важны на текущий момент. Изображения и рекламные блоки загружаются только тогда, когда пользователь может их увидеть в верхней части страницы или может быстро прокрутить к ним экран.
AMP также выполняет предварительное извлечение медленно загружаемых ресурсов. Ресурсы загружаются как можно позже, но их предварительное извлечение выполняется при первой возможности. Такой способ позволяет значительно ускорить загрузку и использовать центральный процессор только тогда, когда ресурсы действительно показываются пользователям.
Мгновенная загрузка страниц
Чтобы обеспечить максимально быстрое выполнение запросов HTTP, часто используется новый API предварительного подключения.
С его помощью визуализация страницы может быть выполнена до того, как пользователь явно выразит свое желание перейти на нее. Страница может быть уже доступна в момент ее выбора пользователем, что создает впечатление мгновенной загрузки.
Хотя предварительная визуализация может применяться к любому веб-контенту, она также может значительно повысить нагрузку на сеть и центральный процессор. Оптимизация AMP уменьшает влияние обоих этих факторов. При предварительной визуализации загружаются только те ресурсы, которые видны в верхней части страницы, и не отображаются компоненты, способные значительно нагрузить центральный процессор.
Для документов AMP, выбранных для предварительной визуализации и мгновенной загрузки, фактически загружаются только те ресурсы, которые видны в верхней части страницы. Те ресурсы этих документов, которые способны значительно увеличить нагрузку на процессор (например, сторонние встроенные фреймы), не загружаются.
Узнайте, почему AMP HTML не использует все преимущества сканера предварительной загрузки.
Помогите сделать AMP быстрее
AMP является проектом с открытым исходным кодом. Нам нужна ваша помощь, чтобы сделать AMP еще быстрее. Узнайте, как вы можете помочь проекту.
