"INP (Next Paint와의 상호 작용)": 새로운 핵심 웹 생명 및 웹 플로에서 최적화.

웹 사이트가 "클릭 및 동결"고객이 탈출했습니다 ... 웹 플로 에서이 문제를 겪고 있습니까?

우리가 아름답게하려는 웹 플로우 웹 사이트를 느낀 적이 있습니까? 실제로 그것을 사용할 때가되었을 때, 그것은 실망스러운 경험을 만들었습니까? 고객이 제품 페이지를 입력하고 "자세한 내용보기"버튼을 누릅니다. 즉시 아무 일도 일어나지 않았습니다. 화면은 잠시 동안 유지됩니다. 고객이 "아직 클릭하려면 클릭 하시겠습니까?" 또는 "웹 사이트가 깨 졌습니까?" 망설임과 좌절감. 잠깐만, 이것은 사용자의 경험 (UX)을 파괴하고 알지 못하고 판매를 보유하는 "독"입니다. 이 문제는 느낌의 문제가 아닙니다. 그러나 "INP"라는 새로운 Google 측정 또는 다음 페인트와의 대화식으로 측정 할 수있는 것입니다.

프롬프트 : 빠른 응답 웹 사이트 (사용자 클릭 및 즉시 피드백이 있음)와 느린 웹 (사용자 클릭 및 회전 아이콘이 있거나 화면이 얼어 붙음) 간의 비교 그래픽과 다른 쪽이 좌절 된 얼굴을 만들었습니다.

웹 사이트가 왜 "부진"합니까? 문제의 원인을 뚫습니다 (다음 페인트와의 상호 작용).

문제 "클릭 및 이동"또는 "지연"문제는 발생하지 않지만 Google은 Next Paint (INP)로의 상호 작용을 통해 정의한 명확한 기술적 원인이 있으며, 이는 최초의 핵심 웹 비 가능성으로 첫 번째 입력 Dalay (FID)를 대체했습니다. 웹 페이지의 "응답 속도"는 사용자의 클릭, 탭에서 간단히 인쇄하는 것부터 "시작"에서 모든 지속 시간을 측정한다는 것입니다. 브라우저가 "화면의 변경 사항을 볼 때까지 클릭하십시오.

INP 값 (웹이 천천히 응답 한 것을 의미하는 주된 이유)은 브라우저 "Busy"의 "메인 스레드"입니다! 메인 스레드가 상점에서 모든 일을 해야하는 유일한 직원이라고 상상해보십시오. 둘 다 주문 (사용자로부터 입력 수신), Cook (JavaScript) 및 서빙 접시를 정리합니다 (화면에 결과 표시). 복잡한 순서 (JavaScript 또는 애니메이션)가있는 경우이 직원은 해당 주문으로 바쁠 것입니다. 웹 플로우 세계에서 즉시 새로운 주문을받을 시간이 없을 때까지. 메인 스레드를 종종 바쁘게 만드는 요소는 다음과 같습니다.

• JavaScript 무겁고 복잡한 : 사용자 정의 코드 사용, 잘 관리되지 않은 타사 (예 : 라이브 채팅, 분석)의 스크립트.
• 너무 열심히 작동하는 웹 플로 상호 작용 : 복잡한 애니메이션 만들기, 여러 단계, 특히 "클릭"으로 자극을받는 다른 작업을 차단합니다.
• Dom은 크고 복잡합니다. 여러 층이 겹치는 많은 요소가 있습니다. 변화가있을 때 브라우저가 더 오래 걸리고 표시됩니다.
• 견딜 수없는 CSS : JS만큼 자주는 아니지만 CSS는 매우 복잡합니다. 렌더에도 영향을 줄 수 있습니다

핵심 웹 생명 에 대한 이해는 전체 그림을보고 웹 플로에서 INP를 보다 효율적으로 최적화 할 수있는 것은 중요한 기초입니다.

삽화를위한 프롬프트 : 땀이 나고 손 모양의 아이콘을 사용할 때까지 여러 가지 방법 (JavaScript, CSS, Animation)으로 처리되는 뇌를 보여주는 간단한 인포 그래픽 이미지.

"느린"웹 사이트를 떠나는 것 ... 사용자뿐만 아니라 좌절감을 느끼지만 비즈니스는 느리게 "죽었다".

높은 INP 또는 천천히 응답하는 웹 사이트는 단지 작은 문제인 것처럼 보일 수 있습니다. 성가 시지만 실제로는 그 영향은 강렬하고 비즈니스의 마음으로 퍼져 있습니다. 웹 플로우 웹 사이트를 "느리게"봅시다. 일어날 일 :

