Above-the-fold (ATF) 컴포넌트는 웹 페이지를 처음 로드했을 때, 스크롤 없이 사용자의 화면에 바로 보이는 영역에 위치하는 UI 컴포넌트들을 의미합니다. 신문에서 접지선(fold) 위에 놓이는 주요 기사와 광고에 비유해 "접지선 위"라는 용어를 사용합니다.

→ 쉽게 이해하기 위해, static navbar라고 생각하셔도 좋습니다.

왜 중요한가요?

ATF 컴포넌트는 사용자가 페이지를 처음 접하는 순간의 경험을 결정하므로 매우 중요합니다.

1. 초기 로딩 성능: 사용자가 웹사이트의 콘텐츠를 빠르게 볼 수 있도록 ATF 컴포넌트들은 가장 먼저 렌더링되어야 합니다. 그렇지 않으면 사용자는 빈 화면을 보게 되며, 이는 이탈률 증가로 이어질 수 있습니다.
2. 사용자 경험(UX): ATF 영역에 중요한 콘텐츠나 핵심 기능(예: 검색 바, 주요 CTA 버튼)을 배치하여 사용자에게 즉각적인 가치를 제공해야 합니다.
3. SEO (검색 엔진 최적화): Google과 같은 검색 엔진은 페이지 로딩 속도와 사용자 경험을 중요한 순위 결정 요소로 삼습니다. 특히 **Largest Contentful Paint (LCP)**와 같은 웹 바이탈 지표는 ATF 영역의 렌더링 속도를 직접 측정합니다. LCP는 화면에 보이는 가장 큰 콘텐츠 요소가 렌더링되기까지 걸리는 시간을 의미하며, 이는 ATF의 최적화와 밀접하게 관련됩니다.

최적화 방법

ATF 컴포넌트의 로딩을 최적화하기 위한 주요 전략은 다음과 같습니다.

• 불필요한 리소스 지연: ATF 영역에 필요하지 않은 CSS나 JavaScript는 로딩을 지연시키거나 비동기적으로 처리해야 합니다. 이를 통해 브라우저가 ATF 콘텐츠를 먼저 렌더링할 수 있도록 돕습니다.

• 인라인 CSS: 중요한 ATF 컴포넌트의 스타일은 HTML 파일 내에 <style> 태그로 인라인 처리하여 외부 CSS 파일의 로딩을 기다리지 않도록 합니다.

• 이미지 최적화: ATF 영역의 이미지는 용량을 최소화하고, <img loading="lazy"> 속성을 사용하지 않아야 합니다. (lazy loading은 스크롤이 필요한 Bellow-the-fold(BTF) 콘텐츠에 적합합니다). 또한, srcset을 사용하여 사용자의 화면 크기에 맞는 최적의 이미지를 제공해야 합니다.

• 서버 사이드 렌더링 (SSR) 또는 정적 사이트 생성 (SSG): 서버에서 HTML을 미리 생성하여 클라이언트로 전송하면, 브라우저가 자바스크립트를 실행하기 전에 화면에 콘텐츠를 표시할 수 있어 초기 로딩 속도를 크게 개선할 수 있습니다.

• Origin text