INP (다음 페인트와의 상호 작용) : 핵심 핵심 웹 생명

웹 사이트에 들어가서 클릭 한 드롭 다운 메뉴 또는 인쇄 된 검색 상자가 아무런 일이 발생하지 않은 버튼을 찾을 때 ... "지연"의 느낌은 "INP"라는 최신 핵심 웹 생명체 또는 다음 페인트와의 대화식으로 Google이 "Revolution"에 올 것입니다!

귀하가 다운로드가 충분하다고 생각한 웹 사이트 소유자, 마케팅 담당자 또는 웹 개발자 인 경우, INP는 "로드 속도"가 "로드 속도"가 아니라 모든 사용자의 동작에 대한 "응답 속도"의 척도를 측정하기 때문에 오늘은 다시 생각해야 할 수도 있습니다. 사용자 경험 (UX)과 SEO에 직접 영향을 미치는 중요한 요소가 되려고합니다! 이 기사는 쉽게 이해하기 위해 -Depth INP로 안내합니다. 가이드, 최적화 방법을 사용하면 고객에게 감동을받을 때까지 "지연"하는 데 사용 된 웹 사이트를 변경하기 위해 손으로 제작했습니다.

인생의 실제 문제 : "여전히"웹 사이트는 직원과 같습니다.

당신이 매우 흥미로운 제품 광고를 발견한다고 상상해보십시오. 웹 사이트를 빨리 클릭하십시오. 웹 페이지는 눈을 깜박이면서 아름답게로드되었습니다. "색상 선택"버튼을 누르고 자하는 제품을 찾으십시오. 당신은 좌절하기 시작하고 웹 사이트가 깨 졌는지 또는 인터넷이 있는지 확실하지 않습니다. 당신은 문제가 있습니다. 결국, 당신은 방금 창을 닫았습니다. 그런 다음 대신 다른 웹 사이트에서 구매하십시오

전자 상거래 웹 사이트의 "악몽"과 전환이 필요한 모든 웹 사이트입니다. "클릭 앤 홀드 및"프레스 및 지연 "문제는 엄청난 나쁜 경험을 창출합니다. 신뢰성을 파괴하고 불행히도 고객을 잃게됩니다. 불행히도 많은 돈을 사용하여 SEO를 촬영하거나"느린 응답 "이라는 작은 문제입니다. 이것은 돈을 낭비하는 중요한 요소입니다.

‍

그림을위한 프롬프트 : 그래픽은 사용자를 보여줍니다. 모래 시계 화면의 버튼에 손가락이 떨어지는 동안 모래 시계 기호 또는 로딩 아이콘 회전에 대한 응답없이

그 문제가 발생한 이유 : "한 명의 직원"이라는 메인 스레드

우리 웹 사이트가 "느린 응답"또는 높은 INP의 주된 이유는 브라우저에서 나옵니다. "중요한 직원"은 "메인 스레드"라는 유일한 사람입니다. 이 직원은 거의 모든 것에 책임이 있습니다. 웹 페이지 디스플레이 (렌더 레이아웃), CSS 코드 관리, 복잡한 JavaScript 실행에 이르기까지

이제 메인 스레드가 큰 JavaScript 처리와 같이 오랫동안 열심히 일하도록 주문하는 경우 아름다운 애니메이션이나 타사로부터 많은 양의 데이터 관리를 만들어주는 반면, 메인 스레드는 이러한 작업으로 "회전하는 헤드"입니다. 그런 다음 사용자는 "클릭"버튼 또는 "입력"으로 밀었습니다. 메시지가 들어옵니다. 메인 스레드는 빈 손이 "손님을 받거나"해당 주문에 즉시 응답하지 않습니다. 따라서 작업이 먼저 완료되기까지 기다려야합니다. 사용자가 수행하는 일로 전환하는 것은 우리가 느끼는 "지연"또는 "뛰어난"입니다. 이 문제는 일반적으로 다음과 같습니다.

• 너무 오래 작동하는 JavaScript (긴 작업) : 메인 스레드를 즉시 차단하는 데 50 밀리 초 이상이 걸리는 스크립트.
• DOM은 크고 복잡합니다. 요소가 많을수록 각 새로운 결과를 표시 할 수있는 많은 계산이있을수록 더 오래 걸립니다.
• 종종 이벤트 콜백 : 다양한 이벤트 (예 : Click, Scroll, Keypress)를 다루는 코드를 작성하는 것만으로는 충분하지 않습니다.
• 무거운 타사 스크립트 : 채팅 시스템, 분석 또는 광고와 같은 외부 스크립트도 주요 스레드 리소스와 경쟁 할 수 있습니다.