• Bondce rate는 높습니다 : 디지털 시대의 사용자의 인내심은 매우 낮습니다. 몇 초만에 꺼져서 즉시 경쟁 업체로 탈출 할 수 있습니다.
• 전환율이 떨어집니다. 지연을 클릭하면 매번 "마찰"이므로 특히 제품 페이지 또는 수표 페이지와 같은 중요한 페이지에서 고객의 구매 경로를 방해합니다. "주문"버튼 "또는"지불 "이 천천히 응답하면 고객이 마음을 바꾸고 바스켓을 떠날 수있는 기회가 엄청납니다.
• 브랜드의 신뢰성을 깨뜨립니다 : 비전문적이고 무지를 상세하게 반영하는 느리고 사용 웹 사이트. 고객이 확실하지 않다고 느끼고 당신과 금융 거래를 감히하지 않습니다.
• SEO RANK : 이것은 가장 분명한 효과입니다! 2024 년 3 월부터 Google은 INP를 공식 등급 요소 중 하나로 가져 왔습니다. 즉, INP가 나쁜 웹 사이트가 필연적으로 줄어들 것임을 의미합니다. 유기 트래픽과 비즈니스 기회에 직접적인 영향을 미칩니다. 핵심 웹 생명체가 조직 웹 사이트에 미치는 영향은 모두가주의를 기울여야하는 것입니다.

요컨대, 느리지 않은 웹 사이트는 사용자를 자극적으로 만들지 만 간접적으로 비즈니스를 죽이고 있습니다. Google의 사용자 경험, 판매 및 비전 측면에서

삽화를위한 프롬프트 : "전환율", "사용자 신뢰"및 "SEO 순위"에 통합되고있는 3 개의 그래프 이미지는 상단으로 높은 INP를 가진 높은 최신 아이콘이 있습니다.

웹 사이트를 열면 "Sluggish"웹 사이트를 편집하십시오. 즉시 시작된 웹 플로우에서 INP 최적화.

원인과 영향을 알면 고칠 차례입니다. 좋은 소식은 WebFlow가 도구가있는 플랫폼이며 INP를 효과적으로 최적화 할 수있을 정도로 높다는 것입니다. 이 솔루션은 스크립트 관리에서 대화식 디자인에 이르기까지 전반적인 그림을 살펴 봐야합니다. 이것은 가이드 라인이며 시작해야한다는 점입니다.

• 1. JavaScript를 심각하게 검사하고 관리합니다.
  • 연기 및 비동기 사용자 정의 스크립트 : 첫 번째 웹 페이지 (예 : 라이브 채팅, Facebook 픽셀)와 함께로드 할 필요가없는 스크립트의 경우 태그에`Defer SH 또는 'Async'를 추가하십시오. 이렇게하려면 브라우저에 먼저 기본 콘텐츠를 다운로드 한 다음 나중에이 스크립트를 다운로드하도록 지시합니다.
  • 타사 스크립트에 대한 의존성을 줄이기 : 설치된 모든 스크립트가 여전히 필요한지 아닌지 스스로에게 물어보십시오. 모든 스크립트는 메인 스레드의 부담이기 때문에 사용되지 않은 것은 제거되어야합니다.
• 2. 웹 플로 상호 작용에 대해 생각하십시오.
  • 복잡한 상호 작용을 피하십시오. عند "클릭": 사용자가 클릭 할 때 시작되는 애니메이션. 간단하고 다른 요소가 구조를 움직이거나 변경하여 구조 (레이아웃 시프트)가 즉시 응답을 차단하기 때문에 명령하지 않아야합니다.
  • 간단한 피드백을 위해 애니메이션 대신 전환을 사용하십시오. 마우스 (호버)를 배치 할 때 색상, 버튼 또는 확장을 변경하십시오. 웹 플로우를 쉽게 설정할 수있는 CSS 전환 사용. 매우 복잡한 상호 작용을 만드는 것보다 자원을 적게 소비합니다.
• 3. 긴 작업을 작은 조각으로 나눕니다 (메인 스레드에 산출) :
  • 긴 처리로 사용자 정의 코드를 작성한 개발자의 경우 "Return Relpings"의 기술을 'Settimeout'을 사용하여 주기적으로 메인 스레드에 사용하여 작업을 부분적으로 나누어 브라우저가 숨을 쉬고 다른 사용자 입력에 응답해야합니다.
• 4. DOM을 작고 복잡하지 않게 만드십시오.
  • 필요에 따라 요소를 사용하십시오. 불필요하게 DIV DIV를 생성하지 마십시오. 간단한 구조와 시맨틱을 사용하면 변경 사항이 발생할 때 브라우저가 더 빨리 작동하는 데 도움이됩니다.
• 5. 필요에 따라 콘텐츠를로드 (게으른로드) :
  • 웹 플로에는 사진에 게으른로드 기능이 있습니다. 그러나이 개념을 아래 섹션이나 구성 요소에 적용 할 수 있습니다. 브라우저가 처음에 모든 것을 다운로드 할 필요가 없도록 JavaScript 기술을 사용하여

가장 좋은 시작은 Google Pagespeed Insights INP를 측정하고 기본 조언을 보는 것입니다. Google 및 WebFlow Performance 모범 사례 와 같은 신뢰할 수있는 정보 소스에서 추가 통찰력에 대한 위의 지침을 점차적으로 조사 할 수 있습니다 .

그림을위한 프롬프트 : 인포 그래픽 이미지는 JS 용 코드 아이콘, 상호 작용을위한 Magic Wand 아이콘, 가위 아이콘, 절단 및 게으른로드를위한 깃털로드 아이콘과 같은 각 항목 대신 아이콘으로 최적화 프로세스를 보여줍니다.

Real Thing의 예 : 전자 상거래 웹 사이트, Optimize Inp를 사용하여 판매를 전환하십시오.

더 명확하게보기 위해 웹 플로우에서 생성 된 전자 장치 인 웹 사이트 "Urban Gadgets"의 해상도 예를 제시하고 싶습니다. 처음에 그들의 웹 사이트는 매우 현대적으로 보였습니다. 아름다운 애니메이션과 훌륭한 제품 기능이 있습니다. 그러나 대신 큰 문제가 발생했습니다

문제 : 팀이 PagesPeed Insights를 사용할 때, 검사는 INP 값이 특히 제품 범주에서 "열악한"기준 (500ms 이상)에 있음을 발견했습니다. 사용자가 필터 (예 : 브랜드 선택, 가격 범위)를 클릭 할 때 웹 페이지는 제품이 복잡한 대화식으로 "바스켓 추가"버튼을 업데이트하기 전에 거의 1 초 전에 "미결성 증상"을 유발하여 동일한 지연이 발생하여 사용자가 자극을 받고 작업 명령이 있는지 확실하지 않습니다. 마침내 웹 사이트를 떠날 때까지

웹 복구의 미션 : 웹 플로우에서 INP를 최적화하기 위해 고급 웹 플로우 개발 과 협력하여 다음에 중점을 둡니다.

1. 필터 시스템 개선 : 이미 숨기거나 표시하는 데 더 효과적인 JavaScript를 클릭하기 위해 클릭 할 때마다 모든 신제품 정보로드에서 변경하십시오. 메인 스레드의 과정을 줄입니다.
2. 대화식의 복잡성을 줄이십시오 : 버튼을 누를 때 불필요한 애니메이션을 취소하십시오. "바구니에 추가", 텍스트를 "추가!"로 변경하는 것과 같은 간단한 피드백 만 있습니다. 오른쪽 상단 코너 업데이트에는 즉시 바스켓 아이콘이 있습니다.
3. 타사 스크립트 관리 : 라이브 채팅 및 히트 맵 추적 시스템의 연기 스크립트로 인해이 스크립트가 작동하기 전에 웹 페이지 표시가 더 빨리 표시됩니다.

놀라운 결과 : 1 개월 만에 웹 사이트 INP는 "좋은"(200ms 미만)가 일관되게 감소합니다. 다음은 제품 페이지의 Bondce 비율이 40%감소하고 전환율이 15%증가했으며 가장 중요한 것은 사용자가 사용에 더 만족한다는 것입니다. 이것은 투자 증거입니다. 웹 사이트 업데이트는 비즈니스에 대한 엄청난 수익으로 돌아 왔습니다.

그림을위한 프롬프트 : 전자 상거래 웹 페이지의 그림. 첫 번째쪽에는 혼란스러운 사용자 얼굴이있는 빨간색 INP가 있으며, 나후에는 웃으며 웃으며 웃으며 행복하게 쇼핑하는 녹색 INP가 있습니다.

체크리스트가 준비되었습니다! 웹 플로우 웹 사이트에서 INP를 확인하고 개선하십시오 (즉시 사용할 수 있음).

웹 플로 웹 사이트를 신속하게 변경하여 경쟁 업체를 추월 할 준비가 되셨습니까? 당신은 기다릴 필요가 없습니다! 이 간단한 점검 목록을 즉시 확인하고 개선하기위한 지침으로 사용해보십시오.

1 단계 : 측정 및 식별

• 도구 : Chrome 브라우저로 웹 사이트를 열고 Google Pagespeed Insights로 이동하십시오.
• 당신이해야 할 것 : "Next Paint (INP)의 대화식"을 찾으십시오. 주황색 (개선이 필요) 또는 빨간색 (가난한) 인 경우 아래로 스크롤하여 섹션에서보십시오. 상호 작용이 가장 느린 힌트를 찾는 "진단".
• 고급 : Chrome DevTools> Performance Tab을 사용하여 실제 사용 (예 : 문제 버튼을 클릭) 및 클릭 후 발생하는 "긴 작업"(거의 작은 빨간색)을 찾으십시오.

2 단계 : 웹 플로 상호 작용 및 애니메이션을 확인하십시오.

• 오픈 웹 플로우 디자이너 : 1 단계에서 찾은대로 문제가있는 페이지와 요소로 이동하십시오.
• 트리거 트리거 : 너무 복잡한 상호 작용이 있습니까? 움직임, 크기 변화 또는 다른 요소가 동시에 여러 단계로 작동하도록 주문 하는가?
• 조치 : 복잡한 상호 작용을 끄십시오. 게시 한 다음 PagesPeed Insights의 결과를 다시 측정하십시오. 애니메이션을보다 쉽게 만들어 조정하십시오. 또는 CSS 전환/변환으로 전환합니다

3 단계 : 사용자 정의 코드 및 타사 스크립트

• 프로젝트 설정> 사용자 정의 코드로 이동 : 헤드 및 바디 코드 채널에서 시청하십시오. 어떤 스크립트가 있습니까?
• 조치 : 필요한 스크립트의 경우 (챗봇, 분석과 같은) 긴급하지 않은 경우 태그에``Defer`````를 추가하십시오 ''«에 추가하십시오.
• 경고 : 코드 수정은주의해서 수행해야합니다. 확실하지 않은 경우 렌더 블로킹 리소스 전문가와 상담해야합니다. 많은 도움이 될 또 다른 지식입니다.

