독립형 웹사이트 로딩이 느린데, 이미지 로딩 문제는 어떻게 진단할까요?

독립형 웹사이트의 로딩 속도가 느릴 때 이미지가 흔히 점검 대상이 되는 것은 맞지만, 페이지에 이미지가 많다는 이유만으로 일괄 압축해서는 안 됩니다. 첫 화면의 대형 이미지 다운로드가 너무 오래 걸리거나, 이미지 요청이 늦게 발견되거나, 해외 노드와의 연결이 원활하지 않거나, 서버 응답이 느린 경우에도 사용자는 “이미지가 계속 표시되지 않는다”고 느낄 수 있습니다. 페이지를 느리게 만드는 구체적인 이미지와 시간이 소요되는 단계를 먼저 파악한 다음, 파일을 수정할지, 페이지 코드를 수정할지, 전달 경로를 점검할지 결정하세요.

기술 평가 담당자에게 효과적인 점검은 세 가지 질문에 답해야 합니다. 어떤 이미지가 느린가, 요청 전과 전송 중 어느 단계에서 시간이 걸리는가, 최적화 후 목표 시장의 사용자가 실제로 주요 콘텐츠를 더 빨리 볼 수 있는가입니다.

이미지가 주요 병목인지 먼저 확인하기

Chrome 개발자 도구의 Network 패널을 열고 캐시 사용 안 함을 선택한 뒤, 페이지가 로드되는 동안 요청을 기록합니다. 첫 방문 테스트를 마친 후에는 캐시를 유지한 상태로 다시 테스트해 캐시가 없는 첫 방문과 재방문 경험을 구분합니다. 이미지 유형별로 요청을 필터링하고 파일 크기, 요청 시작 시간, 소요 시간, 워터폴 차트를 확인합니다. 테스트는 목표 사용자와 비슷한 네트워크 환경에서 진행하고, 데스크톱과 모바일 페이지를 각각 확인해야 합니다.

Lighthouse 또는 PageSpeed Insights도 실행해 최대 콘텐츠 렌더링(LCP) 관련 진단을 확인합니다. LCP 요소가 첫 화면의 이미지이고 해당 이미지가 늦게 표시된다면, 점검을 시작할 명확한 지점이 있는 것입니다. LCP 요소가 텍스트이거나 HTML 또는 스크립트 자체의 응답이 느린 경우에는 이미지 최적화가 여전히 도움이 될 수 있지만, 첫 화면 로딩 지연을 해결하지 못할 수도 있습니다.

요청의 총 소요 시간만 보지 마세요. 의심되는 이미지를 클릭해 Timing을 확인하고 워터폴 차트와 함께 살펴보세요.

• 요청 시작이 늦음: 이미지가 JavaScript 렌더링 후에야 발견되거나, 지연 로딩이 잘못 설정되었을 수 있습니다.
• 응답 대기 시간이 김: 이미지 원본 서버, CDN 캐시 상태, 목표 지역의 네트워크 경로를 확인합니다.
• 콘텐츠 다운로드 시간이 김: 실제 전송 크기, 네트워크 대역폭, 이미지 크기를 함께 고려해 대용량 파일부터 확인합니다.
• 다운로드 완료 후에도 표시가 늦음: 이미지 디코딩, 메인 스레드 작업, 페이지 스타일이나 스크립트가 렌더링을 차단하는지 확인합니다.

Network 패널에 표시되는 전송 크기와 이미지 원본 파일 크기는 서로 다를 수 있습니다. 리디렉션, 실패 후 재시도, 캐시 적중 여부, 동일한 이미지가 서로 다른 URL로 중복 요청되는지도 확인하세요. 해외 대상 독립형 웹사이트는 주요 고객이 있는 지역이나 현지 테스트 노드에서 다시 테스트하는 것이 좋습니다. 그렇지 않으면 현지 결과에서 지역 간 접속 문제가 드러나지 않을 수 있습니다.

이미지 크기, 형식 및 실제 용도 확인하기

먼저 첫 화면의 대표 이미지, 제품 상세 페이지의 대형 이미지, 모바일 배너를 확인합니다. 이러한 이미지는 트래픽을 많이 사용할 수 있을 뿐 아니라 사용자가 주요 콘텐츠를 보는 시간에도 직접 영향을 줍니다. 브라우저에서 이미지의 실제 표시 크기와 리소스 크기를 확인하세요. 페이지에는 작은 상품 썸네일만 표시되는데 고해상도 원본을 다운로드하고 있다면, 압축률만 높일 것이 아니라 해당 표시 위치에 적합한 버전을 생성해야 합니다.

반응형 페이지에서는 srcset 및 sizes를 사용해 다양한 크기의 이미지를 제공하면, 브라우저가 레이아웃과 기기 조건에 따라 리소스를 선택할 수 있습니다. 모바일과 데스크톱에서 이미지 구성이 크게 다르면 picture를 사용해 각각 다른 이미지를 제공할 수도 있습니다. 점검할 때는 sizes가 실제 레이아웃과 일치하는지 확인하세요. 그렇지 않으면 브라우저가 여전히 지나치게 큰 파일을 선택할 수 있습니다.

이미지 형식은 이미지 콘텐츠와 호환성 요구 사항에 따라 선택해야 합니다. 사진이나 제품 실사 이미지에는 WebP 또는 AVIF를 검토할 수 있습니다. 투명 배경이 필요한 소재는 목표 형식과 처리 도구의 지원 여부도 확인해야 합니다. 호환성을 위한 대체 형식을 유지하고 변환 후 파일 크기, 화질, 디코딩 성능을 비교하세요. 최신 형식이라고 해서 모든 이미지의 파일 크기가 더 작아지는 것은 아닙니다. 특히 텍스트 가장자리, 제품 질감, 브랜드 로고는 압축 후 확인해야 합니다.

