CSS 축소는 정말 필요한가? (2023)

공백과 주석만 제거하는 CSS 축소는 코드를 읽기 어렵게 만들지만, 다운로드와 파싱 성능에서는 체감할 만한 이점이 거의 없음 Bootstrap은 gzip만으로 147KB에서 22KB까지 줄며, 축소 후 gzip을 적용해도 20KB여서 절감량은 2KB에 그침 무작위 공백을 넣은 CSS 실험에서 선언 블록 10,000개는 9~10ms, 100,000개는 95~105ms에 파싱됐고, 현실적인 1,000개 규모에서는 차이를 측정하기 어려웠음 저사양 기기와 느린 연결을 이용한 WebPageTest에서도 축소 여부에 따른 최대 차이는 1,000개 블록에서 54ms였으며, 100,000개 블록에서는 오히려 더 작았음 스타일시트의 신호 대 잡음비가 극단적으로 낮고 밀리초마다 막대한 수익이 걸린 대기업이 아니라면 gzip 또는 Brotli만으로 충분함 코드 가독성과 전송 크기의 교환 여기서 축소는 중복 규칙 제거나 선택자 결합 같은 최적화가 아니라 모든 공백과 주석을 제거하는 작업을 뜻함 다른 웹페이지의 소스 코드를 살펴보는 일은 HTML과 CSS 학습에 도움이 되지만, 축소는 코드를 읽기 어렵게 만드는 추가 빌드 단계임 공백과 주석도 다운로드와 파싱에 비용을 더하지만, 그 차이는 사용자가 인지할 수준이 아님 CSS-Tricks의 Bootstrap 사례에서는 원본 147KB가 gzip 후 22KB, 축소 후 gzip 적용 시 20KB로 줄어듦 대형 라이브러리에서도 실제 절감량은 2KB임 해당 CSS-Tricks 페이지는 압축된 HTML만 38KB이고, 전체 압축 전송량은 1.80MB임 공백이 파싱과 렌더링에 미치는 영향 CSS 공백 파싱 실험 도구는 URL에서 난수 시드와 생성할 선언 블록 수를 받음 지정한 수만큼 무작위 스타일시트를 만들고 임의 공백의 포함 여부를 선택할 수 있음 문서에 link를 삽입한 시점부터 load 이벤트가 발생할 때까지만 측정함 데스크톱과 휴대전화에서 대형 스타일시트를 시험한 결과, 공백 유무에 따른 차이는 작았음 10,000개 블록은 9~10ms에 파싱됨 100,000개 블록은 95~105ms에 파싱됨 현실적인 1,000개 블록은 차이를 측정하기 어려울 만큼 빨랐음 실제 환경에 가까운 비교를 위해 동일 서버에 크기·주석·축소 여부가 다른 CSS와 같은 HTML 페이지를 배치하고, 여러 기기·연결·브라우저에서 WebPageTest를 실행함 CSS 로드 시작·종료 시점과 로드 이후 Start Rende...