4 단계 : 테스트 및 반복)

• 각 지점에서 변경 한 후에는 매번 PagesPeed Insights로 결과를 측정하기 위해 돌아갑니다.
• Optimize는 지속적으로 수행 해야하는 프로세스입니다. 한 번은 끝나지 않고, 특히 새로운 기능이나 콘텐츠가 추가 될 때 웹 사이트의 성능을 정기적으로 확인합니다.

이 점검표를 따르면 문제가 발생하고 웹 플로에서 시스템을 시스템으로 시스템을 사용할 수 있습니다. Shopify 매장을 가속화하든 이 시대의 웹 사람들에게는 필수적인 기술입니다 .

그림의 프롬프트 : 각 항목의 아이콘이있는 4 개의 명확한 주제 (측정, 감사, 코드 최적화, 테스트)가있는 체크리스트. 그리고 누군가 체크리스트 채널에서 올바른 마크를 똑딱 거리고 있습니다.

사람들이 INP 및 웹 플로우 (Q & A)에 대해 궁금해하는 질문.

나는 많은 사람들이 궁금해하는 INP에 대한 인기있는 질문을 편집했습니다. 특히 명확한 답변과 이해하기 쉬운 웹 플로우와 같은 플랫폼에서 관리해야 할 때.

Q1 : INP는 FID (첫 번째 입력 지연)와 다릅니다. 이전 웹은 어떻게 중요합니까?

A : "측정 범위"에서 다릅니다! FID는 브라우저가 사용자의 첫 번째 동작 만 처리하기 시작하기 전에 "지연"(지연) 만 측정합니다. 그러나 처리하는 데 걸리는 시간이나 실제 변경 사항을 표시하는 데 걸리는 시간을 측정하지는 않지만 전체 INP"는 사용자가 시작하여 대기 시간, 처리 시간, 브라우저가 화면의 변경 사항을 표시 할 때까지보다 포괄적이고 정확한 사용자 경험의 척도로 간주됩니다.

Q2 : 많은 웹 플로 상호 작용을 사용하면 INP가 악화 될 수 있습니까?

