Open chouung opened 3 months ago
원문
사이트 성능은 검색 엔진 결과의 순위에 영향을 미칩니다. 3월 12일 이후에 사이트가 부정적인 영향을 받지 않도록 지금 바로 INP 최적화를 시작해야 합니다.
FID 코어 웹 바이탈은 웹 페이지가 해당 페이지에서 사용자의 첫 번째 동작에 얼마나 빨리 반응하는지를 측정하도록 설계되었습니다. 100ms 이하이면 좋은 FID 점수를 받을 수 있습니다.
하지만 FID는 전체 사용자 경험을 포착하지 못하기 때문에, 페이지의 전체 사용자 활동에서의 전반적인 반응성을 측정하도록 설계되었습니다.
최종 INP 값은 사용자의 각 상호작용 중 가장 긴 시간으로 결정됩니다.
INP는 특정 작업이 수행된 후 시각적 피드백이 표시되는 데 걸리는 시간에 초점을 맞추며, 네트워크 요청이나 UI 업데이트와 같은 상호작용의 최종 효과는 제외합니다.
크롬 기반 브라우저를 사용하여 INP 지표에 기여하는 액션과 이벤트를 조사하는 방법입니다.
INP가 측정하는 다음 사용자 상호작용 중 하나를 허용하는 웹 페이지를 선택합니다(스크롤 및 포인터 이동은 측정되지 않음)
녹화를 중지하고 프로필이 로드될 때까지 기다립니다.
이제 많은 데이터가 색상으로 구분된 블록의 형태로 레이블이 지정된 레인의 형태로 표시됩니다.
INP에 기여하는 요인을 분석할 때 확대해야 할 가장 중요한 레인은 '상호 작용'과 '메인'(브라우저의 메인 스레드)입니다.
브라우저는 메인 스레드를 사용하여 페이지의 모든 JavaScript를 실행하고, 페이지를 레이아웃하고, 변경 사항을 다시 계산하고, 메모리를 할당 및 해제(가비지 컬렉션)합니다.
메인 스레드에서 빨간색으로 강조 표시된 블록을 볼 수 있는데, 이는 오래 실행된 작업임을 나타냅니다. 오래 실행되는 자바스크립트 함수는 메인 스레드를 차단하여 페이지가 응답하지 않고 사용자 환경이 나빠질 수 있습니다.
Google은 INP 메트릭을 도입하여 개발자가 이 문제를 해결하도록 장려하고 있습니다.
나쁜 INP 점수를 유발하는 문제를 어떻게 해결해야 할까요? 늘 그렇듯이 상황에 따라 다르지만, 아래의 질문이 도움을 줄 수 있습니다.
시각적 피드백을 적시에 제공하고 있나요? 다음 페인트가 200ms 이내에 이루어지나요?
예상치 못한 상황에서 무언가가 실행되고 있나요? 해당 프로세스를 제거할 수 있나요?
각 사용자 상호작용을 개별적으로 처리해야 하나요, 아니면 디바운싱을 통해 함수 호출을 제한할 수 있나요?
메인 스레드에서 결과 함수 호출을 추출하여 웹 워커로 옮길 수 있나요?
페이지의 체감 응답성을 개선하는 몇 가지 실험적인 방법도 있지만 모든 브라우저에서 지원되지 않으므로 해당 요약에선 넘어갑니다.
INP란 무엇일까
원문
변경된 이유는 무엇인가요?
FID 코어 웹 바이탈은 웹 페이지가 해당 페이지에서 사용자의 첫 번째 동작에 얼마나 빨리 반응하는지를 측정하도록 설계되었습니다. 100ms 이하이면 좋은 FID 점수를 받을 수 있습니다.
하지만 FID는 전체 사용자 경험을 포착하지 못하기 때문에, 페이지의 전체 사용자 활동에서의 전반적인 반응성을 측정하도록 설계되었습니다.
최종 INP 값은 사용자의 각 상호작용 중 가장 긴 시간으로 결정됩니다.
INP는 특정 작업이 수행된 후 시각적 피드백이 표시되는 데 걸리는 시간에 초점을 맞추며, 네트워크 요청이나 UI 업데이트와 같은 상호작용의 최종 효과는 제외합니다.
개발 도구에서 INP 조사하기
INP가 측정하는 다음 사용자 상호작용 중 하나를 허용하는 웹 페이지를 선택합니다(스크롤 및 포인터 이동은 측정되지 않음)
녹화를 중지하고 프로필이 로드될 때까지 기다립니다.
이제 많은 데이터가 색상으로 구분된 블록의 형태로 레이블이 지정된 레인의 형태로 표시됩니다.
INP에 기여하는 요인을 분석할 때 확대해야 할 가장 중요한 레인은 '상호 작용'과 '메인'(브라우저의 메인 스레드)입니다.
브라우저는 메인 스레드를 사용하여 페이지의 모든 JavaScript를 실행하고, 페이지를 레이아웃하고, 변경 사항을 다시 계산하고, 메모리를 할당 및 해제(가비지 컬렉션)합니다.
메인 스레드에서 빨간색으로 강조 표시된 블록을 볼 수 있는데, 이는 오래 실행된 작업임을 나타냅니다. 오래 실행되는 자바스크립트 함수는 메인 스레드를 차단하여 페이지가 응답하지 않고 사용자 환경이 나빠질 수 있습니다.
Google은 INP 메트릭을 도입하여 개발자가 이 문제를 해결하도록 장려하고 있습니다.
INP 평가
개선하기
나쁜 INP 점수를 유발하는 문제를 어떻게 해결해야 할까요? 늘 그렇듯이 상황에 따라 다르지만, 아래의 질문이 도움을 줄 수 있습니다.
시각적 피드백을 적시에 제공하고 있나요? 다음 페인트가 200ms 이내에 이루어지나요?
예상치 못한 상황에서 무언가가 실행되고 있나요? 해당 프로세스를 제거할 수 있나요?
각 사용자 상호작용을 개별적으로 처리해야 하나요, 아니면 디바운싱을 통해 함수 호출을 제한할 수 있나요?
메인 스레드에서 결과 함수 호출을 추출하여 웹 워커로 옮길 수 있나요?
페이지의 체감 응답성을 개선하는 몇 가지 실험적인 방법도 있지만 모든 브라우저에서 지원되지 않으므로 해당 요약에선 넘어갑니다.