레벨 2 - 다음 페인트 스코어카드 규칙에 대한 Core web vitals 정보 강조

INP(합성 복합체 to Next Paint)는 귀하의 웹사이트가 클릭, 탭, 키 누름과 같은 사용자 복합 복합에 얼마나 빨리 반응하는지를 측정합니다. 이 점수표 규칙은 사용자를 좌절시키고 참여와 전환에 부정적인 영향을 미칠 수 있는 반응성 문제를 식별하고 해결하는 데 도움이 됩니다.

이 점수카드 규칙에 관하여

다음 페인트 규칙에 대한 이러한 상호작용은 디지털 경험 성숙도 모델 의 레벨 2(사전 예방적)의 일부입니다. 페이지가 사용자 상호작용에 신속하게 반응하는지 평가하여 원활하고 반응성이 뛰어난 사용자 경험을 보장합니다.

이것이 중요한 이유: 상호작용 반응이 느리면 인터페이스가 느리고 반응성이 없어 사용자가 여러 번 클릭하거나 작업을 포기하거나 애플리케이션에 대한 신뢰를 잃게 됩니다. 빠른 INP 점수는 사용자에게 빠르고 안정적으로 느껴지는 인터페이스를 나타냅니다.

이 규칙의 작동 방식

이 규칙은 페이지의 75번째 백분위수에서 다음 페인트(INP) 시간이 Google의 데이터 기준인 200밀리초를 초과하는지 평가합니다. 이는 "좋은" 반응성의 한계입니다. INP는 사용자가 상호작용을 시작한 후부터 브라우저가 다음 시각적 업데이트를 표시할 때까지의 시간을 측정합니다.

중요 참고 사항: INP는 초가 아닌 밀리초로 측정됩니다. 메트릭은 페이지 방문 중 최악의 블록결합 반응성을 포착합니다.

점수 이해하기

통과(녹색): 75번째 백분위수 INP가 200ms 이하(좋음)
실패(빨간색): 75번째 백분위수 INP가 200ms를 초과함(개선 필요 또는 불량)
개구리, 목표: 최적의 사용자 환경을 위해 200ms 미만의 INP 시간을 달성하세요.

Google의 INP 철도 값, 이래:

좋음: 200ms 이하
개선 필요: 200ms ～ 500ms
나쁨: 500ms 이상

INP가 측정하는 것: INP는 클릭, 탭, 키보드 입력을 포함한 사용자 인터페이스 상호작용의 반응성을 포착합니다. 이는 상호작용이 시작된 후부터 브라우저가 사용자에게 시각적 반응을 제시할 때까지 걸리는 시간을 측정합니다.

상호작용 반응성 이해

INP는 상호작용 처리의 세 단계를 측정합니다.

입력 지연

사용자 상호작용(클릭/탭)부터 이벤트 핸들러가 실행되기 시작할 때까지의 시간

메인 스레드가 다른 작업으로 바빠서 발생함
JavaScript 실행 시간을 줄이면 개선될 수 있습니다.

처리 시간

이벤트 핸들러 실행 및 애플리케이션 상태 업데이트에 소요된 시간

JavaScript 코드 실행 및 DOM 업데이트가 포함됩니다.
효율적인 코드와 알고리즘을 통해 최적화 가능

프레젠테이션 지연

핸들러가 완료되는 순간부터 브라우저가 시각적 업데이트를 제공할 때까지의 시간

스타일 계산, 레이아웃 및 페인트 작업이 포함됩니다.
CSS를 최적화하고 DOM 복잡성을 줄이면 개선될 수 있습니다.

INP가 느린 일반적인 원인

무거운 JavaScript 실행: 복잡한 계산으로 인해 메인 스레드가 차단됨
대규모 DOM 조작: 레이아웃 재계산이 필요한 광범위한 변경
비효율적인 이벤트 핸들러: 클릭/탭 핸들러의 최적화되지 않은 코드
제3자 펼쳐보기: 푸시형 복합 처리를 방해하는 외부 코드

INP 점수를 개선하는 방법

점수에서 상호작용 반응성이 낮은 것으로 나타나면 다음 단계에 따라 성능을 최적화하세요.

1. 느린 상호작용을 식별하세요

뉴렐릭 브라우저 모니터링 사용: INP 데이터를 검토하여 가장 느린 클러스터 합성을 식별합니다.
상호작용 패턴 분석: 어떤 사용자 작업(클릭, 양식 입력, 탐색)이 반응성이 낮은지 파악합니다.
장치 및 네트워크 패턴 확인: 느린 INP가 특정 장치 또는 연결 유형에 영향을 미치는지 확인합니다.
중요한 상호작용의 우선 순위 지정: 사용자 작업 및 전환에 필수적인 상호작용에 집중

2. JavaScript 성능 최적화

메인 스레드 차단을 줄이세요:

setTimeout() 또는를 사용하여 긴 작업을 더 작은 청크로 분할합니다. requestIdleCallback()
무거운 컴퓨팅 작업에는 웹 워커를 사용하세요
필요한 JavaScript만 로드하도록 코드 분할을 구현합니다.

