Web Guide성능 지표INP상호작용
핵심 성능 지표 반응 속도 개선
눌렀는데 반응이 없으면 고장 났다고 생각합니다.
화면 표시 속도와는 다른 문제입니다.
01무엇을 재는가
이용자 행동에 대한 반응 시간입니다.
1
대상 행동
클릭, 탭, 키 입력.
2
측정 구간
행동부터 화면 변화까지.
3
전체 방문 기준
가장 느린 반응을 봅니다.
4
스크롤 제외
단순 스크롤은 대상이 아닙니다.
5
기준 시간
짧을수록 좋습니다.
6
검색 평가
순위 요소에 포함됩니다.
02느려지는 원인
처리가 밀려 있을 때 생깁니다.
무거운 연산
한 번에 오래 처리합니다.
외부 스크립트
추적 코드가 점유합니다.
큰 목록 처리
항목이 많으면 느립니다.
과도한 화면 갱신
불필요하게 다시 그립니다.
저사양 기기
실제 이용자 기기가 느립니다.
동시 작업
여러 처리가 겹칩니다.
03개선 방법
나누고 미루고 즉시 반응합니다.
작업 쪼개기긴 처리를 나눠 실행.
즉시 시각 반응누르면 바로 표시 변경.
나중 처리급하지 않은 것은 미룹니다.
불필요한 갱신 제거바뀐 부분만 다시 그립니다.
목록 가상화보이는 항목만 처리.
스크립트 정리외부 코드를 줄입니다.
04확인 방법
실제 기기에서 봐야 드러납니다.
고사양 확인
개발자 PC에서는 문제없어 보임 · 원인을 못 찾음
저사양 확인
성능 제한 설정으로 테스트 · 실제 보급형 기기 사용 · 문제가 드러남
CHECK POINT
□ 버튼을 누르면 즉시 반응이 보이는가
□ 긴 처리를 나눠서 실행하는가
□ 외부 스크립트를 정리했는가
□ 긴 목록을 효율적으로 처리하는가
□ 불필요한 화면 갱신이 없는가
□ 저사양 기기에서 테스트했는가
□ 실사용자 데이터로 확인했는가
□ 가장 느린 상호작용을 파악했는가
#성능 지표#INP#상호작용#반응 속도#저사양 기기#스크립트#측정#반응형#웹비스타#홈페이지 제작