Web Guide성능 지표CLS레이아웃 안정
핵심 성능 지표 화면 밀림 줄이기
누르려는 순간 버튼이 아래로 밀려납니다.
가장 짜증나는 경험이고 가장 고치기 쉬운 문제입니다.
01왜 밀리나
나중에 뜬 요소가 자리를 차지합니다.
01
이미지 크기 미지정
뜨는 순간 공간을 밀어냅니다.
02
광고 영역
늦게 채워지며 밀립니다.
03
폰트 교체
글꼴이 바뀌며 줄이 변합니다.
04
동적 삽입
알림 배너가 위에 끼어듭니다.
05
삽입 요소
지도나 영상이 늦게 뜹니다.
06
애니메이션
위치를 바꾸는 효과.
02해결 방법
자리를 미리 잡아두면 됩니다.
이미지 크기 지정
가로 세로를 명시합니다.
비율 지정
반응형에서도 자리를 유지.
광고 자리 확보
최소 높이를 미리 줍니다.
배너 위치
본문 위가 아닌 곳에.
폰트 크기 보정
대체 글꼴을 맞춥니다.
안전한 효과
위치 대신 투명도로 처리.
03자주 놓치는 지점
의외의 곳에서 발생합니다.
쿠키 안내늦게 떠서 화면을 밀어냅니다.
로그인 상태확인 후 메뉴가 바뀝니다.
재고 표시나중에 불러와 추가됩니다.
리뷰 평점별점이 늦게 붙습니다.
번역 요소언어에 따라 길이가 다릅니다.
스크롤 복원돌아왔을 때 위치가 어긋납니다.
04측정과 검증
실제 방문 환경에서 봐야 합니다.
실험실
도구로 밀림 구간을 시각화 · 원인 요소를 특정 · 반복 확인 가능
실제
느린 통신에서 더 심함 · 실사용자 데이터 확인 · 페이지별 차이 비교
CHECK POINT
□ 모든 이미지에 크기가 지정돼 있는가
□ 광고와 삽입 영역에 자리를 확보했는가
□ 알림 배너가 본문을 밀지 않는가
□ 폰트 교체 시 줄 수가 변하지 않는가
□ 늦게 불러오는 요소의 자리가 잡혀 있는가
□ 느린 통신에서 확인했는가
□ 측정 도구로 밀림 구간을 확인했는가
□ 실사용자 데이터로 검증했는가
#성능 지표#CLS#레이아웃 안정#이미지 크기#광고 영역#배너#측정#반응형#웹비스타#홈페이지 제작