웹 페이지의 성능 최적화는 사용자 경험을 향상시키는 핵심 요소 중 하나다. 최근에 CSS 애니메이션을 작성하다 브라우저에 최적화 힌트를 줄 수 있는 CSS 속성들을 알게 되어 좀 더 조사해보았다. 이 글에서는 세 가지 CSS 속성(contain, will-change, content-visibility)에 대해 정리했다.
이 속성들이 어떻게 최적화에 영향을 주는지 좀 더 파악하기 위해서는 브라우저에서 렌더링이 어떤 순서로 발생하는지에 대해 이해가 필요한데, 아래 글을 읽어보는 것을 추천한다. 브라우저 렌더링과 CSS 애니메이션에 대해 이해하기 쉽게 작성되어있다.
[CSS] 왜 transform 애니메이션 성능이 좋을까? (with. GPU, Reflow)
1. Left 애니메이션은 왜 끊길까? transform, left 속성으로, 대각선 방향으로 움직이는 공 애니메이션을 만들어봤다. See the Pen Animate with Translate and left by KumJungMin (@kumjungmin) on CodePen. 보기에는 둘 다 잘
mong-blog.tistory.com
contain: 범위 제한하기
기본 개념
CSS contain 속성은 특정 요소와 그 하위 요소가 문서의 나머지 부분에 영향을 주지 않도록 제한하는 데 사용된다. 브라우저는 이 정보를 활용해 렌더링 계산을 전체 페이지가 아닌 일부에서만 수행할 수 있어 성능이 향상된다.
주요 값
contain 속성에는 아래의 값이 올 수 있다.
- size: 요소의 크기를 계산할 때 자식 요소의 크기를 고려하지 않도록 한다.
- layout: 요소의 레이아웃을 독립적으로 처리하여, 외부 요소에 영향을 주지 않게 한다.
- style: 스타일 계산이 다른 요소에 영향을 미치지 않도록 한다.
- paint: 요소의 페인트 작업이 독립적으로 처리되도록 한다.
- content: layout과 paint를 모두 포함하는 값
- strict: style을 제외한 size, layout, paint를 모두 포함하는 값
/* 키워드 값 */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;
/* 다중 값 */
contain: size paint;
contain: size layout paint;
/* 전역 값 */
contain: inherit;
contain: initial;
contain: unset;최적화 원리
contain 속성은 브라우저가 레이아웃 계산, 스타일 계산, 페인트 작업을 독립적으로 처리할 수 있게 한다. 이를 통해 특정 요소의 변경이 전체 페이지에 영향을 미치지 않도록 하여 불필요한 재계산과 재렌더링을 방지한다.
사용하면 좋은 경우
- 복잡한 레이아웃이나 애니메이션이 있는 페이지에서 성능을 개선할 때
- 독립적인 위젯이나 컴포넌트가 많은 페이지에서
- 다른 부분에 영향을 주지 않으나 콘텐츠가 자주 변경되는 부분을 격리시키고 싶을 때
주의할 점
- contain: size를 사용할 경우, 요소의 크기를 명시적으로 지정해야 한다. 그렇지 않으면 레이아웃 오류가 발생할 수 있다.
- 일부 구형 브라우저에서는 지원되지 않을 수 있으므로 브라우저 호환성을 확인해야 한다.
- 중첩된 Containment를 사용할 때는 불필요한 중복 적용을 피해야 한다.
- 동적으로 변하는 콘텐츠에 적용할 때는 예상치 못한 동작이 발생할 수 있으므로 주의해야 한다.
will-change: 변화에 대비하기
기본 개념
will-change 속성은 요소의 변화를 미리 브라우저에게 알려주어 브라우저가 사전에 최적화를 준비할 수 있게 하는 속성이다. 이를 통해 변화가 실제로 발생했을 때 더 부드럽고 효율적인 처리가 가능해진다.
주요 값
- auto: 기본값, 최적화를 적용하지 않는다.
- scroll-position: 요소의 스크롤 위치가 변할 것임을 알린다.
- contents: 요소의 내용이 변할 것임을 알린다.
- 특정 CSS 속성: transform, opacity 등 직접 변화될 속성을 명시할 수 있다.
최적화 원리
will-change는 브라우저에 요소의 변화를 사전에 알려, 하드웨어 가속 등 최적화를 준비할 수 있게 한다. 이를 통해 실제 애니메이션이나 변화가 발생했을 때 더 부드럽고 효율적인 렌더링이 가능해진다.
사용하면 좋은 경우
- JS로 CSS를 제어하여 같은 요소를 계속해서 변형시키는 작업에 유용하다.
- 스크롤에 따라 요소의 transform이나 opacity가 변하는 경우에 효과적이다.
- 복잡한 애니메이션이나 전환 효과를 적용할 때 성능을 향상시킬 수 있다.
주의할 점
- 너무 많은 요소에 will-change를 적용하지 말아야 한다. 오히려 페이지 속도를 늦추거나 자원을 과도하게 소비할 수 있다.
- 변화가 일어나기 직전에만 적용하고, 변화 후에는 제거하는 것이 좋다.
- 페이지가 이미 잘 동작한다면 단지 조금 더 빠르게 하기 위해 will-change를 추가하는 것은 지양해야 한다.
// 권장되는 사용 패턴
const element = document.getElementById('element');
// 요소에 마우스를 올렸을 때 will-change 설정
element.addEventListener('mouseenter', function() {
this.style.willChange = 'transform';
});
// 애니메이션이 끝나면 will-change 제거
element.addEventListener('animationend', function() {
this.style.willChange = 'auto';
});
content-visibility: 화면 밖 콘텐츠 최적화
기본 개념
content-visibility는 브라우저가 화면에 보이지 않는 요소에 대해 레이아웃 계산, 스타일 적용, 페인팅 등의 렌더링 작업을 생략할 수 있게 한다. 이를 통해 초기 페이지 로드 시간을 크게 단축할 수 있다.
주요 값
- visible: 기본값
- hidden: 콘텐츠에 display: none과 유사하게 요소의 콘텐츠 렌더링을 건너뛴다. 사용자 에이전트 기능(검색, 포커스 등)에서도 접근 불가하다.
- auto: 요소가 화면 밖에 있으면 하위 항목이 렌더링되지 않고, 화면에 보이게 되면 자동으로 렌더링된다.
.section {
content-visibility: auto;
contain-intrinsic-size: 500px 400px;
}최적화 원리
content-visibility: auto를 적용하면, 브라우저는 화면에 보이지 않는 요소의 렌더링 작업(레이아웃, 스타일, 페인팅)을 생략한다. 이를 통해 초기 페이지 로드 시간이 크게 단축되며 사용자가 스크롤하여 해당 요소가 화면에 보이게 될 때 렌더링이 이루어진다.
사용하면 좋은 경우
- 긴 스크롤이 있는 페이지에서 초기 로드 속도를 향상시키고 싶을 때
- 화면에 보이지 않는 콘텐츠가 많은 웹 페이지에서(예: 블로그 포스트, 상품 목록 등)
- 모바일 기기와 같이 성능이 제한된 환경에서 렌더링 성능을 최적화하고 싶을 때
주의할 점
- contain-intrinsic-size를 함께 설정하는 것이 좋다. 이 속성은 렌더링되지 않은 콘텐츠의 예상 크기를 지정하여 스크롤바가 정확하게 표시되도록 한다.
- 사용자가 스크롤할 때 추가적인 렌더링 작업이 발생하므로, 매우 빠른 스크롤에서는 약간의 지연이 발생할 수 있다.
- 현재는 Chrome 85 이상에서만 완전히 지원되며, 다른 브라우저 지원은 제한적일 수 있어 폴백 고려가 필요하다.
이러한 속성들을 적절히 활용하면 웹 페이지의 성능을 크게 향상시킬 수 있지만, 각 속성의 특성과 주의사항을 이해하고 상황에 맞게 적용하는 것이 중요하다. 불필요하거나 과도한 사용은 오히려 성능 저하를 초래할 수 있다.
참고 자료
contain
1. https://betteryy.com/css-contain/
2. https://developer.mozilla.org/ko/docs/Web/CSS/contain
will-change
1. https://developer.mozilla.org/ko/docs/Web/CSS/will-change
2. https://wit.nts-corp.com/2017/06/05/4571
3. https://betteryy.com/css-containment-%EC%86%8D%EC%84%B1%EC%9C%BC%EB%A1%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0/
content-visibility
1. https://developer.mozilla.org/ko/docs/Web/CSS/content-visibility
2. https://wit.nts-corp.com/2020/09/11/6223
웹 페이지의 성능 최적화는 사용자 경험을 향상시키는 핵심 요소 중 하나다. 최근에 CSS 애니메이션을 작성하다 브라우저에 최적화 힌트를 줄 수 있는 CSS 속성들을 알게 되어 좀 더 조사해보았다. 이 글에서는 세 가지 CSS 속성(contain, will-change, content-visibility)에 대해 정리했다.
이 속성들이 어떻게 최적화에 영향을 주는지 좀 더 파악하기 위해서는 브라우저에서 렌더링이 어떤 순서로 발생하는지에 대해 이해가 필요한데, 아래 글을 읽어보는 것을 추천한다. 브라우저 렌더링과 CSS 애니메이션에 대해 이해하기 쉽게 작성되어있다.
[CSS] 왜 transform 애니메이션 성능이 좋을까? (with. GPU, Reflow)
1. Left 애니메이션은 왜 끊길까? transform, left 속성으로, 대각선 방향으로 움직이는 공 애니메이션을 만들어봤다. See the Pen Animate with Translate and left by KumJungMin (@kumjungmin) on CodePen. 보기에는 둘 다 잘
mong-blog.tistory.com
contain: 범위 제한하기
기본 개념
CSS contain 속성은 특정 요소와 그 하위 요소가 문서의 나머지 부분에 영향을 주지 않도록 제한하는 데 사용된다. 브라우저는 이 정보를 활용해 렌더링 계산을 전체 페이지가 아닌 일부에서만 수행할 수 있어 성능이 향상된다.
주요 값
contain 속성에는 아래의 값이 올 수 있다.
- size: 요소의 크기를 계산할 때 자식 요소의 크기를 고려하지 않도록 한다.
- layout: 요소의 레이아웃을 독립적으로 처리하여, 외부 요소에 영향을 주지 않게 한다.
- style: 스타일 계산이 다른 요소에 영향을 미치지 않도록 한다.
- paint: 요소의 페인트 작업이 독립적으로 처리되도록 한다.
- content: layout과 paint를 모두 포함하는 값
- strict: style을 제외한 size, layout, paint를 모두 포함하는 값
/* 키워드 값 */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;
/* 다중 값 */
contain: size paint;
contain: size layout paint;
/* 전역 값 */
contain: inherit;
contain: initial;
contain: unset;최적화 원리
contain 속성은 브라우저가 레이아웃 계산, 스타일 계산, 페인트 작업을 독립적으로 처리할 수 있게 한다. 이를 통해 특정 요소의 변경이 전체 페이지에 영향을 미치지 않도록 하여 불필요한 재계산과 재렌더링을 방지한다.
사용하면 좋은 경우
- 복잡한 레이아웃이나 애니메이션이 있는 페이지에서 성능을 개선할 때
- 독립적인 위젯이나 컴포넌트가 많은 페이지에서
- 다른 부분에 영향을 주지 않으나 콘텐츠가 자주 변경되는 부분을 격리시키고 싶을 때
주의할 점
- contain: size를 사용할 경우, 요소의 크기를 명시적으로 지정해야 한다. 그렇지 않으면 레이아웃 오류가 발생할 수 있다.
- 일부 구형 브라우저에서는 지원되지 않을 수 있으므로 브라우저 호환성을 확인해야 한다.
- 중첩된 Containment를 사용할 때는 불필요한 중복 적용을 피해야 한다.
- 동적으로 변하는 콘텐츠에 적용할 때는 예상치 못한 동작이 발생할 수 있으므로 주의해야 한다.
will-change: 변화에 대비하기
기본 개념
will-change 속성은 요소의 변화를 미리 브라우저에게 알려주어 브라우저가 사전에 최적화를 준비할 수 있게 하는 속성이다. 이를 통해 변화가 실제로 발생했을 때 더 부드럽고 효율적인 처리가 가능해진다.
주요 값
- auto: 기본값, 최적화를 적용하지 않는다.
- scroll-position: 요소의 스크롤 위치가 변할 것임을 알린다.
- contents: 요소의 내용이 변할 것임을 알린다.
- 특정 CSS 속성: transform, opacity 등 직접 변화될 속성을 명시할 수 있다.
최적화 원리
will-change는 브라우저에 요소의 변화를 사전에 알려, 하드웨어 가속 등 최적화를 준비할 수 있게 한다. 이를 통해 실제 애니메이션이나 변화가 발생했을 때 더 부드럽고 효율적인 렌더링이 가능해진다.
사용하면 좋은 경우
- JS로 CSS를 제어하여 같은 요소를 계속해서 변형시키는 작업에 유용하다.
- 스크롤에 따라 요소의 transform이나 opacity가 변하는 경우에 효과적이다.
- 복잡한 애니메이션이나 전환 효과를 적용할 때 성능을 향상시킬 수 있다.
주의할 점
- 너무 많은 요소에 will-change를 적용하지 말아야 한다. 오히려 페이지 속도를 늦추거나 자원을 과도하게 소비할 수 있다.
- 변화가 일어나기 직전에만 적용하고, 변화 후에는 제거하는 것이 좋다.
- 페이지가 이미 잘 동작한다면 단지 조금 더 빠르게 하기 위해 will-change를 추가하는 것은 지양해야 한다.
// 권장되는 사용 패턴
const element = document.getElementById('element');
// 요소에 마우스를 올렸을 때 will-change 설정
element.addEventListener('mouseenter', function() {
this.style.willChange = 'transform';
});
// 애니메이션이 끝나면 will-change 제거
element.addEventListener('animationend', function() {
this.style.willChange = 'auto';
});
content-visibility: 화면 밖 콘텐츠 최적화
기본 개념
content-visibility는 브라우저가 화면에 보이지 않는 요소에 대해 레이아웃 계산, 스타일 적용, 페인팅 등의 렌더링 작업을 생략할 수 있게 한다. 이를 통해 초기 페이지 로드 시간을 크게 단축할 수 있다.
주요 값
- visible: 기본값
- hidden: 콘텐츠에 display: none과 유사하게 요소의 콘텐츠 렌더링을 건너뛴다. 사용자 에이전트 기능(검색, 포커스 등)에서도 접근 불가하다.
- auto: 요소가 화면 밖에 있으면 하위 항목이 렌더링되지 않고, 화면에 보이게 되면 자동으로 렌더링된다.
.section {
content-visibility: auto;
contain-intrinsic-size: 500px 400px;
}최적화 원리
content-visibility: auto를 적용하면, 브라우저는 화면에 보이지 않는 요소의 렌더링 작업(레이아웃, 스타일, 페인팅)을 생략한다. 이를 통해 초기 페이지 로드 시간이 크게 단축되며 사용자가 스크롤하여 해당 요소가 화면에 보이게 될 때 렌더링이 이루어진다.
사용하면 좋은 경우
- 긴 스크롤이 있는 페이지에서 초기 로드 속도를 향상시키고 싶을 때
- 화면에 보이지 않는 콘텐츠가 많은 웹 페이지에서(예: 블로그 포스트, 상품 목록 등)
- 모바일 기기와 같이 성능이 제한된 환경에서 렌더링 성능을 최적화하고 싶을 때
주의할 점
- contain-intrinsic-size를 함께 설정하는 것이 좋다. 이 속성은 렌더링되지 않은 콘텐츠의 예상 크기를 지정하여 스크롤바가 정확하게 표시되도록 한다.
- 사용자가 스크롤할 때 추가적인 렌더링 작업이 발생하므로, 매우 빠른 스크롤에서는 약간의 지연이 발생할 수 있다.
- 현재는 Chrome 85 이상에서만 완전히 지원되며, 다른 브라우저 지원은 제한적일 수 있어 폴백 고려가 필요하다.
이러한 속성들을 적절히 활용하면 웹 페이지의 성능을 크게 향상시킬 수 있지만, 각 속성의 특성과 주의사항을 이해하고 상황에 맞게 적용하는 것이 중요하다. 불필요하거나 과도한 사용은 오히려 성능 저하를 초래할 수 있다.
참고 자료
contain
1. https://betteryy.com/css-contain/
2. https://developer.mozilla.org/ko/docs/Web/CSS/contain
will-change
1. https://developer.mozilla.org/ko/docs/Web/CSS/will-change
2. https://wit.nts-corp.com/2017/06/05/4571
3. https://betteryy.com/css-containment-%EC%86%8D%EC%84%B1%EC%9C%BC%EB%A1%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0/
content-visibility
1. https://developer.mozilla.org/ko/docs/Web/CSS/content-visibility
2. https://wit.nts-corp.com/2020/09/11/6223
