이미지만 WebP로 바꿨는데 LCP가 달라지는 이유
이미지가 자동으로 줄어든다고 들었는데도 사이트는 그대로 느립니다.⠀
업로드할 때마다 용량 걱정에 사진을 일일이 줄여 올렸던 분이라면 이 구조를 모른 채 지나쳤을 수 있습니다.⠀
워드프레스가 큰 사진을 알아서 줄여준다는데 왜 속도는 그대로인지 그 이유를 짚어보겠습니다.⠀
⠀⠀⠀
⠀⠀⠀
새로고침을 반복해도 그대로인 체감 속도⠀
⠀⠀⠀
⠀⠀⠀
⠀⠀⠀
사이트가 느려졌다고 느끼면 가장 먼저 새로고침을 몇 번 눌러보게 됩니다.⠀
그런데도 로딩이 그대로라면 브라우저 쪽 문제가 아니라 사이트에 쌓인 파일 쪽에 원인이 있다는 신호로 볼 수 있습니다.⠀
워드프레스가 이미지를 자동으로 줄여준다는 말을 들어본 적이 있다면 더 혼란스러울 수 있습니다.⠀
자동 축소 기능이 실제로 무엇을 줄이고 무엇은 그대로 두는지부터 화면으로 들여다볼 필요가 있습니다.⠀
⠀⠀⠀
업로드 하나에 딸려오는 이미지 크기들⠀
⠀⠀⠀
워드프레스 설정 메뉴의 미디어 항목을 열어보면 이미지 크기 섹션이 보입니다.⠀
썸네일은 150×150, 중간 크기는 기본 300px 폭 내외, 대형 크기는 기본 1024px 폭으로 지정돼 있습니다.⠀
이 세 가지는 사진 하나를 업로드할 때마다 원본과 별도로 자동 생성되는 파생 파일입니다.⠀
⠀⠀⠀
워드프레스가 본문·썸네일·목록 등 쓰임에 맞춰 크기를 나눠 쓰도록 만든 구조이다 보니 이 파일들은 삭제 전까지 서버에 그대로 남습니다.⠀
사진 1장을 올렸는데 미디어 라이브러리에서 같은 파일명의 변형이 여러 개 보인다면 이 구조 때문입니다.⠀
⠀⠀⠀
2560px를 넘으면 붙는 -scaled 파일⠀
⠀⠀⠀
워드프레스는 5.3 버전부터 big_image_size_threshold라는 기준을 코어에 넣었습니다.⠀
업로드한 원본의 가로나 세로 중 긴 변이 2560px를 넘으면 자동으로 축소된 파일을 만들어 full 사이즈로 저장합니다.⠀
이때 생성되는 파일명 끝에는 -scaled라는 접미사가 붙습니다.⠀
⠀⠀⠀
이 기준은 2019년 도입된 이후 지금까지 코어 기본값으로 남아 있는 수치입니다.⠀
즉 2560px 미만으로 찍거나 편집한 사진은 애초에 이 자동 축소 대상에 들어가지 않습니다.⠀
⠀⠀⠀
2560px 아래로만 맞추면 되는 걸까⠀
⠀⠀⠀
그렇다면 업로드할 때 2560px 이하로만 맞추면 축소 관련 걱정은 끝나는 셈입니다.⠀
기준선 아래에서 올린 파일은 -scaled 파일 자체가 생성되지 않기 때문에 원본 그대로 저장됩니다.⠀
반대로 2560px를 넘겨 올리면 그 순간부터 축소된 full 파일과 원본이 함께 자리를 차지합니다.⠀
⠀⠀⠀
원본을 크게 올려도 자동으로 줄여주니 상관없다고 생각하기 쉬운 지점이 여기입니다.⠀
축소는 2560px를 넘는 경우에만 작동하는 안전장치일 뿐, 그 아래 크기는 올린 그대로 저장된다는 점이 다릅니다.⠀
⠀⠀⠀
축소되고도 용량이 줄지 않는 이유⠀
⠀⠀⠀
여기서 짚어볼 부분은 -scaled 파일이 생겨도 앞서 본 썸네일, 중간, 대형 파일은 사라지지 않는다는 사실입니다.⠀
원본 하나가 2560px 기준으로 줄어드는 동안 150×150, 300px, 1024px짜리 파일은 각각 그대로 함께 만들어집니다.⠀
결국 사진 1장을 올릴 때마다 서버에는 파생 파일 여러 개가 동시에 쌓이는 구조입니다.⠀
⠀⠀⠀
흔히 축소 기능이 켜져 있으니 용량 문제는 해결됐다고 여기게 되는데, 개인적으로는 이 지점에서 -scaled 파일 하나만 보고 안심하는 경우가 많다고 봅니다.⠀
사진을 올릴 때마다 생기는 파일 개수를 미디어 라이브러리에서 직접 펼쳐 세어보는 쪽이 더 정확한 확인 방법입니다.⠀
⠀⠀⠀
사진 1장을 업로드한 직후 미디어 라이브러리의 해당 파일을 열어 몇 개의 크기 변형이 함께 생성됐는지 직접 펼쳐보는 것이 다음으로 할 일입니다.⠀
⠀⠀⠀
You May Also Like
내 워드프레스가 ‘주의요함’ 뜨는 이유, 딱 1가지만 바꾸세요
Topical Authority는 무엇인가?
