실제로 핵심 웹 생명체 : 실제 사이트의 INP 감소

게시 됨: 2025-09-16

끊임없이 진화하는 웹 개발의 세계에서 원활한 사용자 경험을 제공하는 것은 더 이상 사치스러운 것이 아닙니다. 성능 향상을 주도하는 주요 이니셔티브 중 하나는 Google의 핵심 웹 활성화 에서 비롯됩니다. 이 중에서, 다음 페인트 (INP)와의 상호 작용은 2024 년의 첫 번째 입력 지연 (FID)을 중요한 성능 메트릭으로 대체함에 따라주의를 끌고 있습니다. 그러나 INP가 정확히 무엇이며 개발자가 실제 웹 사이트에서 어떻게 감소 할 수 있습니까?

INP 이해 : 그것이 무엇이며 그것이 중요한 이유

INP는 탭, 클릭 및 키보드 상호 작용과 같은 웹 페이지의 모든 상호 작용의 대기 시간을 측정하고 최악의 성능을 반환합니다. 입력 지연 만 측정 한 FID와 달리 INP에는 브라우저가 입력 후 응답하고 다음 프레임을 렌더링하는 데 걸리는 시간이 포함됩니다. 본질적으로, 사용자가 조치를 취한 후에 응답을 얼마나 빨리 볼 수 있는지 반영합니다.

Google의 지침에 따라 :

양호 : inp ≤ 200ms
개선이 필요합니다 : 200ms <inp ≤ 500ms
불쌍한 : INP> 500ms

INP 점수가 높으면 사용자 좌절, 참여 감소 및 전환율이 낮아질 수 있습니다. 그렇기 때문에 INP 최적화가 메트릭 박스를 똑딱 거리는 것이 아니라 웹 사이트를 진정으로 반응하고 사용자 친화적으로 만드는 것입니다.

실제 웹 사이트에서 INP 평가

최적화하기 전에 측정해야합니다. Pagespeed Insights , Chrome 사용자 경험 보고서 (CRUX) , Lighthouse 및 Web Vitals Chrome Extension 과 같은 도구는 INP 성능 진단에 중요한 역할을합니다. 그러나 필드 데이터 와 실험실 데이터를 구별하는 것이 필수적입니다.

현장 데이터 : 실제 사용자로부터 수집하고 실제 경험을 반영하며 INP를 이해하는 데 이상적입니다.
실험실 데이터 : 시뮬레이션 조건; 디버깅에 유용하지만 최악의 INP 값을 캡처하지 않을 수 있습니다.

최고의 통찰력은 Chrome Devtools Performance 탭과 같은 도구를 사용하여 실제 INP 문제를 분석하여 긴 작업 및 입력 지연을 추적하는 데 도움이됩니다.

INP 가난한 일반적인 원인

나쁜 INP 점수를 파헤 치면 몇 가지 패턴이 나타납니다. 다음은 실제 웹 사이트에서 가장 빈번한 범인입니다.

중대한 JavaScript 실행 : 기본 스레드를 차단하는 긴 작업은 브라우저가 상호 작용을 즉시 처리하지 못하게합니다.
동기식 렌더링 : DOM 업데이트, 스타일 재 계산 및 레이아웃 교대와 같은 사용자 상호 작용에 유발되는 작업은 지연 렌더링을 할 수 있습니다.
대규모 이벤트 처리기 : 클릭 또는 입력 요소에 묶인 이벤트 리스너는 비싼 작업을 시작할 수 있습니다.
애니메이션 및 전환 : 최적화되지 않은 애니메이션은 사용자 상호 작용 후 첫 번째 의미있는 시각적 변화를 지연시킬 수 있습니다.

이러한 문제를 식별하는 것이 첫 번째 단계입니다. 진정한 도전은 기능에 영향을 미치지 않고 고치는 데 있습니다.

실제 사이트에서 INP를 줄이는 전술

우리는 INP가 열악한 원인을 알았으므로 웹 사이트에서이를 완화하기위한 실용적이고 실습 전략을 살펴 보겠습니다.

1. JavaScript 실행 최적화

긴 작업과 과도한 스크립팅을 최소화하면 INP가 크게 향상 될 수 있습니다. 방법은 다음과 같습니다.

긴 작업 중단 : setTimeout() , requestIdleCallback() 또는 requestAnimationFrame() 사용하여 헤비 조작을 작은 청크로 자릅니다.
비정규 JS를 연기하십시오. 중요한 렌더링 경로에서 초기 상호 작용을 위해 스크립트를 이동하십시오.
웹 작업자 사용 : 메인 스레드에서 복잡한 계산을 오프로드하십시오.

2. 예압 임계 자산

모든 자산이로드되기 전에 사용자는 UI와 상호 작용할 수 있습니다. 누락 된 글꼴이나 이미지로 인한 지연을 피하려면 필요한 내용을 사전로드하십시오.