이벤트 핸들러 최적화:

스크롤이나 크기 조정과 같은 빈번한 이벤트를 디바운스합니다.
더 나은 성능을 위해 많은 요소에서 이벤트 위임을 사용하세요
이벤트 핸들러 외부에서 DOM 쿼리 및 계산 캐시
상호작용 핸들러에서 동기 작업을 피하세요

코드 효율성 개선:

병목현상, 병목지점을 식별하기 위한 JavaScript 성능 프로필
알고리즘과 데이터 구조 최적화
사용하지 않는 코드 제거 및 의존성/종속성
효율적인 DOM 조작 기술을 사용하세요

3. 렌더링 성능 최적화

레이아웃 스래싱을 줄이세요:

배치 DOM 읽기 및 쓰기를 통해 레이아웃 재계산을 최소화합니다.
레이아웃 속성 대신 애니메이션에 CSS 변형 및 불투명도를 사용하세요.
긴 목록에 대한 가상 스크롤 구현
강제 동기 레이아웃 작업 방지

CSS 간소화:

복잡한 CSS 선택기를 최소화하세요
스타일 계산이 필요한 DOM 요소의 수를 줄이세요
CSS 컨테인먼트를 사용하여 렌더링 작업을 분리합니다.
CSS 애니메이션 및 전환 최적화

4. 성능 모범 사례 구현

최신 웹 API를 사용하세요.

화면 밖 콘텐츠에 대해 content-visibility 을 구현합니다.
부드러운 애니메이션을 위해 requestAnimationFrame() 사용하세요
브라우저 캐싱 및 서비스 워커 활용
적절한 리소스 우선 순위 지정을 구현하세요

모니터링 및 테스트:

Chrome DevTools 성능 패널을 사용하여 실리콘 합성 프로파일링
다양한 기기, 특히 하위 사양의 모바일 기기에서 테스트하세요.
뉴렐릭 브라우저로 실 사용자 모니터링 구현
INP 회귀 감지에 대한 알림 설정

구현 지침

INP 모니터링 설정

Core Web Vitals 데이터 수집을 활성화하여 뉴렐릭 브라우저 모니터링 구성
사용자 환경 목표에 따라 적절한 측정값을 설정하세요.
최적화를 구현하기 전에 기준 측정을 설정하세요
다양한 페이지와 사용자 세그먼트에서 INP 성능을 추적하는 대시보드를 만듭니다.

실행 가능한 알림 만들기

INP 성능 저하에 대한 알림을 설정합니다.

좋은 바이올린 값, 경계: 75번째 백분위수가 200ms를 초과하는 경우 공지
불쌍한 청년 값, 경계: 75번째 백분위수가 500ms를 초과할 때 중요한 알림
트렌드 모니터링: 주별 20% 저하에 대한 공지
세그먼트별 알림: 모바일과 데스크톱 성능을 별도로 모니터링합니다.

빌딩 최적화 흐름

정기 평가: INP 성능 데이터에 대한 월별 검토 일정을 수립합니다.
우선순위 프레임워크: 트래픽이 많고 INP 점수가 낮은 페이지에 집중
A/B 테스트: 개선 사항을 검증하기 위해 사용자 세그먼트를 사용하여 최적화 테스트
에스컬레이션 프로세스: 보안, 한계 위반 시 엔지니어링 참여에 대한 명확한 경로 정의

중요한 고려 사항

맞춤형 평가: 이 지침은 기초를 제공하지만 모든 기능은 고유합니다. 특정 사용자 환경 목표와 비즈니스 목표를 기반으로 INP 성능을 평가합니다. 성능 저하, 목표를 설정할 때 사용자 기반, 일반적인 복합체 복합 패턴 및 중요한 사용자 여정을 고려하세요.

지속적인 개선: 웹 성능 최적화는 지속적인 프로세스입니다. 사용자의 기대, 브라우저 기능, 웹 표준은 끊임없이 진화합니다. 정기적으로 INP 전략을 검토하고, 측정 기준을 업데이트하고, 최적화 기술을 적용하여 우수한 상호작용 반응성을 유지하세요.

전체적인 접근 방식: INP는 포괄적인 성능 전략의 일부로 사용하면 가장 효과적입니다. 완벽한 사용자 환경 가시성을 위해 다른 Core Web Vitals (CLS 및 LCP) 및 기존 성능 지표와 결합합니다.

다음 단계

이 점수표 규칙을 구현한 후:

Core Web Vitals 최적화를 완료하려면 L3 Core Web Vitals LCP 점수표 규칙을검토하세요.
JavaScript 후속 추적을살펴보고 복합 복제 문제를 식별하세요.
포괄적인 프런트엔드를 위한 AJAX 모델구현 옵저버빌리티
체계적인 디지털 경험 최적화를 위한 경험 구현 로드맵을고려하세요.

사용자의 편의를 위해 제공되는 기계 번역입니다.