성능 측정: Lighthouse와 핵심 웹 지표

Lighthouse는 웹 성능을 측정하는 표준 도구입니다. Chrome DevTools의 Lighthouse 탭이나 CLI를 통해 실행할 수 있습니다(npx lighthouse https://yoursite.com). Islands Architecture를 평가할 때는 마이그레이션 전후에 대표적인 페이지에서 Lighthouse를 실행하여 향상 정도를 객관적으로 수치화하십시오.

LCP는 화면에 표시되는 가장 큰 콘텐츠 요소의 렌더링이 완료되는 시점을 측정합니다. Islands Architecture에서는 서버가 완전히 렌더링된 HTML을 즉시 보내므로 LCP가 향상됩니다. 브라우저가 JavaScript로 콘텐츠를 렌더링할 때까지 기다릴 필요가 없기 때문입니다. LCP가 될 영웅 이미지나 제목은 최초 HTML 응답에서 바로 그려집니다.

리액트 SPA에서는 브라우저가 LCP 요소를 렌더링하기 전에 JavaScript를 다운로드하고 실행해야 하므로 LCP가 지연되는 경우가 많습니다. Islands Architecture에서는 LCP 콘텐츠가 최초 HTML에 포함되므로 JavaScript 실행이 LCP를 차단하지 않습니다. 이는 측정 가능한 가장 중요한 이점 중 하나입니다.

총 차단 시간은 50ms보다 긴 JavaScript 작업으로 기본 스레드가 차단되는 시간을 측정합니다. 대규모 리액트 SPA를 하이드레이션하면 TBT가 수백 밀리초에 이를 수 있습니다. 아일랜드 아키텍처에서는 실행되는 JavaScript의 양이 페이지 크기가 아니라 아일랜드 수에 비례하므로 TBT가 크게 줄어듭니다.

누적 레이아웃 이동은 시각적 안정성, 즉 페이지가 로드될 때 요소가 이리저리 움직이는 현상을 측정합니다. JavaScript로 렌더링되는 콘텐츠는 리액트가 렌더링하면서 크기를 변경할 때 레이아웃 이동을 일으킬 수 있습니다. 아일랜드 아키텍처의 서버 렌더링 HTML은 초기 레이아웃이 하이드레이션 시 변경되지 않는 정적 HTML에서 오므로 하이드레이션과 관련된 레이아웃 이동을 방지합니다.

첫 입력 지연(현재는 다음 페인트까지의 상호작용을 나타내는 INP로 대체됨)은 페이지가 사용자 상호작용에 얼마나 빠르게 응답하는지 측정합니다. 아일랜드 아키텍처는 각 아일랜드에 작고 특정 목적에 집중된 JavaScript 번들이 있으므로 INP를 개선합니다. 큰 리액트 트리를 통해 작업을 예약할 필요가 없으므로 아일랜드 내부의 상호작용은 빠르게 실행됩니다.

블로그 페이지를 일반적으로 비교하면, 전체 리액트 SPA는 모바일 라이트하우스에서 45~65점(TBT: 800ms, LCP: 3.2초)을 받을 수 있습니다. 같은 콘텐츠를 리액트 아일랜드 하나를 사용하는 아스트로 사이트로 제공하면 90~98점(TBT: 80ms, LCP: 1.1초)을 받을 수 있습니다. 상호작용이 제한된 콘텐츠 중심 페이지에서 향상 폭이 가장 큽니다.

아일랜드 아키텍처는 대시보드, 코드 편집기, 공동 작업 도구처럼 상호작용이 매우 많은 애플리케이션에는 적합하지 않습니다. 이러한 앱에는 상태를 계속 공유하고 함께 다시 렌더링되는 구성 요소가 있습니다. 아일랜드 간 통신의 오버헤드가 성능 향상을 상쇄하고 아키텍처 복잡성까지 더하게 됩니다.

아일랜드 아키텍처는 상호작용이 곳곳에 배치된 콘텐츠 중심 사이트에서 뛰어난 성능을 발휘합니다. 예를 들어 블로그(콘텐츠를 읽고 가끔 좋아요를 누르거나 댓글을 작성), 문서 사이트(문서를 읽고 가끔 검색하거나 코드 복사 버튼 사용), 랜딩 페이지(대부분 정적이며 뉴스레터 양식만 아일랜드로 구성), 전자상거래 상품 페이지(이미지와 설명은 정적이며 장바구니 추가 기능만 아일랜드로 구성)가 있습니다.

구글은 코어 웹 바이털(LCP, INP, CLS)을 순위 신호로 사용합니다. 아일랜드 아키텍처로 이러한 지표를 개선하면 검색 순위에 직접적인 이점이 생깁니다. 아일랜드 아키텍처를 도입해 모바일 라이트하우스 점수를 55점에서 92점으로 높인 사이트는 사용자 경험과 검색 엔진 최적화 효과를 동시에 얻습니다.

마케팅 및 문서 사이트를 Next.js 기반 리액트 SPA에서 아스트로로 이전하는 팀들은 일관된 패턴을 보고합니다. JavaScript 전송량이 70~90% 감소하고, 모바일 성능 점수가 20~40점 상승하며, 요청마다 서버 렌더링 오버헤드가 발생하지 않은 상태로 정적 파일을 CDN에서 제공할 수 있어 서버 호스팅 비용이 감소합니다.

아일랜드 아키텍처는 모든 코어 웹 바이털을 개선합니다. LCP는 서버 렌더링 HTML의 이점을 얻고, JavaScript의 양이 상호작용 정도에 비례하므로 TBT가 감소하며, 안정적인 서버 렌더링 레이아웃으로 CLS가 줄어들고, 작고 집중된 아일랜드 번들 덕분에 INP가 개선됩니다. 콘텐츠 중심 페이지의 라이트하우스 점수도 크게 향상됩니다. 이 패턴은 상호작용이 매우 많은 앱에는 적합하지 않지만 블로그, 문서 사이트, 랜딩 페이지, 전자상거래 사이트에 특히 적합합니다.