첫 화면 큰 사진 늦게 뜨는 이유

아래쪽 사진이 맨 위 사진을 붙잡는 까닭

브라우저가 한 번에 받을 수 있는 양에는 한계가 있습니다. 아래쪽 사진 여러 장을 첫 화면 사진과 같이 받기 시작하면, 첫 화면 사진은 그만큼 늦게 끝납니다. 손님은 아직 스크롤도 안 했습니다. 그런데도 보지도 않는 아래쪽 사진 때문에 맨 위 사진을 기다리게 됩니다.

요즘 워드프레스는 첫 큰 사진에 먼저 받으라는 표시를 알아서 붙여 줍니다. 그래도 페이지 빌더나 테마가 첫 화면 사진을 직접 그리는 경우에는 이 표시가 빠질 때가 있습니다.

템플릿 25판에서 사진 순서만 바꿔 본 날

2026년 10월 5일, 저희 템플릿 25판의 사진 불러오는 순서를 손봤습니다. 사진 파일은 하나도 줄이지 않았습니다.

첫 화면의 가장 큰 사진에는 이것부터 받으라는 표시를 붙였습니다. 첫 화면 밖 사진에는 화면 가까이 오면 받으라는 표시를 붙였습니다. 크기가 비어 있던 사진에는 가로·세로 크기를 적었습니다. 그러면 사진이 도착하기 전에도 그 자리가 먼저 잡힙니다.

손본 사진 자리는 모두 370곳입니다. 아래쪽 사진 213곳은 나중에 받게 하고, 첫 화면 대표 사진 13곳은 먼저 받게 했습니다. 비어 있던 크기는 126곳에 채웠습니다.

첫 화면 큰 사진이 뜬 시각은 이렇게 바뀌었습니다.

• 공예 협회 판은 3.5초에서 0.9초로
• 카페 판은 2.2초에서 1.3초로
• 화장품 브랜드 판은 2.2초에서 1.8초로
• 피자 판은 1.75초에서 1.6초로
• 인테리어 판(컴퓨터 폭)은 1.6초에서 1.4초로
• 다른 판 하나는 2.3초에서 1.8초로

카페 판과 피자 판은 들여다보니 첫 화면 사진에 오히려 나중에 받으라는 표시가 붙어 있었습니다. 거꾸로 붙은 그 표시를 뗀 것만으로도 빨라졌습니다.

이 시간은 저희 작업 컴퓨터에서 같은 속도로 고치기 전과 후를 세 번씩 재서 가운데 값을 고른 것입니다. 실제 사이트 사진 대신 같은 크기의 사진으로 쟀습니다. 그래서 몇 초가 나왔는지보다 얼마나 줄었는지를 봐 주시면 됩니다.

빨라진 다음 사진 모양까지 맞대 본 일

속도를 고친 뒤에는 화면이 그대로인지도 같이 봐야 합니다. 빨라졌어도 사진이 길게 늘어나 있으면 고쳤다고 할 수 없습니다.

크기를 채운 뒤에 고치기 전 화면과 고친 뒤 화면을 놓고, 사진 상자 586개를 하나씩 맞대 봤습니다. 그중 10곳은 사진 높이가 달라져 있었습니다. 그 10곳은 크기만 다시 뺐고, 받는 순서 표시는 그대로 두었습니다.

PageSpeed Insights로 내 사이트 첫 사진 살펴보기

내 사이트도 같은 경우인지 궁금하다면 두 곳만 먼저 보세요.

• 구글 PageSpeed Insights에 내 사이트 주소를 넣고 결과에서 LCP 시간을 봅니다. 그 아래 진단 목록에서 LCP 요소로 잡힌 것이 무엇인지도 확인합니다.

• 그 요소가 사진인데 시간이 길다면, 첫 화면에 있는데도 나중에 받는 사진으로 잡혀 있지 않은지 봅니다. 진단 목록에서 지연 로드와 관련된 항목을 찾으면 됩니다.

첫 화면이 늦게 뜨는 원인을 같이 찾아보고 싶으시면 오류 수정에 궁금하신 점을 남겨 주세요.