CSS 단위가 웹사이트 속도를 저하시키는 이유와 해결 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 웹 디자이너 (중간 수준)

핵심 요약

• em 및 % 단위는 애니메이션 성능에 부정적 영향 (예: .card-title에서 em 사용 시 계산 비용 증가)
• 애니메이션에 px 또는 rem 사용 권장 (rem은 루트 html 폰트 크기 기준으로 계산 효율성 향상)
• will-change 속성 사용으로 브라우저의 애니메이션 최적화 유도 (transform, opacity 등에 적용)

섹션별 세부 요약

1. Throughput(처리량) 정의

• 브라우저가 초당 수행할 수 있는 작업량을 의미 (요소 측정/그리기, 레이아웃 변경 반응, 실시간 리사이즈/애니메이션 처리 포함)
• 부적절한 단위 선택은 처리량 저하로 이어짐

2. CSS 단위 비교

• px: 계산 빠름, 고정 크기 요소(보더, 그림자, 빠른 애니메이션)에 적합
• em/rem: 유연성 제공, 계산 비용이 높아 애니메이션에 부적합
• %: 부모 크기에 따라 적응, 하지만 리플로우 발생 가능성 있음
• vw/vh: 뷰포트 기반 동적 크기, 모바일에서 성능 저하 유발
• fr: CSS Grid에서 효율적, 동적 그리드 시 비용 증가

3. `em` 단위의 성능 문제 사례

• .card-title에서 font-size: 1.2em 사용 시, 부모 폰트 크기 변경 시 재계산 발생
• 카드 목록이 길 경우 애니메이션 중 지연(재플로우) 발생

4. 애니메이션 최적화 대안

• rem 또는 px 사용: rem은 루트 폰트 크기 기준으로 계산 효율성 향상, px는 고정 크기 시 최적
• 예: .card-title { font-size: 1.2rem } 또는 18px

5. 성능 최적화 팁

• % 및 vw/vh은 빈번한 크기 변경 요소에서 피해야 함 (성능 병목 유발)
• 깊은 중첩 구조에서 em 사용 피해야 함 (재계산 체인 발생)
• will-change 속성 활용: 애니메이션 대상 요소에 will-change: transform, opacity 설정하여 브라우저에게 사전 정보 제공

결론

• 애니메이션에 px/rem 사용, %/vw/vh은 피하고 will-change로 최적화
• CSS 단위 선택은 성능 최적화에 직접적인 영향을 미치므로, 애니메이션 및 레이아웃 구조에 따라 단위를 철저히 분석해야 함