핵심 웹 생명체를 이해하는 것은 이러한 문제를 해결하는 데 중요한 기초입니다.

‍

삽화 프롬프트 : 쉬운 인포 그래픽 이미지. "메인 스레드"를 보여주는 것은 옆에있는 전화에 응답 할 시간이 없을 때까지 큰 문서 (JavaScript)를 만드는 유일한 직원과 같습니다.

왼쪽이라면 어떻게 영향을 미칩니다 : "성가신"뿐만 아니라 비즈니스의 "재난".

INP 가치가 높거나 웹 사이트가 느리게 응답하면 "좌절 된"사용자에게 영향을 줄뿐만 아니라 장기적으로 비즈니스 및 SEO에 직접적인 영향을 미칩니다.

• 전환율. DANG : 사용자가 발생하면 제품 선택 버튼을 누르는 것과 같이 처음부터 문제를 사용합니다. 또는 그 양식을 작성하여 최종 단계에 도달 할 수있는 기회를 작성하십시오.
• Boundce 비율이 높습니다 : 첫인상이 중요합니다. 웹 사이트에서 나쁜 경험을 만들면 사용자가 즉시 누르십시오. 그리고 다시 돌아올 생각이 없었습니다
• 브랜드 이미지를 깨십시오 : 느리고 어려운 웹 사이트. 무지와 비전문가를 반영하여 축적 된 신뢰성을 파괴합니다.
• SEO 순위 : 2024 년 3 월 이후 Google은 INP를 공식 핵심 웹 생명체 중 하나로 가져 왔습니다. FID를 교체하려면 (첫 번째 입력 지연). 이는 INP가 잘못된 웹 사이트가 검색 페이지에서 직접 줄어드는 것을 의미합니다. 특히 B2B 비즈니스 웹 사이트가 가장 중요합니다.

다시 말해, 웹 사이트에 아름다운 가게를 여는 것과 같은 INP 가치가 높습니다. 그러나 고객이 입장 할 수 있도록 문을 잠그는 것은 비즈니스 기회를 파괴하고 수행 한 모든 마케팅의 효율성을 줄이는 것입니다.

‍

그림의 프롬프트 : 전환율 라인을 보여주는 그래프가 급락하고 Bondce rate line은 백그라운드에서 빨간색 인 INP 아이콘으로 상승합니다.

해결책이 있습니까? 시작 장소 : 전체 최적화 INP 교과서 열기

좋은 소식은 높은 INP 문제를 해결하고 개선 할 수 있다는 것입니다. "독립적 인 반환"의 핵심은 언제든지 사용자에게 응답 할 준비가되도록 기본 스레드에 대한 핵심입니다. 먼저 문제의 원인을 찾으려면 "결과 측정"으로 시작해야합니다. 그런 다음이 지침을 수정하십시오

1. 문제가있는 상호 작용을 측정하고 찾으십시오.

• 실험실 데이터 도구 사용 : 예를 들어 Google Pagespeed Insights 또는 Chrome Devtools (Performance)를 사용하여 발생하는 "긴 작업"을 시뮬레이션하고 찾습니다.
• 필드 데이터 도구 사용 : Chrome 사용자 경험 보고서 (CRUX)를 통해 실제 사용자의 정보를 참조하거나 Google 라이브러리를 설치하여 INP 데이터를 사용자로부터 직접 저장하십시오.

2. 코드 기술 최적화 (INP 감소의 핵심) :