A : 항상 그런 것은 아닙니다! 그것은 그 상호 작용의 "유형"과 "복잡성"에 달려 있습니다. "스크롤"또는 "마우스 오버"에서 작동하는 상호 작용 인 경우, 주 작업을 차단하지 않으면 종종 INP에 영향을 미치지 않지만 상호 작용이 "클릭"또는 매우 복잡한 경우 (예 : 여러 크기, 변경 또는 FADDE). 이것은 가장 중요한시기에 메인 스레드 리소스를 빼앗기 때문에 INP를 악화시킬 가능성이 매우 높습니다.

Q3 : 웹 플로에서 최적화 INP를 원한다면 코드를 작성하는 것이 좋습니까?

A : 프로그래머가 될 필요가 없습니다. 그러나 HTML/JS에 대한 기본 지식을 갖추면 웹 플로 상호 작용의 복잡성을 줄이거나 DOM을 줄이기위한 불필요한 요소를 줄이거 나 기본 웹 플로우 기능을 사용하여 이점을 극대화하는 등 이전 코드가 필요없는 코드를 개선하여 시작할 수있는 많은 장점이 있습니다. 그러나 문제의 기원이 사용자 정의 코드 또는 타사 스크립트에서 비롯된 경우 웹 플로 전문가의 가장 빠르고 안전한 선택입니다.

Q4 : INP 값은 얼마입니까? 그리고이 가치는 어디에서 볼 수 있습니까?

A : Google 기준에 따르면 INP 값은 3 단계로 나뉩니다.

• 좋은 (좋은) : 200 밀리 초 미만 (MS)
• 개선이 필요합니다 (업데이트해야 함) : 200ms에서 500ms 사이
• 가난한 (나쁜) : 500ms보다 높습니다

Google Pagespeed Insights 통해 웹 사이트의 INP를 무료로 확인할 수 있습니다. 도구는 사용자 (필드 데이터) 및로드 시뮬레이션 (실험실 데이터)을 모두 표시합니다.

그림을위한 프롬프트 : 이미지 아이콘, 물음표가있는 램프 및 각 질문 대신 작은 아이콘이 있습니다 (INP vs vs FID, 상호 작용, 코드, 점수)

요약 : 웹 플로우 웹 사이트 인 INP가 "Actor"가되지 않도록하십시오.

이 시점에서 모든 사람이 이미 INP (Next Paint와의 대화식)가 두통 기술 일뿐 만 아니라 사용자 경험 (UX)의 "키"이며 "SEO Rank"라고 이미 보았다고 생각합니다. 이 시대에는 신속하게 응답하는 웹 사이트가 있으며 모든 사용자의 클릭마다 응답했습니다. 사용자의 만족도와 신뢰성을 창출 할뿐만 아니라 웹 사이트가 품질이 높고 순위가 높아질 가치가 있다는 좋은 신호를 Google에 보냅니다.

웹 플로에서 INP를 최적화하는 것은 어려운 것처럼 보일 수 있지만 실제로는 좋은 웹 사이트를 만들기위한 기초로 돌아갑니다. 그것은 "가벼운"웹 사이트, "빠른"및 "효과적인"을 만드는 것입니다. 우리는 다양한 기술을 배웠습니다. JavaScript의 검사 및 관리에서 사용 대화식 사용에 대한 새로운 사고, 즉시 사용할 수있는 체크리스트에 이르기까지. 개선을 두려워하지 마십시오. 결과는 개선 된 전환 수와 웹 사이트에서 최고의 경험을 가진 고객의 미소 측면에서 항상 가치가 있기 때문입니다.

이제 웹 플로우 웹 사이트를 "클릭 앤 홀드"에서 "클릭하고 매료"하는 웹 사이트가되어 비즈니스 기회를 파괴 할 때까지 기다리지 마십시오! 오늘 INP 가치를 확인하고 개선하십시오. 온라인 경쟁에서 지속 가능한 이점을 창출합니다!

이러한 문제가 너무 복잡하다고 생각되거나 웹 사이트를 진정으로 최고의 성능을 갖도록 Vision X Brain Experts가 있으며 모든 단계에서 도움을줍니다!

삽화를위한 프롬프트 : 하늘에 치솟는 로켓을 공연하는 강력한 그래픽에는 로켓에는 "웹 사이트"라는 단어가 있으며 아래의 연료에는 빠른 성장을 전달하기위한 "좋은 INP"라는 단어가 있습니다.

‍