Web Guide코어 웹 바이탈사용자 경험 지표속도 개선
Core Web Vitals 개선 실무
검색엔진이 보는 사용자 경험 지표입니다.
세 가지 지표가 무엇을 재는지 알면 무엇을 고쳐야 할지 보입니다.
01세 가지 지표
각각 다른 문제를 측정합니다. 점수가 나쁜 지표에 맞는 처방이 필요합니다.
로딩 — 주요 내용이 보이기까지
가장 큰 요소가 화면에 나타나는 시점
반응 — 눌렀을 때의 반응 속도
클릭이나 입력에 화면이 반응하는 데 걸리는 시간
안정성 — 화면이 흔들리는 정도
읽는 도중 요소가 밀려 이동하는 현상
02로딩이 느릴 때
화면에서 가장 큰 요소가 무엇인지 확인하는 것이 출발점입니다. 대부분 이미지입니다.
대표 이미지 최적화첫 화면의 큰 이미지를 가볍게 만듭니다.
지연 로딩 제외첫 화면 이미지는 지연 로딩하지 않습니다.
우선 로딩중요한 자원을 먼저 요청하게 설정합니다.
서버 응답 개선서버가 느리면 모든 것이 늦어집니다.
차단 요소 제거화면 표시를 막는 스크립트와 스타일을 줄입니다.
03화면이 흔들릴 때
글을 읽다가 버튼이 밀려 잘못 누르는 경험이 이 문제입니다. 고치기는 비교적 쉽습니다.
이미지 크기 지정
가로세로를 미리 정해 자리를 잡아둡니다.
광고 영역
광고가 들어갈 자리를 미리 비워둡니다.
폰트 교체
대체 폰트 크기를 비슷하게 맞춥니다.
나중에 삽입되는 요소
배너와 알림이 위에서 밀고 들어오지 않게 합니다.
동적 콘텐츠
나중에 불러오는 영역의 높이를 미리 확보합니다.
04측정과 관리
개발자 도구 점수와 실제 방문자 경험은 다를 수 있습니다. 둘 다 봐야 합니다.
점검 항목
실제 사용자 데이터
실험실 점수보다 실제 방문자 수치가 중요합니다.
모바일 우선
모바일 점수가 대체로 더 나쁩니다.
주요 페이지별
메인만이 아니라 상세와 목록도 측정합니다.
변경 후 확인
개편이나 기능 추가 후 다시 측정합니다.
정기 점검
월 단위로 추이를 확인합니다.
목표 설정
완벽보다 기준선 통과를 목표로 합니다.
CHECK POINT
□ 세 지표 중 어느 것이 나쁜지 확인했는가
□ 첫 화면의 가장 큰 요소를 최적화했는가
□ 이미지 크기를 미리 지정했는가
□ 광고와 배너 자리를 미리 확보했는가
□ 모바일 기준으로 측정했는가
□ 주요 페이지별로 측정했는가
□ 실제 사용자 데이터를 확인했는가
□ 정기 점검 주기가 있는가
#코어 웹 바이탈#사용자 경험 지표#속도 개선#레이아웃 이동#모바일 성능#검색 순위#성능 측정#홈페이지 개발#웹비스타#홈페이지 제작