От автора: разработчики, которые применяют AMP, хотят получить молниеносную скорость загрузки страниц, и поэтому им нужно видеть, насколько внесенные изменения улучшили сайт. Однако, поверхностное использование одного из многих доступных инструментов оценки производительности (например, PageSpeed Insights или Lighthouse) иногда дает неожиданные и неполные результаты.
Чтобы понять, почему это происходит, важно знать, что AMP ускоряет работу веб-сайта на трех разных уровнях:
Сам по себе AMP является очень быстрым, учитывая, что пользовательский JS запрещен, критический путь разблокирован, стили CSS встроены и приняты многие другие меры оптимизации. Хотя некоторые проблемные моменты на стороне сервера все же могут иметь место, например, неоптимизированные изображения или неэффективно кэшируемые заголовки, которые нельзя легко исправить посредством библиотеки AMP на стороне клиента.
Второй уровень ускорения достигается благодаря кэшированию AMP Caches (например, Google AMP Cache), которое реоптимизирует изображения, добавляет подсказки по предварительной выборке, минимизирует html, работает через HTTP/2, а также предлагает многие другие меры оптимизации. Учтите, что целый ряд этих действий можно выполнить на самом исходном ресурсе.
Третий (и, скорее всего, самый эффективный) уровень повышения скорости основывается на том факте, что AMP может быть предварительно отображен надежным и безопасным способом, то есть предварительно отображаются только ресурсы в первом окне просмотра и не выполняются сторонние скрипты. Подробнее об этом вы можете прочитать здесь.
Если проверка производительности AMP осуществляется на исходном ресурсе, показатели скорости (обычно гораздо выше, чем канонические) еще не являются информативными. Самый лучший способ выполнить проверку – это запустить тест производительности на том же сайте, который обслуживается одним из кэшей AMP (вы можете использовать этот инструмент, чтобы получить URL-адрес кэша Google AMP Cache). Это подразумевает определение возможностей оптимизации кэша. Эти данные будут гораздо более показательными и дадут вам информацию относительно того, чего вы можете достичь благодаря применению описанных выше мер.
Давайте посмотрим, как это будет выглядеть для фактической страницы, ниже приведен один из отчетов тестирования одной из страниц ampbyexample.com:
Более полные результаты вы можете найти здесь. Диаграмма четко иллюстрирует наличие больших возможностей увеличения производительности, если тестировать сайт через AMP Cache вместо исходного ресурса. Например, показатель Первое значимое отображение, при измерении из кэша на 0.9 секунды меньше.
К сожалению, третий и самый важный уровень (связанный с мгновенной загрузкой посредством предварительной визуализации) трудно протестировать с помощью обычных инструментов, поскольку его нужно измерять в потоке, поступающем с ранее посещенного сайта или приложения. Но очевидно, что, благодаря этому уровню, страница может отображаться почти мгновенно, так как весь видимый контент уже был заранее визуализирован. Webpagetest.org разрешает тестировать подобные потоки посредством параметра скриптинга, но его установка и поддержка являются трудоемкими и небезопасными. Скрипт может выглядеть следующим образом:
// не регистрируем данные для первого шага навигации logData 0 // переходим на первую страницу (например, Google SRP), которая предварительно визуализирует AMP navigate INSERT_URL_CALLED_BEFORE_AMP // небольшая задержка, чтобы дать предварительной визуализации немного времени, // пользователь тоже обычно не нажимает ссылку молниеносно sleep 10 // переходим по ссылке на AMP logData 1 // переходим по ссылке, вводим корректное выражение запроса, // находим нужную ссылку execAndWait document.querySelector(‘[…]’).click();
Добавив в приведенную выше диаграмму еще и этот аспект, мы получим полное сравнение всех трех моделей (подробные результаты смотрите здесь):
Таким образом, мы видим, что предварительная визуализация обеспечивает начало визуализации практически мгновенно (66 мс), а полную загрузку и возможность первого взаимодействия примерно через 1 с.
Поэтому каждый раз проводя измерение производительности AMP, учитывайте, что не все ресурсы увеличения скорости являются очевидными, а некоторые задействуются только путем кэширования и, особенно, предварительной визуализации.
Автор: Martin Schierle
Источник: https://www.ampproject.org/
Редакция: Команда webformyself.