스티커가 페이지 속도에 미치는 영향과 형식별 최적화
휴대전화로 글을 열었는데 캐릭터가 하나씩 늦게 나타난다. 글은 이미 보였지만 스티커가 빈 네모로 남으면 페이지 전체가 답답하게 느껴진다.
워드프레스에서 이모지와 캐릭터 스티커는 분위기를 바꾸지만, 브라우저가 처리해야 할 문자·이미지·스크립트이기도 하다. 같은 스티커도 어떤 형식으로 넣느냐에 따라 기다리는 시간이 달라진다.
스티커는 장식처럼 보여도 페이지가 처리할 일이다
일반 이모지는 글자처럼 보인다. 하지만 워드프레스의 기본 이모지 기능은 이모지용 스타일을 더하고, 브라우저가 제대로 표시할 수 있는지 확인하는 로더를 사용한다.
캐릭터 스티커를 이미지로 넣으면 파일을 내려받는 일도 추가된다. PNG, WebP, AVIF, GIF는 각각 파일 크기가 다르고, 외부 서버의 이미지는 사이트 밖으로 요청을 보낸다.
결국 스티커의 속도 문제는 귀여움의 문제가 아니다.
브라우저가 무엇을, 얼마나 많이, 어디에서 가져오는지의 문제다.
왜 스티커가 많은 글에서 모바일이 먼저 느려질까
스티커를 여러 개 넣은 글을 휴대전화에서 열면 본문보다 이미지가 늦게 나타날 수 있다. 속도 측정 도구에서는 이미지 요청이나 이모지 관련 스크립트가 문제로 표시되기도 한다.
워드프레스 Trac에는 최신 브라우저에서도 필요하지 않은 이모지 스크립트가 불러와져 페이지마다 약 4.7KB의 자바스크립트가 더해진 문제가 기록됐다. 이 문제는 워드프레스 6.2에서 브라우저 기능을 확인하는 방식이 수정된 것으로 기록되어 있다.
이모지 감지 스크립트와 스타일, 외부 이모지 처리를 제거하는 플러그인이 따로 운영되는 것도 이런 불편을 겪는 사용자가 많기 때문이다.
다만 이모지를 몇 개 쓴다고 곧바로 기능을 없애야 한다는 뜻은 아니다.
가장 안전한 기본값은 작은 WebP와 AVIF다
한 줄로 답하면 이렇다.
스티커를 모두 없애기보다 정적인 작은 스티커를 WebP나 AVIF로 제공하고, 애니메이션 GIF와 외부 서버 의존형 스티커는 꼭 필요할 때만 쓰는 편이 안전하다.
Chrome Lighthouse 문서는 같은 품질이라면 WebP와 AVIF가 JPEG·PNG보다 작은 파일을 만들 수 있다고 설명한다. 워드프레스 6.5 개발자 문서도 AVIF가 같은 화질에서 JPEG보다 최대 50% 작아질 수 있다고 안내한다.
하지만 파일 형식만 바꾸면 끝나지 않는다.
워드프레스의 반응형 이미지, 지연 로딩, 우선순위 지정 기능과 함께 알맞은 표시 크기를 선택해야 실제 전송량도 줄어든다.
스티커의 모습에 따라 형식을 고르면 된다
움직이지 않는 캐릭터라면
본문 사이에 들어가는 작은 정적 캐릭터는 WebP를 기본값으로 삼기 쉽다. 투명 배경이 필요해도 WebP는 투명도를 지원하고, 손실·무손실 압축을 모두 제공한다.
서버와 방문자의 브라우저 환경을 확인할 수 있다면 AVIF를 먼저 전달할 수도 있다. 이때는 WebP나 PNG 같은 대체 형식을 함께 두어야 한다.
작고 정적인 스티커라면 선택은 단순하다.
움직임이 필요하다면
움직이지 않아도 되는 장식용 GIF는 정적인 WebP나 AVIF로 바꾸는 것이 낫다. 움직임이 꼭 필요하면 프레임 수와 표시 크기를 줄이고, 첫 화면 밖에 두어 지연 로딩하는 쪽을 먼저 생각한다.
워드프레스 블록 에디터 문서에 따르면 애니메이션 GIF와 WebP는 모든 프레임을 유지한 채 작은 크기로 다시 만들 때 정적 이미지보다 인코딩 시간이 길고 파일도 커질 수 있다. 긴 애니메이션은 크기를 줄여도 원본에 가까운 파일이 될 수 있다.
움직임이 꼭 필요하지 않다면 정지시키는 편이 가장 빠르다.
형식만 바꾸면 해결된다는 오해
AVIF가 항상 가장 빠른 것은 아니다. Lighthouse는 AVIF의 브라우저 지원이 WebP보다 제한적일 수 있어, 지원하지 않는 브라우저를 위한 PNG나 JPEG 대체 형식이 필요할 수 있다고 안내한다.
또 하나의 함정은 파일은 바뀌었는데 방문자에게는 예전 파일이 전달되는 경우다. 테마가 직접 출력한 이미지나 블록 밖의 이미지는 최신 형식으로 자동 변환되지 않을 수 있다.
관리 화면에서 AVIF가 만들어졌는지만 봐서는 부족하다.
실제 페이지의 HTML과 네트워크 요청에서 어떤 파일이 내려오는지 확인해야 한다.
직접 해결할 때 가장 막히는 지점이 바로 여기다. 이미지 하나는 바꿀 수 있어도 테마의 하드코딩 이미지와 외부 스티커 요청, 애니메이션 파일을 한꺼번에 찾아내기는 어렵다.
워드프레스 7.1은 JPEG, PNG, GIF, WebP, AVIF의 압축·크기 조절·형식 변환을 브라우저에서 처리하는 기능을 도입했지만, 사이트의 모든 출력 방식을 자동으로 정리해 주는 것은 아니다.
작업 뒤에는 속도 점수만 보지 말아야 한다.
휴대전화에서 첫 화면이 먼저 보이는지와 이미지 요청 수를 함께 확인해야 한다.
내 스티커에는 무엇을 선택할까
- 작은 정적 캐릭터: WebP를 기본으로 선택한다.
- AVIF 사용 가능: 대체 형식과 함께 우선 전달한다.
- 반복되는 이모지: 이미지보다 기본 텍스트 이모지를 먼저 검토한다.
- 장식용 GIF: 정적 이미지로 바꾼다.
- 필수 애니메이션: 프레임과 크기를 줄이고 첫 화면 밖에 둔다.
이모지를 몇 개만 쓰는 일반 블로그라면 무조건 제거하지 말고, 페이지 소스와 네트워크 탭에서 이모지 호환 스크립트가 실제로 필요한지 먼저 본다.
반대로 움직이는 GIF가 여러 개이거나 큰 캐릭터를 첫 화면에 배치했다면 형식 변경보다 애니메이션 제거와 크기 축소가 먼저다.
핵심은 스티커를 남길지 말지가 아니다.
필요한 장면에 가장 작은 파일로 보여 주는 것이다.
DecoBlocks로 스티커와 읽는 흐름 정리하기
스티커를 남길 장면과 설명을 구분해 글의 흐름을 정리할 때는 DecoBlocks를 사용할 수 있다. Insert Character Sticker는 설치한 스티커 팩의 캐릭터 스티커를 글에 넣으며, 블록 편집기와 클래식 편집기 숏코드를 지원한다.
스티커가 들어간 안내나 주의 사항은 Section Box (Solid)로 관련 내용을 묶어 보여 줄 수 있다. 긴 글에서 H2와 H3 제목을 기준으로 이동 경로를 만들고 싶다면 Auto Table of Contents를 사용할 수 있다. 다만 이 기능들은 글의 표현과 구조를 꾸미는 기능이며, 스티커 파일의 형식·크기·지연 로딩을 대신 판단하지는 않는다.
자주 묻는 질문
Q. WebP와 AVIF 중 하나만 고르면 무엇이 좋은가요?
A. 작은 정적 스티커는 WebP를 기본으로 쓰기 쉽습니다. AVIF를 사용할 수 있다면 AVIF를 먼저 전달하되 WebP나 PNG 대체 형식을 함께 두는 편이 안전합니다.
Q. 스티커 문제를 도구로 쉽게 해결할 수 있나요? 어떤 도구를 쓰면 되나요?
A. 이미지 압축·변환 기능과 브라우저의 개발자 도구를 함께 사용할 수 있습니다. 변환 뒤에는 실제 HTML과 네트워크 탭에서 방문자에게 전달되는 파일 형식과 크기를 확인해야 합니다.
Q. 제 사이트에서는 무엇부터 확인해야 하나요?
A. 첫 화면의 큰 이미지와 움직이는 GIF부터 확인하세요. 그다음 작은 정적 스티커를 WebP 또는 AVIF로 바꾸고, 이모지 호환 스크립트와 외부 이미지 요청이 필요한지 살펴보면 됩니다.
Q. 스티커가 들어간 긴 글의 구역은 어떻게 나누나요?
A. DecoBlocks의 Section Box (Solid)는 관련 내용을 상자 안에 묶어 보여 주고, Insert Character Sticker는 글 안에 캐릭터 스티커를 넣습니다.
H2와 H3 제목을 바탕으로 Auto Table of Contents를 만들어 긴 글의 이동 경로도 정리할 수 있습니다. 파일 형식과 표시 크기 확인은 별도로 진행해야 합니다.
워드프레스 관련 플러그인
