이 블로그를 만들면서 속도가 궁금해서 우리 사이트를 직접 재봤다. 결과가 좀 재미있었다. 데스크톱에서는 홈페이지가 반 초 만에 떴는데, 정작 고쳐야 할 문제 하나가 크게 보였다. 오늘은 그 이야기를 우리 사이트를 예로 풀어 본다. 워드프레스 속도, 어디서부터 손봐야 할까.
속도의 기준: 코어 웹 바이탈
구글은 페이지 속도를 세 가지 지표로 잰다. 코어 웹 바이탈이라고 부른다.
| 지표 | 무엇을 재나 | 좋음 기준 |
|---|---|---|
| LCP | 가장 큰 요소가 뜨는 데 걸린 시간 | 2.5초 이내 |
| INP | 클릭·입력에 반응하는 속도 | 200ms 미만 |
| CLS | 로딩 중 화면이 밀리는 정도 | 0.1 미만 |
중요한 건, 구글이 이 점수를 데스크톱이 아니라 모바일과 느린 연결 기준으로, 그것도 실제 방문자 상위 75%가 겪는 값으로 매긴다는 점이다. 그래서 내 컴퓨터에서 빨라 보여도 안심할 수 없다.
우리 사이트를 재보니
잘하고 있는 것부터. 로딩 중 화면이 밀리는 정도(CLS)는 0.003으로 거의 완벽했다. 이미지마다 가로세로 크기를 지정해 둔 덕에 로딩 중에 글이 튀지 않는다. 테마도 가볍다. GeneratePress는 CSS 20KB, JS 7KB 남짓만 싣는다.
문제는 이미지였다. 페이지 한 장이 2.8MB인데, 그중 95%가 이미지다. 그것도 전부 최적화하지 않은 PNG였다. 홈페이지에만 800KB에서 950KB짜리 PNG 세 장이 실려 있었다. 데스크톱에서 빨라 보인 건 연결이 빨라서일 뿐, 느린 모바일에서는 이 무게가 그대로 속도를 끌어내린다. 게다가 완성된 페이지를 저장해 두는 캐시 플러그인도 아직 없었다.
그럼 뭘 먼저 손볼까
1. 이미지부터 (효과가 제일 크다)
PNG나 JPG를 WebP, AVIF 같은 최신 포맷으로 바꾸면 화질은 비슷하게 두고 용량을 크게 줄일 수 있다. 화면에 보이는 크기보다 큰 원본을 그대로 올리지 말고 맞춰서 줄이고, 화면 아래쪽 이미지는 지연 로딩으로 나중에 불러온다. 단 하나 예외가 있다. 첫 화면에서 가장 큰 이미지는 지연 로딩하면 안 된다. 오히려 먼저 불러와야 한다.
2. 캐시 플러그인
방문할 때마다 PHP로 페이지를 새로 그리는 대신, 완성된 HTML을 저장해 두고 그대로 내주는 방식이다. WP Super Cache, W3 Total Cache, LiteSpeed Cache 같은 무료 플러그인이 흔히 쓰인다. 방문자가 늘수록 효과가 커진다.
3. 안 쓰는 자산 빼기
플러그인은 자기 CSS와 JS를 모든 페이지에 얹는 경우가 많다. 문의 폼 플러그인이 폼도 없는 글에 스크립트를 싣는 식이다. 안 쓰는 곳에서 빼 주면 그만큼 가벼워진다.
4. 테마와 플러그인은 절제
플러그인이 많을수록 불러오는 파일과 데이터베이스 조회가 늘어난다. 꼭 필요한 것만 남기고, 테마는 가벼운 걸 고른다.
5. 호스팅과 CDN, 데이터베이스
서버 응답이 느리면 나머지를 아무리 손봐도 한계가 있다. 좋은 호스팅과 최신 PHP 버전, 그리고 방문자와 가까운 곳에서 파일을 내주는 CDN이 도움이 된다. 오래된 수정 기록이나 찌꺼기 데이터를 가끔 정리해 주는 것도 좋다.
정리
속도는 내 컴퓨터에서 빠른지가 아니라 느린 모바일에서 빠른지가 기준이다. 우리 사이트도 데스크톱에선 멀쩡했지만 진짜 문제는 이미지 무게였다. 순서를 정하자면 이미지 최적화가 먼저고, 그다음이 캐시, 그다음이 안 쓰는 자산 정리다. 우리도 이미지부터 바꿔 볼 참이다. 참고로 이 측정은 데스크톱 브라우저로 한 번 재본 값이라, 구글의 정식 모바일 점수와는 다르다는 점은 밝혀 둔다.