티스토리 스킨을 오래 손대다 보면 어느 순간 CSS 파일이 걷잡을 수 없는 크기로 불어나 있습니다. 저도 반년 넘게 스킨을 수정하다 파일이 4,000줄을 넘어선 걸 뒤늦게 알았습니다. 공백, 주석, 이미 덮어쓴 속성들이 쌓인 결과였고, 그게 블로그 로딩 속도에 직접 영향을 주고 있었습니다. 솔직히 처음엔 그냥 방치했습니다. "나중에 정리하면 되지"라는 생각이었는데, 그 나중이 결국 오지 않았습니다.
PageSpeed 점수가 낮게 나온 이유
구글 PageSpeed Insights로 블로그를 검사해봤더니 모바일 기준 58점이 나왔습니다. "렌더링 차단 리소스 제거"라는 경고도 함께 떴는데, 처음엔 무슨 말인지 감이 오지 않았습니다. 찾아보니 CSS 파일이 600KB를 넘어서 브라우저가 페이지를 그리기 전에 그 파일을 전부 내려받느라 지연이 발생하는 구조였습니다.
렌더링 차단이란, 브라우저가 페이지를 화면에 표시하기 전에 특정 파일을 완전히 처리해야 하는 상황을 말합니다. CSS 파일이 클수록 이 대기 시간이 길어지고, 사용자 입장에서는 흰 화면이 오래 유지되는 경험으로 이어집니다.
페이지 로딩 속도는 단순한 체감 문제가 아닙니다. 구글은 Core Web Vitals를 검색 순위 반영 요소로 공식화하고 있으며, LCP(최대 콘텐츠 페인트)와 FID(최초 입력 지연) 등의 지표가 SEO에 직접 영향을 줍니다. 파일 크기 하나가 검색 노출과도 연결되는 셈입니다. 저도 이 사실을 알고 나서야 방치하던 CSS 파일을 다시 열어봤습니다.
CSS Minify로 파일 크기 줄이기
CSS Minify란 CSS 파일에서 공백, 줄바꿈, 주석 등 브라우저가 실제로 무시하는 요소들을 제거해 파일 크기를 줄이는 작업입니다. 코드의 기능은 그대로 유지되면서 전송되는 바이트 수만 줄어드는 방식입니다.
저는 cssminifier.com에 원본 CSS를 붙여넣었고, 600KB였던 파일이 420KB로 줄었습니다. 압축 후 PageSpeed 점수는 71점으로 올랐습니다. 13점 차이가 크게 느껴지지 않을 수도 있는데, 모바일 기준 60점대와 70점대는 체감 로딩 속도에서 꽤 차이가 납니다.
그 다음으로 크롬 Coverage 탭을 써봤습니다. Coverage란 현재 페이지에서 실제로 실행되거나 적용된 코드의 비율을 보여주는 개발자 도구 기능입니다. 결과가 꽤 충격적이었습니다. 전체 CSS의 절반 가까이가 현재 페이지에서 전혀 사용되지 않는 규칙이었습니다. 반년 넘게 쌓인 테스트용 코드와 이미 무효화된 선택자들이 그대로 남아 있었던 겁니다. 뒤통수를 맞은 것 같았습니다. 열심히 수정했다고 생각했는데, 실제로는 그 흔적만 쌓이고 있었던 것이었으니까요.
CSS 변수도 파일 관리에 도움이 됩니다. CSS 변수란 값을 변수로 선언해두고 여러 곳에서 재사용하는 방식입니다. 같은 색상이나 간격 값이 수십 군데 반복되어 있던 제 CSS에서는 특히 효과적이었고, 나중에 수정할 때도 한 곳만 바꾸면 됐습니다.
Minify 전후 핵심 변화를 정리하면 다음과 같습니다. 파일 크기는 600KB에서 420KB로 약 30% 감소했고, PageSpeed 모바일 점수는 58점에서 71점으로 올랐습니다. 미사용 CSS 규칙은 전체의 절반 가까이로 확인됐습니다.
원본 백업 없이는 절대 하지 말 것
솔직히 이건 제가 직접 겪고 나서야 알게 된 부분입니다. 처음 Minify를 적용할 때 원본을 따로 저장하지 않고 압축된 CSS 파일을 바로 수정하려다 전체를 다 망가뜨린 적이 있습니다. 압축된 CSS는 줄바꿈이 없어 어디서부터 어디까지가 어떤 규칙인지 눈으로 파악하기가 거의 불가능합니다. 한 곳을 잘못 건드리면 연쇄적으로 레이아웃이 무너집니다.
그 경험 이후로는 원본 CSS 파일을 텍스트 파일로 별도 저장해두고, 수정이 필요하면 원본을 고친 뒤 다시 Minify해서 적용하는 방식을 고수하고 있습니다. 번거롭게 느껴질 수 있지만, 한 번 날려본 경험이 있으면 이게 선택이 아니라는 걸 바로 알게 됩니다. 누군가 이 글을 읽고 그 경험을 건너뛸 수 있다면 다행입니다.
티스토리는 Gzip 압축을 자체 지원하기 때문에, Minify된 CSS는 전송 단계에서 한 번 더 압축됩니다. Gzip이란 서버가 파일을 전송하기 전에 데이터를 압축하고, 브라우저가 수신 후 해제하는 방식으로 실질적인 전송 크기를 줄이는 기술입니다. Minify와 Gzip이 함께 적용되면 원본 대비 전송 용량이 크게 줄어듭니다.
CSS 압축만으로는 부족합니다
한 가지 솔직하게 말하고 싶은 게 있습니다. CSS Minify는 분명히 효과가 있지만, 전체 최적화 작업 중 한 조각일 뿐입니다. 제 경험상 PageSpeed 점수에 더 큰 영향을 주는 건 이미지 최적화나 렌더링 차단 스크립트 제거인 경우가 많았습니다. 블로그 글 하나에 최적화되지 않은 이미지 서너 장만 들어가 있어도, CSS를 아무리 압축해봤자 점수는 크게 오르지 않습니다.
그러니 CSS 압축으로 점수가 극적으로 달라지리라는 기대는 조금 내려놓는 편이 현실적입니다. 이건 많은 최적화 관련 글에서 CSS Minify를 마치 만능 해결책처럼 소개하는 경향에 대한 제 개인적인 반론이기도 합니다. 효과는 있습니다. 하지만 그것만으로는 충분하지 않습니다.
CSS 파일이 점점 무거워지고 있다면, 먼저 PageSpeed Insights로 현재 상태를 측정해보고, Coverage 탭으로 미사용 규칙부터 확인하는 순서로 접근하는 것을 권합니다. Minify는 그 다음 단계입니다. 원본 백업만 철저히 해두면 큰 리스크 없이 시도해볼 수 있는 작업입니다.
참고: