플러그인 0개 워드프레스에서 글 한 편이 불러오는 파일 13개, 519KB를 뜯어 보면
워드프레스가 무겁다는 말을 들으면 보통 플러그인을 의심합니다. 그러면 플러그인이 하나도 없는 사이트는 얼마나 가벼울까요. 이 블로그가 그 조건입니다. 활성 플러그인 0개, 테마는 Kadence 하나입니다. 글 한 편을 열 때 브라우저가 받는 파일을 전부 세어 봤습니다. HTML 하나에 CSS 8개, JS 5개, 인라인 스타일 6개였고, 압축 전 기준으로 520KB였습니다. 그리고 그 절반 가까이는 워드프레스도 테마도 아닌 곳에서 왔습니다.
어떻게 세었는가
브라우저 개발자 도구를 열면 요청 목록이 나오지만, 이미지와 광고가 뒤늦게 끼어들어 기준이 흔들립니다. 그래서 서버에서 페이지 HTML을 받아 <link rel="stylesheet">와 <script src>를 추출하고, 각 파일을 다시 받아 크기를 쟀습니다. <style>과 <script> 안에 직접 박힌 인라인 코드도 따로 합쳤습니다. 이미지는 제외했습니다. 글마다 달라서 비교 기준이 되지 않기 때문입니다.
대상은 두 페이지입니다. 메인 화면과 가장 최근 글 한 편입니다. 수치는 모두 gzip 압축 전 원본 크기입니다. 실제 전송량은 이보다 작지만, 무엇이 무거운지 비교하는 데는 압축 전 값이 더 정직합니다.
글 한 편에 파일 13개, 520KB
먼저 글 한 편의 결과입니다.
| 구분 | 파일 수 | 크기 | 비중 |
|---|---|---|---|
| 외부 JS (광고 스크립트) | 1개 | 201.9KB | 38.9% |
| 테마 CSS | 8개 | 121.2KB | 23.3% |
| HTML 문서 | 1개 | 101.3KB | 19.5% |
| 테마 JS | 3개 | 53.8KB | 10.4% |
| 인라인 <style> | 6개 | 30.8KB | 5.9% |
| 인라인 <script> | 8개 | 6.3KB | 1.2% |
| 코어 JS | 1개 | 3.0KB | 0.6% |
합계 519KB입니다. 가장 큰 덩어리는 애드센스 스크립트 하나로 201.9KB입니다. 워드프레스 코어와 테마가 만든 모든 CSS·JS·인라인 코드를 다 합친 215KB와 거의 같습니다. 플러그인을 0개로 유지해도 광고 하나를 붙이는 순간 페이지 무게가 두 배가 됩니다.
코어가 직접 내보낸 외부 JS 파일은 comment-reply.min.js 3.0KB 하나뿐이었습니다. jQuery는 불려 나가지 않았습니다. 테마가 jQuery 없이 만들어졌고 플러그인이 없으니 아무도 요청하지 않은 것입니다. 플러그인 하나만 들어와도 이 자리에 jQuery 30KB가 다시 붙는 경우가 많습니다.
테마 CSS 8개 중 4개는 1~9KB
CSS 8개를 크기순으로 늘어놓으면 이렇습니다.
| 파일 | 크기 | 메인에서도 불림 |
|---|---|---|
| content.min.css | 33.6KB | 예 |
| global.min.css | 27.4KB | 예 |
| header.min.css | 24.7KB | 예 |
| footer.min.css | 19.5KB | 예 |
| kadence-splide.min.css | 9.0KB | 아니오 |
| comments.min.css | 4.9KB | 아니오 |
| author-box.min.css | 1.3KB | 아니오 |
| related-posts.min.css | 1.0KB | 아니오 |
메인 화면은 앞의 4개만 씁니다. 글 페이지에서 추가되는 4개는 댓글, 작성자 상자, 관련 글 같은 글 페이지에만 있는 부품의 스타일입니다. 테마가 화면에 따라 필요한 것만 붙이는 구조라는 뜻입니다. 이 4개를 합쳐도 16KB이니 파일 수는 늘었지만 무게는 크게 늘지 않았습니다.
JS도 같은 패턴입니다. 메인에서는 navigation.min.js 21.9KB 하나인데, 글 페이지에서는 관련 글 슬라이더용 splide.min.js 29.1KB와 초기화 코드 2.9KB가 더 붙습니다. 글 한 편에서 추가되는 JS 32KB가 전부 관련 글 슬라이더 몫입니다. 슬라이더를 끄고 목록으로 바꾸면 그대로 사라지는 무게입니다.
HTML 101KB의 정체
표에서 눈에 걸리는 것이 HTML 크기입니다. 글 본문은 4,400자 정도인데 문서는 101KB입니다. 메인 화면도 100KB였습니다. 본문 길이와 무관하게 100KB가 나온다는 것은 본문이 아니라 틀이 무겁다는 뜻입니다.
안을 들여다보니 인라인 <style> 30.8KB가 HTML 안에 들어 있었습니다. 그중 큰 것 세 가지입니다.
| id | 크기 | 누가 넣나 |
|---|---|---|
| global-styles-inline-css | 14.5KB | 워드프레스 코어 (theme.json) |
| kadence-global-inline-css | 11.9KB | 테마 (사용자 설정값) |
| wp-block-library-inline-css | 3.6KB | 워드프레스 코어 (블록) |
global-styles-inline-css는 워드프레스가 theme.json의 색상·글꼴·간격 설정을 CSS 변수로 풀어 매 페이지 HTML에 직접 써넣는 것입니다. 파일로 나가면 한 번 받고 캐시될 텐데, 인라인이라 페이지마다 14.5KB씩 다시 옵니다. 테마 설정값 11.9KB도 같은 방식입니다. 둘을 합쳐 26KB가 캐시되지 않는 무게로 매번 실려 갑니다.
나머지 70KB는 헤더와 푸터의 메뉴, SVG 아이콘, 관련 글 목록, 댓글 폼 같은 구조입니다. 이 부분은 두 페이지가 거의 같았습니다. 그래서 본문이 짧은 글이든 긴 글이든 HTML은 100KB 근처에서 움직입니다.
이모지 스크립트는 남아 있다
인라인 <script> 8개 중에는 wp-emoji 감지 코드가 들어 있고, 스타일에도 wp-emoji-styles-inline-css 0.3KB가 있습니다. 크기는 작지만 이 사이트에서 이모지를 쓴 글은 한 편도 없습니다. 코어가 기본으로 넣는 것이라 플러그인이 없어도 남습니다. 끄려면 print_emoji_detection_script와 print_emoji_styles 훅을 떼야 하는데, 얻는 것이 1KB 남짓이라 손댈 가치는 판단이 갈립니다.
없는 것도 세어 봤다
있는 것만큼 없는 것도 확인했습니다. preload 0개, preconnect·dns-prefetch 0개, @font-face 0개입니다.
폰트 0개는 의도한 결과입니다. 시스템 글꼴만 쓰도록 테마를 설정했기 때문에 웹폰트 파일이 하나도 내려가지 않습니다. 한글 웹폰트는 한 벌에 수백 KB이니, 이 사이트에서 가장 큰 절약이 이 항목입니다. 광고 스크립트 201KB보다 큰 파일이 여기서 빠졌습니다.
preconnect 0개는 반대로 빠진 것입니다. 광고 스크립트가 pagead2.googlesyndication.com에서 오는데, 그 도메인에 미리 연결하라는 힌트가 없습니다. 브라우저는 스크립트 태그를 만난 뒤에야 DNS 조회와 TLS 연결을 시작합니다. 한 줄이면 되는 일인데 기본으로는 들어 있지 않습니다.
정리하면
플러그인 0개 사이트에서 글 한 편은 파일 13개, 압축 전 519KB였습니다. 그중 워드프레스와 테마의 몫은 215KB이고, 광고 스크립트 하나가 202KB, HTML 자체가 101KB입니다. 가볍게 만든 사이트에서도 무게의 40%는 사이트 밖에서 온다는 것이 이번 측정의 결론입니다.
그래서 페이지 무게를 줄일 때는 플러그인 목록보다 먼저 볼 곳이 있습니다. 외부 스크립트가 몇 개인지, 인라인 스타일이 캐시 없이 매번 얼마나 실리는지, 웹폰트가 있는지입니다. 이 셋을 확인한 뒤에 플러그인을 봐도 늦지 않습니다.
직접 세어 보는 방법
같은 측정은 서버에서 한 줄로 시작할 수 있습니다. 페이지를 받아 스타일시트와 스크립트 주소만 뽑는 명령입니다.
curl -s https://example.com/
| grep -oE '(href|src)="[^"]+.(css|js)[^"]*"'
| sort -u나온 주소를 하나씩 받아 크기를 재면 이 글의 표가 됩니다. 인라인 코드 크기는 <style>과 </style> 사이를 잘라 세면 됩니다. 어느 파일이 가장 큰지는 열 개만 세어 봐도 바로 드러납니다.
