웹 페이지의 로딩 성능을 최적화하는 기법, 페이지의 전체 콘텐츠를 한 번에 로딩하는 대신 중요도에 따라 콘텐츠를 단계적으로 로딩하는 방식
사용자는 핵심 콘텐츠를 먼저 볼 수 있게 되어 체감 로딩 시간이 단축됨
주요 기법 - 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)을 혼합한 하이브리드 렌더링, 스트리밍 SSR, 점진적 하이드레이션 등
이러한 PPR 기법들은 First Contentful Paint(FCP)와 Time To Interactive(TTI)같은 성능 지표 개선하는데 도움 줌
Progressive Partial Rendering, Lazy Loading의 차이점?
Lazy Loading은 주로 뷰포트 밖에 있는 이미지나 컴포넌트와 같은 특정 리소스를 필요한 시점에 로드하는 기술
반면, Progressive Partial Rendering은 더 넓은 개념, 페이지의 핵심 콘텐츠를 먼저 렌더링하고 우선순위가 낮은 부분은 점진적으로 렌더링하는 전체적인 접근 방식
Lazy Loading은 Progressive Partial Rendering을 구현하는 기법 중 하나
Progressive Partial Rendering이 SEO에 미치는 영향
핵심 콘텐츠가 더 빨리 로드되기 때문에 검색 엔진 크롤러가 중요한 콘텐츠를 더 효율적으로 색인화할 수 있음
특히 SSR이나 하이브리드 접근 방식을 사용할 경우, HTML이 미리 렌더링되어 제공되므로 검색 엔진이 JS를 실행하지 않고도 콘텐츠를 이해할 수 있어 유리
또한 Core Web Vitals 성능 지표가 SEO 순위에 영향 미치는데, Progressive Partial Rendering은 LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift) 같은 지표 개선하는데 도움 됨