페이지로드 직후 사용 된 글꼴은 <link rel="preload" as="font" ...> 사용하여 사전로드해야합니다.
상호 작용 후 발생하는 이미지는 우선 순위를 정하고 사전로드해야합니다. 특히 CTA 관련 비주얼.

3. 상호 작용 준비 구성 요소를 사용하십시오

React, Vue 또는 Angular와 같은 프레임 워크를 사용하는 경우 상호 작용 후 코드 스플릿 또는 게으른로드 구성 요소를로드 할 수 있습니다. 이것은 클릭 후 지연으로 이어집니다. 대신에:

Prefetch 구성 요소는 동적 가져 오기를 사용하여 곧 상호 작용할 수 있습니다.
복잡한 재주문을 연기하고 필요하지 않는 한 재 계산 레이아웃 스타일을 피하십시오.

React Profiler 또는 Svelte의 성능 검사관 과 같은 도구를 고려하십시오.

4. 스타일과 레이아웃 jank를 줄입니다

스타일의 재 계산 및 레이아웃 스래싱은 트랙에서 INP 개선을 막을 수 있습니다. 일반적인 수정 사항에는 다음이 포함됩니다.

모든 상호 작용에서 재 계산하는 대신 계산 된 값을 캐싱합니다.
'Will-Change'및 CSS 격리를 사용하여 무거운 원소가 글로벌 리플 로우를 트리거하는 것을 분리합니다.

5. 이벤트 핸들러를 최적화하십시오

이벤트 청취자를 기울여 유지하십시오. 예를 들어:

클릭 후 즉시 데이터를 가져 오거나 유효성 검사를 실행하지 마십시오.
다음 페인트가 지연되지 않도록 Async/Await 패턴을 사용하거나 약속을 사용하여 논리를 분할하십시오.

또한 비 포장 이벤트 리스너는 스크롤 성능을 지연시켜 전반적인 응답 성에 간접적으로 영향을 줄 수 있습니다.

사례 연구 : 소매 사이트에서 INP 개선

실제 예를 살펴 보겠습니다. 주요 전자 상거래 소매 업체는 모바일에서 평균 600ms 인 INP 값을 발견했습니다. 주요 문제는 "CART에 추가"를 클릭하면 데이터베이스 업데이트와 카트 애니메이션이 즉시 트리거되어 기본 스레드가 시작됩니다.

개발 팀은 여러 INP 최적화를 적용했습니다.

100ms의 setTimeout() 로 데이터베이스 업데이트를 연기했습니다.
웹 작업자에게 해제 된 분석 이벤트.
JavaScript 기반 애니메이션 대신 CSS 변환을 사용하여 카트 애니메이션을 간소화했습니다.

결과? INP는 140ms로 떨어졌고 2 주 내에 12%의 전환이 증가하는 것을 보았습니다.

INP를 지속적으로 모니터링합니다

일회성 수정으로는 충분하지 않습니다. 웹 성능은 지속적인 약속입니다. INP를 통제하는 방법은 다음과 같습니다.

실제 사용자 모니터링 (Rum) : New Relic , Speedcurve 또는 Plausible 과 같은 럼 도구를 통합합니다.
INP 예산 설정 : Lighthouse CI 또는 사용자 정의 감사를 사용하여 CI/CD 파이프 라인에서 성능 임계 값을 설정하십시오.
트렌드 분석 : 세션에서 INP 점수를 추적하고 UI, 기능 또는 교통 조건의 변화와 관련이 있습니다.

더 나은 INP의 인간 영향

하루가 끝나면 성능은 단순한 메트릭이 아니라 사용자에 관한 것입니다. 더 빠른 상호 작용은 더 자연스럽게 느껴져 사람들이 사이트를 신뢰하고 더 오래 머무르도록 도와줍니다. INP는 기술적으로 들릴 수 있지만 사이트가 사용자의 손에 어떻게 느끼는지 직접 반영합니다.

더 나은 INP 홍보 :

전환율 증가
높은 사용자 유지
접근성과 포용성 향상

전자 상거래, 출판, 응용 프로그램 또는 미디어를 개발하든 INP 최적화는 디지털 경험이 더 빠르고 빠르며 인간의 기대에 더 연결됩니다.

결론

INP는 사용자 상호 작용 측정의 새로운 프론티어로 , 개발자에게보다 완전한 성능 그림을 제공합니다. 장기 작업을 중단하고 중요한 경로 렌더링 최적화 및 사용자 입력을 사전 모니터링하면 현명한 기술적 결정을 내리면 사이트의 대응 성을 크게 향상시킬 수 있습니다.

작게 시작하고 잘 측정하고 계속 반복하십시오 . 결국 성능은 단순한 목표가 아니기 때문입니다. 사용자 약속입니다.