• 큰 작업을 서브 타스크로 나눕니다. 가장 중요한 기술은 "항복"이며, 메인 스레드를 때때로 자유롭게 해제합니다. 오랫동안 작동하도록 주문하는 대신 'Settimeout'을 사용하여 일부 기능의 기능을 지연하여 기본 스레드 리듬을 "호흡"하고 사용자에게 응답 할 수 있습니다. Google의 Web.dev 의 공식 데이터 소스에서 자세한 내용을 읽으십시오
• 레이아웃 스래싱을 피하십시오 : 요소의 크기를 읽으려는 스크립트를 쓰지 말고 동일한 루프로 번갈아 새로운 값을 쓰지 마십시오. 브라우저가 불필요하게 레이아웃을 반복적으로 계산해야했기 때문에
• DOM의 복잡성을 줄이십시오 : 요소가 적을수록 요소가 많을수록. 브라우저가 더 쉽고 빠릅니다. HTML 구조를 가능한 한 간단하게 만드십시오.
• CSS에`컨텐츠 가시성 SP 및``를 포함하는 '' '를 사용하여 : 렌더링 할 필요가 없거나 다른 부품과 별도로 계산할 수없는 부품을 브라우저에 알리기 위해. 디스플레이의 부담을 많이 줄이는 데 도움이됩니다.
• 타사 스크립트 관리 : 필요에 따라 스크립트를로드하고 웹 페이지의 기본 페이지를 차단하지 않도록 속성 'Async` 또는 Defer`를 사용하십시오. 렌더 블로킹 리소스를 수정하는 방법을 배우면 이 부분에서 많은 도움이됩니다.

Google 검색 팀의 깊은 정보는 직접 소개 INP에서 핵심 웹 생명에 이르기까지 연구 할 수 있습니다.

‍

그림을위한 프롬프트 : INP 최적화 3 단계 : 1. 측정 (확대 안경 아이콘) 2. 식별 (대상 항공) 3.

성공했던 실제의 예 : "손가락을 클릭"한 전자 상거래 웹 사이트.

이미지를 명확하게 보려면 전자 상거래 웹 사이트의 경우를 들어 올리고 싶습니다. 높은 INP 문제가 발생한 패션 의류를 판매하십시오. 그들의 웹 사이트에는 기능이 있습니다. "필터"(매우 복잡한) 사용자는 의류, 색상, 크기 및 가격대를 모두 선택할 수 있습니다.

원래 문제 : 사용자가 "빨간색"선택과 같은 필터를 선택할 때마다 전체 페이지가 1-2 초 동안 유지되어 JavaScript가 모든 신제품을 처리하고 표시 할 때까지 기다립니다. 많은 성가심을 만듭니다. 많은 고객이 서로 옆에 필터를 선택하기 위해 클릭하고 웹 사이트가 너무 길어 의무에서 가장 중요한 전환율이됩니다.

INP Mission 최적화 : 개발 팀은 "긴 작업 브레이크 업"기술을 사용하여 편집을 시작했습니다. 그들은 한 번에 모든 코드를 실행하는 데 변경되었습니다. 'settimeout'을 사용하여 부품으로 나뉩니다. 사용자가 필터를 클릭하면 시스템이 로딩 스피너를 즉시 표시 한 다음 (즉시 응답) JavaScript가 정보를 가져 와서 신제품을 백그라운드에서 렌더링하게합니다.

놀라운 결과 : 제품 페이지의 INP는 ~ 800ms에서 ~ 150ms로 줄어 듭니다 ( "나쁜"이 "좋은"). 원활한 사용 경험은 모바일 애플리케이션과 같습니다. 사용자는 걸림돌을 느끼지 않고도 많은 필터를 지속적으로 선택하도록 누를 수 있습니다. ** 필터를 사용하는 세션은 최대 25%**의 전환율을 가지고 있으며 ** 페이지의 이탈률은 15%하락 ** 사용자의 경험을 실제로 바꾸고 비즈니스 결과를 생성 할 수있는 INP 최적화의 힘입니다. Shopify의 상점의 속도를 증가시키는 것과 동일합니다 .

‍

삽화 프롬프트 : 전자 상거래 페이지의 전과 후 페이지. 첫 번째 측면은 사용자를 보여줍니다. 사용자를 보여준 후 필터를 자극했습니다.

따르고 싶다면 어떻게해야합니까? (즉시 사용할 수 있음) : 점검 목록. 웹 사이트에서 건강 검진.

웹 사이트를 변경할 준비가 되었으나 "손가락을 클릭하십시오"아직? 문제가 축적 될 때까지 기다릴 필요가 없습니다. 이 쉽게 체크리스트를 따르고 최적화 INP를 즉시 시작하십시오.

1. Google Pagespeed Insights : 웹 사이트를 입력하십시오. "성능 문제 진단"이라는 주제를 살펴보고 아래로 스크롤하여 Interactive To Next Paint (INP)라는 메트릭을보십시오. 당신의 가치는 얼마입니까? (좋은 = 200ms 미만, 개선해야합니다 = 200-500ms, bad = 500ms보다 높음)
2. 느린 상호 작용을 찾으십시오. Pagespeed Insight는 종종 가장 긴 시간이 걸리는 버튼을 클릭, 메뉴 열기와 같은 상호 작용을 알려줍니다. 그것이 당신의 첫 번째 목표입니다.
3. 개발자와 대화하거나 DevTools 자체를 열면 이 보고서를 개발자에게 보냅니다. 또는 직접 할 수 있다면 Chrome DevTools를 성능 탭으로 열고 긴 빨간 밴드를 찾는 데 문제가있는 상호 작용을 시도하십시오. "긴 작업"이라는 신호가 있습니다
4. 가장 쉬운 일로 시작하십시오. 불필요하게 작동하는 JavaScript를 찾아보십시오. 웹 페이지가 완료되었습니다. 'settimeout'을 사용하여 1-2 초 동안 작동을 지연시킵니다.
5. 타사 스크립트 확인 : 플러그인이나 스크립트가 있습니까? 사용자 또는 열 맵이 열리지 않은 채팅 시스템과 같은. 일시적으로 닫고 결과를 다시 측정하십시오.
6. 전문가에게 문의하십시오 : 문제가 복잡한 경우 고급 웹 사이트 개발 전문가 코드 구조를 확인하고 편집하는 것이 장기적으로 가장 가치있는 투자 일 수 있습니다.

‍

그림을위한 프롬프트 : Pagespeed Insights 아이콘, 코드 아이콘, 플러그 인 아이콘 및 전문가 아이콘과 같은 각 구성 요소 아이콘이있는 INP 검사 항목이있는 체크리스트 이미지.

사람들이 궁금해하는 경향이있는 질문과 정해진 답변

따라서 INP를 철저히 이해할 수 있습니다. 명확한 답변으로 일반적인 질문을 작성했습니다.

INP는 FID (첫 번째 입력 지연)와 어떻게 다릅니다. 오래된 웹 활력은 어떻습니까?
FID는 "첫 번째 입력"(첫 번째 입력) 만이지만 사용자가 사용하는 동안 발생하는 "모든 대화식"측정을 INP합니다. 첫 번째 클릭부터 최종 클릭까지 INP는 전체 사용자 경험을 훨씬 더 잘 대표합니다.

"좋은"INP 값은 얼마입니까?
Google의 기준에 따르면, 좋은 INP 값은 200 ~ 500ms 사이에 있으면 개조 된 것으로 간주되며 500ms보다 높은 것으로 간주되는 경우는 200 ~ 500ms이면 200 ~ 500ms이어야합니다.

나는 프로그래머가 혼자서 INP를 향상시킬 수 없습니까?
코드 지식이 없으면 일부 개선이 어려울 수 있습니다. 그러나 당신이 할 수있는 것은 1입니다. Pagespeed 통찰력과 같은 도구를 사용하여 문제를 "진단"하십시오. 2. 플러그 인 또는 불필요한 외부 스크립트 수를 줄입니다. 3. 코드를 잘 작성하고 성능과 4를 강조하는 테마 또는 유혹을 선택하십시오.

내 웹 사이트는 일반 정보 일뿐입니다. INP에 관심이 필요하지 않습니까?
절대적으로 필요합니다! 웹 사이트 유형에 관계없이 메뉴를 누르거나 비디오를 클릭하거나 쿠키 수락 버튼을 누르는 것과 같은 부드러운 상호 작용을 갖는 것은 모두 사용자의 안정성과 경험에 영향을 미칩니다. 그리고 가장 중요한 것은 SEO 순위에 직접적인 영향을 미칩니다.

‍

그림을위한 프롬프트 : 캐릭터, 프로그래머 및 마케팅 담당자가있는 물음표 (FAQ)가있는 천칭 자리 모양의 아이콘이 서서 이야기하고 있습니다.

이해하기 쉬운 요약 + 노력하고 싶어

요약하면, Next Paint와의 상호 작용 (INP)은 Google이 웹 사이트의 품질을 측정하기 위해 새로운 표준으로 사용하는 "기술적 인"두통 "이 아닙니다. HEART는 쉽습니다. 사용자가 웹 사이트에서 무언가를 할 때 즉시 응답을보아야합니다.

INP가 높은 웹 사이트를 떠나는 것은 고객의 목소리를 무시하는 것과 같습니다. 그것은 전체 경험, 신뢰성, 판매 및 SEO 순위를 파괴합니다. 투자는 오늘날 INP를 최적화하는 데 효과적이며 숙제를하고 Google을 보내는 것이 아니라 장기적으로 비즈니스를위한 강력한 토대입니다. 모든 사용자와 감정에 대한 존중을 보여줍니다.

더 많은 고객을 잃을 때까지 웹 사이트 "지연"을 기다리지 마십시오. 오늘 귀하의 웹 사이트를 확인하기 위해 준 점검 목록을 사용해보십시오. 또는 도우미가 전자 상거래 최적화 감사를 원한다면 , 이는 모든 문제에서 모든 검색 및 해결을위한 좋은 출발점입니다. 이제 사용자를 클릭 할 때마다 인상으로 변경해야합니다!

‍

삽화를위한 프롬프트 : 영감을주는 이미지는 클릭하는 마우스 아이콘에서 떠오르는 화살표를 보여줍니다. 깨끗하고 빠르게 보이는 웹 사이트의 배경으로 판매 그래프가 증가했습니다.

‍