Найдите более автоматизированный метод, чтобы узнать о влиянии отдельных сценариев Javascript на LCP, CLS и продолжительность сценария.
Идея
Создайте скрипт Puppeteer, который блокирует каждый Javascript заданного URL-адреса с помощью setRequestInterception Puppeteer и запускает тест KPI производительности / web Vitals, который вы затем сравниваете с включенными всеми скриптами.
Почему кукловод
Вручную вы можете использовать Chrome Dev Tools и заблокировать такой запрос Javascript
Таким образом, вы блокируете один скрипт 👉 проверяете производительность / ключевые показатели эффективности веб-сайта 👉 проверяете, в порядке ли базовая функциональность сайта… 👉 повторяете, блокируя следующий сценарий. Конечно, это происходит с замедленным соединением, замедленным процессором и отключенным кешем.
Кажется, много кликов и ожиданий веб-сайтов публикации с легкостью 20+ скриптов. Кроме того, вы хотите протестировать не только свою домашнюю страницу, но, возможно, статьи, разделы, AMP и так далее. Плюс условия тестирования не всегда одинаковы (иногда у вас есть хорошие объявления, а иногда плохие), поэтому вы можете захотеть протестировать их со временем.
Посмотрим, что возможно с Puppeteer.
Что делает скрипт Puppeteer
- очистить все (сторонние) URL-адреса Javascript и использовать ли они async / defer
- запустить тест с блокировкой каждого запроса Javascript
- соберите некоторые ключевые показатели эффективности / веб-жизненно важные показатели. Я выбрал Крупнейший Contentful Paint https://web.dev/lcp/, Cumulative Layout Shift https://web.dev/cls/ и ScriptDuration https://chromedevtools.github.io/devtools-protocol/ tot / Performance / # method-getMetrics
- Он дополнительно делает скриншоты. Они полезны для первой проверки: если скриншоты сайта с конкретным заблокированным Javascript выглядят неработоспособными, вы знаете, что вам нужно быть особенно осторожным, не загружая этот ...
CSV-вывод скрипта
Результаты, интерпретация, выводы
После того, как вы сгенерировали сводную таблицу с собранными данными, вы получите что-то вроде этого. Зеленая линия - это результат, в котором ничего не заблокировано. Итак, то, что вы ищете, - это значительно лучшие числа по сравнению со строкой «ничего не заблокировано» с блокируемым сценарием.
LCP
Вы ищете Javascripts, который значительно улучшил бы LCP, если вы его исключили. Я проверил несколько сайтов, и как только вы сможете снизить LCP, запросив блокировку скрипта + скрипт не загружается асинхронно или отложено, и, возможно, в дополнение к этому в заголовке это индикатор, который нужно исследовать, возможна ли асинхронная или какая-либо другая стратегия загрузки. Кандидатами здесь могут быть оранжевые Javascripts.
Если у вас есть скачки в данных, вы должны исследовать (желтый). В этом примере это не так просто, потому что гораздо лучший LCP (со всеми активами /… скриптами) вызван тем, что страница больше не используется / не имеет изображений. Это можно проверить по скриншотам, созданным скриптом. На снимке экрана показано, что блокировка запроса npm.regenerator-runtime… - плохая идея. Вам нужно продолжить расследование.
CLS
Здесь также вы хотите остерегаться Javascripts, которые значительно улучшили CLS в случае блокировки. Например, заблокированные желтые снизили число примерно с 1,3 CLS до 0,4 CLS, что является убедительным показателем того, что они вызывают нежелательные сдвиги в макете.
Здесь тоже посмотрите скриншоты. В этом случае скриншот заблокированного файла atm.js (сравните имя файла) выглядит нормально.
Видео о скрипте и некоторых уроках…
Что делать, если вы обнаружили Javascript, который замедляет работу вашего сайта (плохой LCP)
В Google много полезной информации (+ я добавил несколько ссылок ниже), что делать. Стратегии были бы, например,
- async, отложить (проверьте: https://addyosmani.com/blog/script-priorities/)
- изменить приоритет нагрузки
- разделите его и загрузите только необходимые части
- получить это из CDN
- …
Но даже async и defer в какой-то момент загрузят скрипт. Если вы хотите использовать реальные крайние случаи, также можно вообще не загружать его. Большинство сторонних скриптов добавляют на ваш сайт некоторые улучшения, отслеживание, рекламу или тестирование. Но в большинстве случаев они не нужны для правильной работы страницы. Так что они могут быть кандидатами на то, чтобы вообще не загружаться в случае медленных сетей ...
Что делать с плохой оценкой CSL
Прочтите https://web.dev/cls/
Связано с рекламой, встраиванием,… это хорошая стратегия, копирующая Системный подход AMPs Layout
… Определять размеры элементов до того, как будут завершены какие-либо удаленные ресурсы, такие как JavaScript и вызовы данных…
Сценарий
Ищу отзывы об улучшении…
Тесты
После получения действительно странных номеров LCP и CLS с реальными веб-сайтами я задумался, а не что-то не так с моим скриптом.
Итак, я построил небольшой тест и создал два сценария Javascript, которые разрушают LCP и CLS. Подробнее о тестовых скриптах здесь:
Открытые вопросы
- Как измерения могут быть положительными, если у меня заблокирован скрипт? Это как-то связано с загрузкой чего-то асинхронно или нет ... но действительно сложно предсказать, не проверив код в деталях.
- Как проверить FID с помощью Puppeteer? Больше КПЭ…
