Оптимізація Interaction to Next Paint (INP) у Chrome: покроковий посібник

Запитувана сторінка

developer.chrome.com/docs/web-platform/optimize-inp

Складові INP

• Затримка введення (Input delay): «починається, коли користувач ініціює взаємодію зі сторінкою, і закінчується, коли починають виконуватися обробники подій для цієї взаємодії».
• Час обробки (Processing duration): «складається з часу, необхідного для виконання обробників подій до завершення».
• Затримка відтворення (Presentation delay): підтверджується як третій компонент, але повне визначення відсутнє; взаємодії складаються з «затримки введення, часу обробки та затримки відтворення».

Практичні рекомендації

• Тримайте кожен компонент взаємодії «якомога коротшим», а не оптимізуйте лише затримку введення.
• При високій затримці введення досліджуйте іншу роботу, яка займає головний потік перед початком обробників; сама взаємодія «може не бути безпосередньою причиною повільного INP».
• При високому часі обробки зменшуйте або відкладайте роботу, яку виконують обробники подій, оскільки «обробники подій взаємодії були безпосередньою причиною повільного INP».
• Аудит власних обробників, фреймворків, бібліотек та сторонніх скриптів: «Будь-який код, який виконується в будь-якому обробнику подій, затримуватиме взаємодію».
• При високій затримці відтворення досліджуйте рендеринг браузера після виконання обробників, але наведений фрагмент обрізає точну рекомендацію Chrome.

Доступних доказів недостатньо, щоб точно процитувати повне визначення затримки відтворення або повні вказівки щодо її усунення.