회사 소개, 서비스 안내, 후기, 오시는 길까지 한 페이지에 길게 이어지는 사이트가 많습니다. 그런데 손님이 처음 보는 건 화면 한 장 분량뿐인데, 브라우저는 페이지를 여는 순간 저 아래 오시는 길 지도 섹션까지 전부 배치를 계산하고 그림을 그려 놓습니다. 안 보이는 곳에 들인 그 수고가 고스란히 첫 화면이 뜨는 시간을 잡아먹습니다.
지금까지: 안 보여도 일단 다 그렸다
브라우저는 원래 성실합니다. HTML에 있는 요소라면 화면 밖이든 안이든 스타일을 계산하고 자리를 잡고 그려 둡니다. 페이지가 길수록, 섹션이 많을수록 이 '보이지 않는 노동'이 쌓입니다.
- 손님이 안 내려볼 수도 있는 하단 섹션까지 먼저 계산하고
- 그만큼 첫 화면 표시와 클릭 반응이 늦어지고
- 개발자는 이를 피하려고 '스크롤하면 그때 붙이는' 지연 로딩 코드를 손수 짰습니다
사진에는 loading="lazy"라는 지연 장치가 생긴 지 오래지만, 레이아웃 계산과 그리기 자체를 미루는 표준 장치는 없었습니다.
이제부터: '여기는 나중에 그려도 된다'고 알려 준다
content-visibility: auto는 브라우저에게 딱 그 말을 전하는 CSS 한 줄입니다. 이 속성이 붙은 섹션이 화면 밖에 있으면 브라우저는 안쪽 내용의 계산과 그리기를 통째로 건너뛰고, 스크롤이 가까워지면 그때 그립니다. 자바스크립트도, 스크롤 감지 코드도 없습니다. 긴 페이지일수록 효과가 커서, 섹션이 수십 개인 페이지라면 첫 렌더링 작업량이 몇 분의 일로 줄어들기도 합니다.
한 가지 궁합: 자리는 미리 잡아 둔다
안 그린 섹션은 높이를 모르니 스크롤바가 들쭉날쭉해질 수 있습니다. 그래서 contain-intrinsic-size로 '이 섹션은 대략 이만한 크기다'라는 예약석을 함께 적어 둡니다. 브라우저는 그 크기만큼 자리를 비워 두었다가 실제로 그릴 때 정확한 크기로 바꿉니다. 두 줄이 한 세트라고 기억하면 됩니다.
어디에 쓰면 좋은가
크롬·엣지는 물론 파이어폭스와 사파리도 2024년에 지원을 마쳐 이제 주요 브라우저에서 안심하고 쓸 수 있고, 지원하지 않는 옛 브라우저에서는 그냥 무시되니 사이트가 깨질 걱정도 없습니다. 원페이지형 소개 사이트의 하단 섹션들, 후기가 수백 개 쌓인 목록, 긴 요금표나 FAQ처럼 '아래로 길게 이어지는 페이지'가 가장 좋은 자리입니다. 반대로 첫 화면 안에 보이는 요소에는 붙일 이유가 없습니다.
빠른 사이트는 큰 공사가 아니라 이런 한 줄에서 갈린다
속도 개선이라고 하면 서버 교체나 전면 개편 같은 큰 공사를 떠올리기 쉽지만, 실제 현장에서는 이런 표준 속성 하나를 제자리에 놓는 일이 체감을 더 크게 바꾸곤 합니다. CYAN은 사이트를 만들 때 이렇게 브라우저가 이미 준비해 둔 지름길을 찾아 쓰는 것부터 시작합니다. 손님의 반 박자를 아끼는 일이 곧 매출을 지키는 일이니까요.
