Google은 사용자 경험을 개선하고 웹사이트의 성능을 평가하는 새로운 방법으로, 2024년 3월 12일부터 Core Web Vitals 지표 중 하나인 First Input Delay (FID)를 Interaction to Next Paint (INP)로 교체할 예정입니다. 이 변화는 웹 개발자와 SEO 전문가들에게 중요한 영향을 미칠 것으로 예상됩니다.
Interaction to Next Paint (INP)란 무엇인가?
Interaction to Next Paint (INP)는 사용자가 웹페이지와 상호작용한 후 브라우저가 화면에 변경된 픽셀을 렌더링할 수 있게 되는 시점까지의 시간을 측정하는 지표입니다.
이는 사용자의 입력에 대한 웹페이지의 반응성을 평가하는 데 중점을 둡니다. 예를 들어, 사용자가 버튼을 클릭했을 때 해당 동작에 대한 반응이 얼마나 빠르게 이루어지는지를 측정합니다.
왜 INP가 중요한가?
Interaction to Next Paint (INP)는 사용자 경험의 질을 직접적으로 반영하는 지표로, 웹사이트의 반응성이 사용자 만족도에 큰 영향을 미친다는 점에서 중요합니다.
웹사이트가 사용자의 입력에 빠르게 반응할수록, 사용자는 더 긍정적인 경험을 하게 됩니다. 이는 사용자의 사이트 체류 시간 증가, 전환율 향상 등 긍정적인 결과로 이어질 수 있습니다.
INP 최적화를 위한 전략
Interaction to Next Paint (INP) 최적화는 아래와 같이 사이트 로딩하는데 있어서 불필요한 동작은 뒤로 미루고, 빠르게 로딩을 시키는 것이 좋습니다.
관련하여 어려움을 느끼신다면, 제이키의 링크쥬스 커뮤니티에 댓글을 남겨주세요.
1. 성능 평가 도구 활용 : Google의 PageSpeed Insights, Chrome 사용자 경험 보고서 등을 사용하여 사이트의 현재 INP 성능을 평가합니다.
2. 문제 진단 및 해결 : 긴 JavaScript 실행 시간, 과도한 메인 스레드 활동, 큰 DOM 구조 등 INP를 저하시키는 요소를 식별하고 최적화합니다.
3. 코드 최적화 : 필요 없는 JavaScript 코드 제거, 비동기 로딩 활용, CSS 및 이미지 최적화 등을 통해 성능을 개선합니다.
4. 사용자 피드백 수집 : 실제 사용자로부터의 피드백을 통해 사이트의 반응성에 대한 인사이트를 얻고 개선 방향을 모색합니다.
메인 스레드 작업 최소화
- 자바스크립트 실행 시간 줄이기: 자바스크립트가 많으면 메인 스레드를 차단하여 페이지가 상호작용 가능해지는 시간이 지연될 수 있습니다. 긴 작업을 나누고, 비중요 JS를 지연시키며, 사용하지 않는 코드를 제거하세요.
- CSS 최적화: 불필요하거나 복잡한 CSS 선택자도 페이지 렌더링을 늦출 수 있습니다. CSS를 단순화하고 사용하지 않는 스타일을 제거하세요.
리소스 로딩 최적화
- 핵심 리소스 우선 로딩: 핵심 자산에 대해 rel=”preload”를 사용하여 초기에 로드되도록 하세요.
- 비중요 리소스 지연 로딩: 초기 페이지 로드에 중요하지 않은 이미지, 비디오, 스크립트는 지연 로딩하세요.
상호작용 준비성 향상
- 무거운 계산을 위해 웹 워커 사용: 무거운 계산을 웹 워커로 오프로딩하면 메인 스레드를 사용자 상호작용에 자유롭게 할 수 있습니다.
- 서드파티 스크립트 최적화: 서드파티 스크립트는 사이트 성능에 상당한 영향을 줄 수 있습니다. 불필요한 서드파티 스크립트를 감사하고 제거하거나, 주요 콘텐츠가 로드된 후에 로딩을 지연시키세요.
피드백으로 사용자 경험 향상
- 사용자 작업에 대한 즉각적인 피드백 제공: 처리 시간이 필요한 작업에 대해 시각적 피드백(예: 스피너나 진행 바)을 구현하여 사용자의 작업이 처리되고 있음을 알리세요.
성능 모니터링 및 측정
- 성능 모니터링 도구 사용: Lighthouse, Chrome DevTools, WebPageTest와 같은 도구를 사용하여 INP에 영향을 주는 문제를 식별하세요.
- 실제 사용자 모니터링(RUM): 실제 사용자의 성능 데이터를 수집하면 다양한 기기와 네트워크 조건에서 실제 사용자가 사이트를 어떻게 경험하는지에 대한 통찰을 얻을 수 있습니다.
모바일 최적화
출처 : https://web.dev/articles/optimize-inp?hl=ko
- 반응형 디자인: 사이트가 모든 기기 유형, 특히 대부분의 사용자가 접속할 수 있는 모바일에서 잘 작동하는지 확인하세요.
- 터치 이벤트 최적화: 터치 이벤트 핸들러가 최적화되어 있고 시각적 피드백을 지연시키지 않는지 확인하세요.
INP 전환의 영향
Interaction to Next Paint (INP)의 도입은 웹 개발 및 SEO 전략에 중대한 변화를 가져올 것입니다. 웹사이트의 검색 엔진 순위는 Core Web Vitals 지표에 크게 의존하므로, Interaction to Next Paint (INP) 최적화는 더욱 중요해질 것입니다.
개발자와 SEO 전문가는 이 새로운 지표에 대응하기 위해 웹사이트의 성능을 지속적으로 모니터링하고 개선해야 합니다.
Google은 2023년 3월 12일에 Core Web Vital 지표 중 하나인 First Input Delay (FID)를 새로운 Interaction to Next Paint (INP) 지표로 교체할 예정입니다.
Interaction to Next Paint (INP)는 사용자가 페이지와 상호작용(예: 버튼 클릭)한 시점부터 브라우저가 변경된 픽셀을 화면에 렌더링할 수 있게 되는 시점까지의 시간을 측정합니다. 이는 FID가 다루지 못했던 상호작용성의 측면을 포착하려는 목적을 가지고 있습니다.
FID는 2018년 Google의 Web Vitals 이니셔티브의 일부로 처음 도입되었으며, 사용자 경험의 핵심 측면을 최적화하는 데 도움이 되는 지표를 제공합니다.
시간이 지나면서 Google은 FID가 상호작용성을 평가하는 데 한계가 있다는 것을 깨닫고 2022년 5월에 INP를 실험적 지표로 소개했습니다. 이제 Google은 INP가 3월에 FID를 공식적으로 대체할 것이라고 확인했습니다.
개발자들은 Interaction to Next Paint (INP) 전환에 대비하여 자신의 웹사이트의 INP가 “좋음” 임계값을 충족하는지 확인해야 합니다. “좋음” 임계값은 페이지 로드의 75번째 백분위수에서의 성능을 반영합니다.
현재 “좋음” Interaction to Next Paint (INP) 임계값을 충족하지 못하는 사이트의 경우, Google은 다음과 같은 단계를 통해 전환을 최적화할 것을 권장합니다:
- PageSpeed Insights 및 Chrome의 사용자 경험 보고서와 같은 도구를 사용하여 현재 INP 성능을 평가합니다.
- INP를 늦추는 문제를 진단합니다(예: 긴 JavaScript 작업, 너무 많은 메인 스레드 활동, 큰 DOM 등).
- Google의 최적화 가이드를 따라 문제 영역을 최적화합니다. 이는 JavaScript 스트림라인, 입력 지연 감소, DOM 구조 단순화, CSS 선택자 정제 등을 포함할 수 있습니다.
Interaction to Next Paint (INP)가 Core Web Vital로 구현됨에 따라 웹 개발 및 사용자 경험에 여러 가지 영향을 미칠 수 있습니다. INP 점수는 웹사이트의 검색 엔진 순위와 사용자 참여에 영향을 줄 수 있으며, Google은 Core Web Vitals를 순위 알고리즘에 사용합니다.
웹 개발 관행은 상호작용 준비 최적화에 더 많은 초점을 맞출 수 있으며, 이는 애플리케이션 아키텍처 및 코드 변경을 요구할 수 있습니다. 성능 모니터링 도구 및 전략은 새로운 INP 지표를 추적하고 분석하기 위해 업데이트될 필요가 있습니다.
Google이 3월에 INP 지표로 전환함에 따라, 웹 개발자들은 사이트의 성능을 평가하고 상호작용성에 영향을 미치는 영역을 최적화하기 위한 조치를 취해야 합니다.
상호작용성이 검색 순위와 사용자 참여에 더 중요한 요소가 되면서, 개발자들은 원활한 전환을 보장하기 위해 지금 준비해야 합니다.
출처 : https://www.searchenginejournal.com/google-updates-core-web-vitals-with-interaction-to-next-paint-inp/506945/
결론
Google의 Core Web Vitals 지표 변경은 웹사이트 개발자와 SEO 전문가에게 새로운 도전을 제시합니다. INP의 도입은 사용자 경험을 더욱 중시하는 방향으로 웹사이트를 최적화하려는 Google의 의지를 반영합니다.
이에 따라, 웹사이트의 성능을 개선하고 사용자 만족도를 높이기 위한 노력이 더욱 중요해질 것입니다.
내 사이트에 트래픽 늘어나지 않는다면, "제이키의 링크쥬스"를 통해 질문을 하세요. 이제는 방법적인 부분을 아는것보다는 내 사업적 목적에 맞는 사이트나 블로그를 만들어서 트래픽을 늘려야하는 시대입니다.
