content-visibility로 웹 성능 끌어올리기 🚀

긴 페이지를 최적화하는 CSS의 마법 ✨

TL;DR 한 줄 요약 📌

content-visibility: auto를 사용하면 화면 밖의 콘텐츠 렌더링을 스킵해서 페이지 성능을 개선할 수 있어요!

소개 👋

웹 페이지가 길어질수록 렌더링 성능이 떨어지는 건 어쩔 수 없는 일이었죠. 하지만 이제는 content-visibility 속성으로 이 문제를 해결할 수 있습니다!

content-visibility의 3가지 값 🎯

1. visible (기본값) - 일반적인 렌더링
2. auto - 화면에 보이지 않는 콘텐츠는 렌더링 스킵
3. hidden - display: none과 비슷하지만 렌더링 상태를 보존

contain-intrinsic-size가 뭔가요? 🤔

contain-intrinsic-size는 요소의 "예상 크기"를 브라우저에게 알려주는 속성이에요. 이게 왜 필요할까요?

문제 상황 😱

/* 이렇게만 하면 스크롤이 막 움직여요! */
section {
  content-visibility: auto;
}

content-visibility: auto만 사용하면 화면 밖 콘텐츠가 렌더링되지 않아서 높이가 0이 됩니다. 그래서:

1. 스크롤바가 막 움직이고 😵‍💫
2. 사용자가 스크롤할 때 레이아웃이 막 튀어요 😫

해결책 ✨

section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px; /* 여기가 포인트! */
}

contain-intrinsic-size로 "이 요소는 대충 500px 높이가 될 거야~"라고 브라우저에게 알려주면:

1. 스크롤바가 안정적 😌
2. 레이아웃 시프트 없음 👍
3. 실제 렌더링 되면 자동으로 실제 크기로 조정 🎯

실전 사용법 💪

1. 긴 페이지 최적화하기

section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

contain-intrinsic-size를 함께 사용하면 스크롤 바가 움직이지 않아요!

2. 토글 기능 구현하기

.hidden > p {
  content-visibility: hidden;
  contain-intrinsic-size: 0 1.1em;
}

display: none 대신 사용하면 다시 보여줄 때 렌더링이 더 빨라요 🏃‍♂️

접근성은? ♿️

• 화면에 보이지 않아도 DOM과 접근성 트리에는 존재
• 스크린 리더가 읽을 수 있음
• 완전히 숨기려면 aria-hidden="true" 필요

브라우저 지원 🌐

• Chrome ✅
• Edge ✅
• Firefox ❌ (아직...)
• Safari ❌ (아직...)

주의사항 ⚠️

1. 레이아웃 시프트 방지를 위해 contain-intrinsic-size 설정 필수
2. 브라우저 지원 확인 필요
3. 접근성 고려 필요

참고자료 📚

• MDN - content-visibility