레이아웃 이동 줄이기, 자리를 미리 잡아 둡니다

이동 점수는 영향 범위와 이동 거리의 곱입니다

레이아웃이 밀리는 정도를 숫자로 다루려면 계산 방식을 알아야 합니다. 한 번의 이동 점수는 두 값의 곱입니다. 첫째는 영향 범위로, 화면에서 움직인 영역이 차지하는 비율입니다. 둘째는 이동 거리로, 가장 많이 움직인 거리를 화면 크기로 나눈 값입니다. 그래서 작은 요소가 많이 움직이는 것보다 큰 영역이 조금 움직이는 것이 점수에 더 나쁠 수 있습니다. 이 구조를 알면 조치 우선순위가 정해집니다. 화면을 크게 차지하는 영역의 작은 이동부터 잡는 것이 효율적입니다. 계산 방식을 모르면 눈에 띄는 작은 흔들림만 고치게 됩니다.

원인은 거의 네 가지로 좁혀집니다

이동을 만드는 원인은 대부분 네 가지입니다. 첫째, 크기를 적지 않은 이미지입니다. 이미지가 도착하는 순간 자리를 차지하며 아래 내용을 밀어냅니다. 너비와 높이를 적어 두면 브라우저가 미리 자리를 비웁니다. 둘째, 광고와 삽입 영역입니다. 크기가 정해지지 않으면 로드 시점에 밀립니다. 최소 높이를 지정해 자리를 예약합니다. 셋째, 늦게 도착하는 글꼴입니다. 대체 글꼴에서 본 글꼴로 바뀔 때 줄 높이가 달라지며 밀립니다. 넷째, 내용을 나중에 끼워 넣는 처리입니다. 공지 띠나 동의 안내를 위에 삽입하면 전체가 내려갑니다.

이동 점수를 더해 기준과 비교합니다

학습용 가정으로 계산합니다. 가정값은 첫 번째 이동이 화면의 60퍼센트 영역을 30퍼센트 거리만큼 밀고, 두 번째 이동이 25퍼센트 영역을 20퍼센트 거리만큼 민다고 두겠습니다. 첫 번째 점수는 0.6 곱하기 0.3으로 0.18이고, 두 번째는 0.25 곱하기 0.2로 0.05입니다. 합계는 0.23입니다. 이것이 중간 계산값입니다. 최종 판단은 공식 기준과 비교해서 합니다. 2026년 10월 19일 확인한 기준으로 0.1 이하가 양호이고 0.25 초과가 불량이므로, 0.23은 불량은 아니지만 양호에도 들지 못하는 구간입니다. 첫 번째 이동만 없애도 0.05가 되어 양호에 들어갑니다.

사용자 입력에 따른 이동은 세지 않습니다

결론을 뒤집는 조건은 이동의 원인입니다. 사용자가 버튼을 눌러 내용이 펼쳐지는 것처럼 입력 직후에 일어나는 이동은 지표에 포함되지 않습니다. 그래서 '펼치기' 같은 동작을 없앨 필요는 없습니다. 반대로 입력과 무관하게 일어나는 이동은 모두 포함되므로, 자동으로 바뀌는 배너나 순환 영역이 점수를 올립니다. 두 번째 조건은 측정 시점입니다. 이 지표는 페이지가 보이는 동안 계속 누적되므로, 무한 스크롤처럼 오래 머무는 페이지에서는 체류가 길수록 점수가 쌓입니다. 그래서 스크롤로 불러오는 내용도 자리를 먼저 예약해야 합니다.

성능 최적화 실행 전 점검표

• 이미지와 삽입 영역에 크기 또는 최소 높이를 지정했다
• 글꼴 교체로 줄 높이가 바뀌지 않게 설정했다
• 내용을 위에 끼워 넣지 않고 자리를 미리 예약했다
• 스크롤로 불러오는 내용도 자리를 예약했다