검색엔진최적화·SEO 홈페이지 제작 이후 속도는 이미지와 영상을 어떻게 처리하느냐에 따라 다르다.

PageSpeed Insights에서 점수가 낮게 나왔다는 상담이 옵니다. 콘텐츠는 잘 정리되어 있는데 왜 느린지 모르겠다는 거예요. 홈페이지 로딩 속도에서 가장 큰 비중을 차지하는 건 대부분 이미지와 영상입니다. 텍스트는 파일 크기가 작아서 영향이 거의 없어요. 이미지와 영상을 어떻게 처리하느냐가 속도와 검색 노출 모두에 영향을 줍니다.

이미지 포맷부터 정리해야 합니다. JPG는 오랫동안 쓰인 압축 포맷이지만 같은 품질 기준으로 WebP보다 파일 크기가 큽니다. WebP는 구글이 만든 포맷으로 JPG 대비 25~35% 더 작은 파일 크기를 냅니다. 최신 브라우저는 대부분 WebP를 지원해요. AVIF는 WebP보다 더 작지만 아직 구형 브라우저에서 지원이 제한적입니다. 홈페이지 이미지를 WebP로 변환하는 것만으로 전체 페이지 용량이 눈에 띄게 줄어드는 경우가 많습니다. PageSpeed Insights에서 '차세대 형식으로 이미지 제공' 항목이 경고로 나온다면 WebP 변환이 먼저입니다.

이미지 크기도 확인해야 합니다. DSLR 원본 사진은 수 MB가 됩니다. 홈페이지에서 실제로 표시되는 크기에 맞게 줄이지 않으면 필요 이상의 파일을 내려받는 구조가 돼요. 메인 배너 이미지는 가로 1,920픽셀이면 대부분 충분하고, 카드형 리스트 이미지는 그보다 더 작아도 됩니다. 이미지를 올릴 때 원본 그대로 올리지 말고 표시 크기에 맞게 리사이즈한 뒤 WebP로 변환해서 올리는 루틴이 필요합니다.

lazy load는 화면에 보이는 이미지만 먼저 로드하고 나머지는 스크롤해서 보일 때 불러오는 방식입니다. 홈페이지를 열면 첫 화면 이미지부터 페이지 하단 이미지까지 전부 동시에 내려받는 구조라면 초기 로딩이 느려집니다. lazy load가 적용되어 있으면 방문자가 실제로 보는 영역의 이미지만 로드하기 때문에 첫 화면 로딩 속도가 빨라져요. HTML img 태그에 loading="lazy" 속성 하나가 들어가는 방식이라 구현 난도는 낮습니다. 홈페이지제작 납품 시 이 설정이 적용되어 있는지 확인해두는 게 맞습니다.

영상은 이미지보다 처리 방식 선택이 더 중요합니다. 메인 배너 배경에 영상을 쓸 때 MP4 파일을 서버에 직접 올리는 방식은 파일 크기가 커서 로딩에 부담이 됩니다. WebM 포맷은 MP4보다 파일 크기가 작고 최신 브라우저에서 지원됩니다. 배경 영상은 소리 없이 반복 재생되는 구조라 화질보다 파일 크기를 줄이는 게 우선입니다. 30초 이상 영상을 배경에 쓰는 건 로딩 부담이 너무 커서 권장하지 않아요.

유튜브·비메오 embed는 영상 로딩 자체를 해당 플랫폼이 처리하지만 iframe 자체가 페이지 로딩에 영향을 줍니다. 영상이 여러 개라면 페이지를 열 때 iframe을 모두 동시에 로드하지 말고, 방문자가 실제로 영상 영역까지 스크롤했을 때 iframe을 생성하는 lazy load 방식을 써야 합니다. 썸네일 이미지를 먼저 보여주다가 클릭했을 때 영상 플레이어가 로드되는 방식도 페이지 초기 로딩 부하를 줄이는 데 효과적이에요.

이 모든 설정이 검색 노출과 연결됩니다. 구글은 Core Web Vitals 중 LCP(Largest Contentful Paint)를 중요한 평가 지표로 씁니다. LCP는 페이지에서 가장 큰 콘텐츠 요소가 화면에 나타나기까지 걸리는 시간인데, 대부분 메인 배너 이미지나 영상 썸네일이 이 요소가 됩니다. 이미지 포맷·크기·lazy load 설정이 LCP에 직접 영향을 주고, LCP가 낮으면 검색 평가에서 불리해집니다. PageSpeed Insights에서 LCP 항목이 경고라면 이미지 처리 방식을 먼저 점검해야 합니다.

홈페이지를 만들고 나서 PageSpeed Insights에서 직접 측정해보면 어느 이미지가 문제인지, 어떤 설정이 빠져있는지 항목별로 나옵니다. 이 점검을 오픈 전에 한 번, 오픈 후 이미지를 많이 추가했을 때 한 번 더 하는 게 좋습니다. 감사합니다. 

희명웹 드림
참고할만한 인사이트 칼럼링크 : 홈페이지 소스코드 소유권이 장기 운영에서 만드는 차이