390px 화면에서 약 122px로 보이는 카드가 1024px PNG를 받아오고 있었다. 당시 DPR 2 환경의 전송량은 1,183,016바이트였다. WANY BLOG의 이미지 최적화는 카드의 표시 크기와 실제 내려받는 파일의 크기가 맞지 않는 문제에서 시작했다.
당시 PageSpeed 점수는 47이었다. 별도 로컬 Lighthouse 세 번에서는 점수 75와 LCP 5.33~5.38초가 나왔고, 첫 측정의 약 3.96MB 중 이미지가 3,393,157바이트였다. 두 환경의 점수를 전후 개선값처럼 비교할 수는 없었다. 다만 작은 카드에 1MB 넘는 이미지를 보내는 상태는 확인할 수 있었다.
원본을 남기고 WebP와 표시 크기를 먼저 바꿨다
첫 단계는 PNG/JPEG 옆에 WebP를 추가하는 방식이었다. WebP가 있으면 <picture>에서 사용하고, 없거나 사용할 수 없는 경우에는 기존 이미지를 표시한다. 전체 미디어에 적용하기 전 세 복사본으로 비교했다.
| 이미지 | 기존 파일 | WebP | 파일 용량 감소 |
|---|---|---|---|
| PNG ID 144 | 688,041 B | 60,354 B | 91.2% |
| PNG ID 139 | 752,748 B | 109,374 B | 85.5% |
| JPEG ID 158 | 100,025 B | 73,710 B | 26.3% |
이 값은 세 파일의 바이트 비교이며 사이트 전체 로딩 시간의 개선율이 아니다. 변환 전후 픽셀 크기와 카드의 글자·그래픽도 확인했다.
카드 종류에 맞게 sizes를 지정하고 일반 카드의 기본 이미지를 300px부터 사용하도록 했다. 넓은 화면이나 높은 DPR에서는 기존 srcset으로 더 큰 이미지를 선택할 수 있다. 이 단계에서는 이전 원본·썸네일이 남고 .png.webp, .jpg.webp 파일이 추가됐다.
새 업로드와 기존 미디어의 전환을 구분했다
새 PNG/JPEG는 첨부파일 등록 전에 WebP로 변환하도록 바뀌었다. 크기·절감률 조건을 통과한 경우만 WebP를 사용하고 아니면 원래 파일을 유지한다. WebP가 원본으로 등록되면 이후 썸네일과 srcset도 그 파일을 기준으로 만들어진다.
기존 미디어는 복제한 WordPress 환경의 첨부파일 세 개로 먼저 이전을 확인했다. 첨부파일 ID와 글의 연결을 유지하며 WebP를 기본 이미지로 바꾸고 옛 파일은 남겨뒀다. 글이나 외부 링크가 옛 URL을 직접 사용하면 파일부터 지우는 순간 주소가 깨질 수 있기 때문이다.
당시 확인에는 미디어 라이브러리·이미지 편집·REST 응답·본문/대표 이미지·모바일 카드가 포함됐다. 새 PNG가 WebP로 등록되고 하위 이미지도 WebP로 생성되는 경로도 확인했다. 바로 이전 파일을 삭제하는 절차로 넘어가지는 않았다.
남은 파일보다 URL을 먼저 확인했다
당시 사용하던 WebP 134개 외에 옛 PNG/JPEG 134개, 연결된 sidecar 133개, 이전 파일 목록에 속하지 않은 sidecar 12개가 남았다. 오래된 파일이라는 이유만으로 사용되지 않는 파일이라고 볼 수는 없었다.
먼저 삭제 대상과 URL 변경 대상을 목록으로 만들고 경로·크기·SHA-256을 확인했다. 별도 환경에서 삭제·복구를 시험하고, 실제 변경 직전에는 데이터베이스와 uploads 백업의 무결성을 확인했다.
당시 URL 변경은 발행 글 17개의 img.src 20개, 리비전 23개의 35개, Rank Math 설정의 1개였다. 이후 공개 페이지 28개가 모두 HTTP 200이었고 옛 이미지 주소가 HTML에 남지 않았다. 390px 브라우저의 이미지 요청 212개에도 옛 URL이나 실패 응답이 없었다. 이 숫자는 당시 조사 대상이며 지금의 글 수를 뜻하지 않는다.
일부 파일을 정리한 뒤 나머지로 넘어갔다
첫 삭제는 기존 첨부파일 하나에 연결된 10개 파일이었다. 사용 중이던 WebP의 image/webp 응답과 134개 WebP 보존을 확인한 뒤 나머지 257개를 여러 묶음으로 정리했다. 옛 이미지 URL은 당시 정책에 따라 404가 됐다.
별도로 남은 sidecar 12개는 데이터베이스 텍스트 컬럼과 WANY 소스의 참조, 공개 HTML과 브라우저 요청에서 사용되지 않는 것을 확인한 뒤 정리했다.
당시 최종 uploads 파일은 417개에서 138개가 됐다. 삭제한 279개의 논리 용량은 132,635,570바이트, 약 126.49 MiB였고 사용 중이던 WebP 134개는 유지됐다. 최종 URL 검사와 REST의 미디어 24개 확인, 공개 페이지 28개와 이미지 요청 212개에서도 사용 중인 경로가 정상이었다.
WebP로 PageSpeed나 검색 순위가 얼마나 올랐다는 결론은 없다. 당시 홈의 LCP 요소도 이미지가 아니라 글 제목이었다. 확인된 결과는 파일별 전송량 변화와, URL·백업·부분 정리를 거쳐 사용 중인 이미지를 유지하면서 남은 파일을 정리했다는 범위다.
개별 이미지의 압축이나 WebP 변환이 필요하면 WANY 이미지 최적화 도구를 브라우저에서 사용할 수 있다.