AMP Project стремится обеспечить мгновенный рендеринг веб-контента. Это несортированный список оптимизаций, которые применяются ко всем документам на основе AMP, что в совокупности ускоряет их загрузку. Каждая веб-страница может иметь эти оптимизации, но страницы AMP не могут иметь их.
Хотя эта статья посвящена оптимизации в AMP, она также может быть полезна как своего рода список дел для оптимизации веб-сайта, не поддерживающего AMP. Если нам не хватает какой-либо оптимизации, которая могла бы быть полезной для AMP, оставьте комментарий или отправьте нам запрос на включение.
Ленивая загрузка
Ресурсы загружаются лениво, когда появляется вероятность того, что пользователь их увидит, или когда документ не используется.
Широкое использование preconnect
Новый API preconnect активно используется для обеспечения максимальной скорости выполнения HTTP-запросов. Это помогает ускорить выполнение отложенных запросов, когда они в конечном итоге будут выполнены.
Предварительная загрузка лениво загружаемых ресурсов
Ресурсы загружаются как можно позже, но предварительно загружаются как можно раньше. Таким образом, все загружается очень быстро, но процессор используется только тогда, когда ресурсы действительно показаны пользователям.
Весь асинхронный JavaScript
Файлы AMP действительны только в том случае, если все файлы JavaScript загружаются асинхронно.
Встроенные таблицы стилей
В AMP разрешены только встроенные таблицы стилей. Это удаляет 1 или часто больше HTTP-запросов из критического пути рендеринга по сравнению с большинством веб-страниц.
Нулевые запросы HTTP блокируют загрузку шрифтов.
Поскольку весь JS в AMP имеет атрибут async и разрешены только встроенные таблицы стилей, никакие HTTP-запросы не блокируют загрузку шрифтов браузером.
Мгновенная загрузка через предварительную отрисовку
AMP оптимизирован для того, чтобы сделать предварительную визуализацию ресурса относительно «дешевой» и надежной. Это означает, что он отображается до того, как пользователь явно укажет, что он хочет перейти на страницу. При этом страница может быть уже доступна к тому моменту, когда пользователь действительно ее выберет, что приведет к мгновенной загрузке.
Хотя предварительная отрисовка может применяться ко всему веб-контенту, это может (и на практике) использовать большую пропускную способность и ЦП. AMP оптимизирован для уменьшения обоих этих факторов:
При предварительной визуализации загружаются только ресурсы в верхней части страницы
Когда документы AMP предварительно обрабатываются для мгновенной загрузки, фактически загружаются только ресурсы в верхней части страницы. "Подробности."
Предварительный рендеринг не отображает вещи, которые могут быть дорогими с точки зрения ЦП.
Когда документы AMP предварительно обрабатываются для мгновенной загрузки, ресурсы, которые могут использовать много ресурсов ЦП (например, сторонние фреймы iframe), не загружаются. "Подробности."
Интеллектуальная приоритезация ресурсов
Когда AMP загружает ресурсы, он оптимизирует загрузку таким образом, чтобы в первую очередь загружались наиболее важные для пользователя ресурсы.
Отделение макета документа от загрузки ресурсов
Внешние ресурсы, такие как изображения, объявления или окна iframe, должны указывать свой размер в HTML. Это означает, что их не нужно сначала загружать для создания макета документа.
Максимальный размер таблицы стилей
Встроенная таблица стилей имеет максимальный размер. Хотя этот размер достаточно велик для очень сложных страниц, он по-прежнему требует, чтобы автор страницы соблюдал правила гигиены CSS.
Пакетирование изменений DOM в стиле FastDOM
Мы группируем все операции измерения и изменения DOM, чтобы минимизировать пересчет стилей в браузерах.
На практике это означает, что в каждом кадре анимации мы сначала выполняем все операции чтения DOM, а затем, когда они выполняются, выполняем все операции записи. Результат - сокращение до 1 перерасчета стиля на кадр.
Оптимизирован для небольшого количества пересчетов стилей и макета
Независимо от вышесказанного, AMP оптимизирован, чтобы избежать дорогостоящих перерасчетов стилей и макетов в браузере.
Смягчение наихудших практик сторонних JS, таких как document.write
В частности, если сторонний JS использует очень плохой для производительности API «document.write», он не блокирует рендеринг главной страницы.
Стоимость использования инструментов аналитики не зависит от количества используемых провайдеров аналитики.
Как и в случае реализации аналитики в AMP, страницы с несколькими поставщиками аналитики не перегружаются дополнительным JavaScript и не требуют значительных дополнительных ресурсов ЦП.
Расширения не блокируют макет страницы
AMP поддерживает расширения для таких вещей, как лайтбоксы, встраивание Instagram, твиты и т. Д. Хотя для этого требуются дополнительные HTTP-запросы, эти запросы не блокируют макет и рендеринг страницы.
Доставка CDN доступна для всех документов AMP
AMP предлагает CDN на основе прокси для доставки всех действительных документов AMP, предлагая быструю и надежную работу для всего содержимого AMP.
Все ресурсы и документ загружаются из одного источника через один туннель HTTP 2.0.
При использовании AMP CDN на основе прокси документ, все файлы JS и все изображения загружаются из одного источника, который использует HTTP 2.0 для максимальной эффективности.
Анимация может быть ускорена на графическом процессоре
Правила для CSS, относящегося к анимации, в AMP гарантируют, что анимация может быть ускорена с помощью графического процессора на современных устройствах, поэтому она будет плавной и маслянистой.