제품 이미지 표시에는 비즈니스상 고려 사항도 있습니다. 목록의 썸네일에는 더 작은 크기를 사용할 수 있지만, 상세 페이지의 부분 확대 이미지, 소재 질감, 모델 표시는 충분히 선명해야 합니다. 용도에 따라 썸네일, 상세 이미지, 확대 이미지를 각각 생성해 모든 위치에서 하나의 원본 이미지를 공유하지 않도록 하세요. 또한 트래픽을 절약하려다 구매 담당자가 식별해야 하는 정보가 손실되지 않도록 해야 합니다.

첫 화면을 우선 처리하고 화면 밖 이미지는 필요할 때 로드하기

첫 화면의 LCP 이미지는 브라우저가 최대한 일찍 발견할 수 있어야 합니다. 이미지 URL이 초기 HTML에 직접 포함되도록 하고, 스크립트가 실행된 후에야 삽입되는 방식은 피하세요. 이 첫 화면 이미지에는 loading="lazy"를 사용하지 마세요. 해당 이미지가 실제로 핵심 리소스임을 확인한 후에는 fetchpriority="high"를 사용해 브라우저에 우선순위를 높이도록 알리는 방안을 검토할 수 있습니다. 단, 여러 이미지에 동시에 높은 우선순위를 지정하면 글꼴이나 스타일시트 같은 핵심 리소스와 대역폭을 놓고 경쟁할 수 있으므로 주의해야 합니다.

첫 화면의 대형 이미지가 CSS 배경으로 로드되면 브라우저가 관련 스타일을 가져와 해석한 뒤에야 이미지를 발견하는 경우가 많습니다. 주요 콘텐츠를 담는 이미지라면 HTML 이미지 요소로 변경하는 방안을 검토할 수 있습니다. 리소스 URL이 명확하고 실제로 발견이 지연되는 경우에는 미리 로드하는 방법도 검토할 수 있습니다. 미리 로드할 URL과 반응형 설정은 실제로 사용할 리소스와 일치해야 합니다. 그렇지 않으면 다운로드가 중복될 수 있습니다.

화면 밖의 상품 목록, 긴 상세 이미지, 추천 콘텐츠에는 기본 지연 로딩을 적용해 초기 요청을 줄이는 방안을 검토할 수 있습니다. 테스트할 때는 페이지를 아래로 스크롤해 이미지가 제때 표시되는지 확인하고, 이미지에 너비와 높이 또는 적절한 종횡비를 지정해 로드 후 페이지가 밀리지 않도록 하세요. 캐러셀도 확인해야 합니다. 기본적으로 보이지 않는 대형 이미지 여러 장을 처음부터 모두 로드하면 첫 화면 로딩이 느려질 수 있지만, 처음 표시되는 이미지는 우선 처리해야 합니다.

파일을 최적화한 후에도 느리다면 전달 경로를 추가로 점검하기

동일한 이미지가 현지에서는 정상적으로 로드되지만 목표 시장에서는 느린 경우, CDN이 목표 접속 지역을 지원하는지와 요청이 캐시 적중되는지 확인합니다. 캐시 정책은 이미지 업데이트 방식과 맞아야 합니다. 변경되지 않는 리소스에는 장기 캐시가 적합하며, 이미지가 업데이트될 때는 버전 정보가 포함된 URL을 사용해 사용자가 계속 이전 이미지를 보지 않도록 할 수 있습니다. 서명 매개변수나 자주 변경되는 쿼리 매개변수도 캐시 적중에 영향을 줄 수 있으므로 서비스 설정과 함께 확인해야 합니다.

이미지가 타사 도메인에 저장되어 있다면 도메인 이름 확인, 연결 설정, 리디렉션, 서비스 가용성도 살펴보세요. 도메인 간 연결에는 시간이 걸릴 수 있지만, 사전 연결과 같은 최적화가 필요한지는 워터폴 차트에 표시된 실제 대기 시간을 기준으로 판단해야 합니다. 크로스보더 쇼핑몰에서는 언어별·지역별 사이트와 광고 랜딩 페이지도 각각 확인해 특정 페이지 템플릿이 최적화되지 않은 원본 이미지를 참조하지 않는지 점검해야 합니다.

동일한 조건으로 다시 테스트해 문제가 해결되었는지 확인하기

수정 후에는 동일한 페이지, 기기 유형, 네트워크 조건, 테스트 지역에서 다시 기록하고 첫 화면의 핵심 이미지에 대한 요청 시작 시간, 전송 크기, 다운로드 시간, LCP를 비교합니다. 네트워크 변동의 영향을 받을 수 있으므로 한 번만 테스트하지 말고 여러 차례 측정해 결과가 안정적인지 확인하세요. 실제 사용자 성능 데이터가 있다면 목표 시장의 데이터와 함께 판단해야 합니다.

마지막으로 최적화로 인해 새로운 문제가 발생하지 않았는지 확인합니다. 첫 화면 이미지가 선명한지, 모바일에서 적절한 크기의 이미지가 선택되는지, 지연 로딩 이미지가 스크롤할 때 제때 표시되는지, 업데이트된 이미지가 올바르게 캐시되는지 점검하세요. 이미지 요청 수가 줄거나 파일 크기가 작아지는 것은 과정 지표일 뿐입니다. 사용자가 실제로 페이지를 더 빨리 확인하고 사용할 수 있는지가 다음 조정 여부를 결정하는 기준입니다.