느린 화면은 사진부터 확인해봅니다
홈페이지 제작을 마치고 상품 목록을 열었습니다. 컴퓨터에서는 괜찮았는데 휴대폰에서는 사진이 한 장씩 늦게 나타납니다. 화면에 작게 보이는 사진도 원본 파일은 몇 메가바이트일 수 있어요.
작게 보이는 것과 작은 파일은 다릅니다
화면에서 사진을 작게 줄여 보여줘도 큰 원본을 내려받았다면 전송량은 그대로입니다. 썸네일에는 썸네일에 맞는 이미지를 쓰고, 큰 상세 사진이 필요할 때는 그 크기에 맞게 전달하는 구성을 생각해볼 수 있습니다.
화질을 얼마나 낮출지는 실제 상품 사진으로 확인합니다. 글자가 있는 이미지와 단순한 배경 사진은 다를 수 있어요. 무조건 가장 작은 파일만 만드는 것이 아니라 손님이 내용을 읽고 상품을 볼 수 있어야 합니다.
처음 보이지 않는 사진은 나중에 불러올 수 있어요
목록 아래쪽 사진까지 처음에 모두 내려받을 필요가 있는지 봅니다. 화면 가까이에 왔을 때 불러오는 지연 로딩을 사용할 수 있습니다. 반면 첫 화면의 중요한 사진까지 늦게 불러오면 오히려 기다리는 느낌이 커질 수 있어요.
이미지가 들어갈 가로·세로 공간도 미리 정해두면 사진이 로딩될 때 버튼이나 글이 갑자기 움직이는 일을 줄일 수 있습니다. 사진 용량뿐 아니라 화면이 흔들리는지도 함께 보는 이유입니다.
사진이 원인인지 먼저 확인합니다
브라우저 개발 도구의 네트워크 기록, 즉 파일과 데이터를 받는 과정을 기록한 곳에서 어떤 파일과 요청에 시간이 걸리는지 확인할 수 있습니다. 어려우면 AI에게 기록을 함께 살펴보도록 요청해요. 이미지가 아니라 상품 데이터를 가져오는 요청이나 너무 많은 코드가 원인일 수도 있습니다.
같은 기기와 비슷한 네트워크 조건에서 변경 전후를 비교합니다. 이미 내려받은 사진을 재사용한 결과만 보고 빨라졌다고 판단하지 않도록, 처음 방문한 상태도 확인하고요. 수치를 확인하지 않았다면 “몇 배 빨라졌다”고 쓰지는 않습니다.
컴윗에서 홈페이지를 만든다면 “목록 사진이 필요한 크기로 전달되는지, 첫 화면에 없는 사진도 전부 먼저 불러오는지 확인해줘”라고 요청해보세요. 눈에 보이는 사진 크기와 실제로 내려받는 크기를 함께 볼 수 있습니다.
