비용이 많이 드는 CSS 속성과 최적화 방법

https://levelup.gitconnected.com/costly-css-properties-and-how-to-optimize-them-b2ebc6a85979 # Box-Shadow - blur radius 반경을 작은 값으로 줄이기 - 그라데이션 대신 단색 쓰기 - 내부 그림자에 inset 쓰기: 추가 레이어가 없어서 성능이 좋아짐 - box-shadow 애니메이션에는 will-change 쓰기: 브라우저에게 알려줘서 렌더링이 최적화됨 # Background Image - 더 작은 크기의 이미지 사용 - JPEG 또는 PNG 최적화와 같은 이미지 압축 기술 사용 - 이미지 스프라이트를 사용하여 HTTP 요청 횟수 줄이기 - lazy loading 써서 필요할 때만 이미지 불러오기 # Border-Radius - 더 작은 `border-radius` 값 사용 - 복잡한 테두리 디자인에 `border-radius` 대신 `border-image` 속성 사용 - 복잡한 테두리 디자인에 SVG 그래픽 사용 # Transforms - 가능하면 3D 트랜스폼 대신 2D 트랜스폼 사용 - 트랜스폼 애니메이션 시 성능 향상을 위해 will-change 속성 사용 - `transform-style: preserve-3d` 속성을 사용하여 하드웨어 가속 사용 # Filters - 더 간단한 필터 이펙트 사용 - 필터 애니메이션 시 성능 향상을 위해 `will-change` 속성 사용 - `transform-style: preserve-3d` 속성을 사용하여 하드웨어 가속 사용 원본 CSS code: ```css div { filter: blur(5px); } ``` 최적화된 CSS code: ```css div { filter: blur(1px); transform: translateZ(0); } ``` `5px` 대신에 `1px`를 사용함. 이렇게 하면 흐림 효과를 렌더링하는 데 필요한 처리량이 줄어듬. 또한 `translateZ(0)` 값으로 변형 속성을 추가함. 이렇게 하면 요소에 대한 새 레이어가 생성되어 GPU 가속 및 성능 향상에 도움이 됨. 이렇게 최적화된 CSS 코드를 사용하면 웹페이지의 성능에 미치는 영향을 줄이면서 동일한 시각 효과를 얻을 수 있음.