Невидимая переплетение массово увеличивается в первый раз
Похоже, что включение Google "невидимой реплики" значительно увеличивает время "Первого интерактивного" (и впоследствии "постоянно интерактивного") измерения, измеренного Lighthouse.
Я создал две пустые веб-страницы, используя шаблон HTML5. Эти сайты отличаются только включением скрипта API recaptcha; а именно эта строка:
<script src='https://www.google.com/recaptcha/api.js'></script>
Первый (не повторяющийся) сайт, расположенный по адресу https://modest-haibt-896be0.netlify.com/ получает первое интерактивное время, эквивалентное первому значимому времени рисования. 
Второй (повторный) сайт, расположенный по адресу https: //орого-goldwasser-89735d.netlify.com/, получает первое интерактивное время ~14 секунд, а предполагаемое время задержки ввода ~ 1,6 секунды:
Я включил сценарий в нижней части <head> раздел, как указано в инструкциях Google, однако я также попытался включить скрипт в нижней части <body> (а также с async а также defer) без заметных улучшений.
Это проблема с тем, как Lighthouse измеряет первый интерактив (особенно если учесть, что он все еще помечен как "бета") или Recaptcha? Если в последнем случае это то, о чем стоит беспокоиться, и если да, то есть ли способы смягчить воздействие?
0 ответов
Это тоже беспокоило меня некоторое время, и это лучшее решение, которое я нашел:
- Не загружайте скрипт api.js (render captcha) изначально. Это важно, так как в сочетании с [2] создает относительно большое интерактивное замедление времени.
- Не привязывайте капчу к какому-либо элементу изначально, просто "подготовьте" ее к функции на потом.
- Теперь, это самая важная (умная) часть - когда ваш пользователь начинает взаимодействовать с формой, вставьте скрипт api.js (recaptha__..js) в заголовок, браузер загрузит его и вызовет функцию привязки для загрузки фактическая капча.
Вы можете найти больше информации и объяснений с некоторыми примерами кода здесь: https://tehnoblog.org/google-invisible-recaptcha-how-to-boost-lighthouse-performance-score/