지연 로딩은 화면에 보이지 않는 이미지를 미리 받지 않는 기능입니다. 페이지 아래쪽에 이미지가 스무 장 있어도 방문자가 거기까지 내려가지 않으면 그 스무 장은 요청되지 않습니다. 워드프레스는 이것을 기본값으로 적용합니다 — 좋은 기본값이고, 대부분의 경우 그대로 두면 됩니다.
예외가 하나 있습니다
문제는 첫 화면에 있는 큰 이미지입니다. 히어로 배너, 상단 대표 사진처럼 방문자가 열자마자 보는 이미지가 여기 해당합니다.
브라우저는 지연 로딩이 걸린 이미지를 레이아웃 계산이 끝난 뒤에야 “이건 화면 안이네” 하고 요청합니다. 즉 한 단계 늦게 출발합니다. 그런데 화면에서 가장 큰 콘텐츠가 그려지는 시점은 성능 지표가 직접 재는 값이고, 그 지표가 재는 대상이 바로 이 이미지인 경우가 많습니다. 측정 대상 자체를 늦추는 셈입니다.
어떤 이미지가 그 대상인지 확인하기
추측하지 않고 확인하는 것이 중요합니다. 브라우저 개발자 도구의 성능 패널이나 속도 측정 도구는 어떤 요소가 가장 큰 콘텐츠로 판정됐는지를 알려 줍니다. 자주 놀라게 되는데, 예상한 히어로 이미지가 아니라 큰 제목 텍스트나 배경 안의 다른 요소인 경우도 있기 때문입니다.
대상이 이미지라면 처리는 셋입니다. 지연 로딩을 끄고, 우선순위를 높다고 표시하고, 필요하면 미리 불러오기를 겁니다. 반대로 그 아래 모든 이미지에는 지연 로딩을 그대로 둡니다 — 예외는 하나여야 의미가 있습니다.
디자인 결정이 여기에 걸립니다
이 지점에서 디자이너의 결정이 성능에 직접 닿습니다. 첫 화면에 큰 이미지를 둘 것인가부터가 결정이고, 두기로 했다면 그 한 장은 가장 공들여 최적화할 한 장이 됩니다. 포맷 · 크기 · 압축을 앞선 회차의 기준으로 다시 점검할 가치가 있는 유일한 이미지이기도 합니다.
슬라이더도 같은 맥락에서 다시 볼 만합니다. 슬라이드가 다섯 장이면 방문자가 보는 것은 대개 첫 장뿐인데, 구현에 따라 다섯 장을 모두 미리 받는 경우가 있습니다.
첫 화면 최적화의 나머지 절반(폰트 · CSS)은 성능 최적화 아카이브에서 다루고, 실제 사이트에서 대상을 특정하고 교정하는 작업은 최적화 지원 사업의 성능 항목에 포함됩니다.
다음 회차
지금까지는 픽셀 이미지 이야기였습니다. 다음 회차는 아이콘과 도형 — 이것들은 애초에 이미지 파일이 아니어도 되고, 그렇게 하면 크기 문제 자체가 사라집니다.