AI 시대의 웹 성능 엔지니어링 (Korean Edition)

제9장. 타사 스크립트로딩

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

분석 플랫폼부터 광고 네트워크, 소셜 미디어 위젯부터 고객 지원 챗봇에 이르기까지 제3자 스크립트는 현대 웹사이트에 필수적이지만, 그에 따른 비용이 따릅니다. 제8장에서 제3자 스크립트가 무엇이며 왜 중요한지 다루었다면, 이 장에서는 이를 효율적으로 로드하는 방법에 초점을 맞춥니다. 핵심은 순차적 로딩입니다: 우선순위 부여(먼저 로드할 요소), 지연 로딩(기다릴 수 있는 요소), 사용자 컨텍스트 기반 조건부 로딩, 클릭 시 로딩 패턴 구현(실제로 필요할 때까지 무거운 리소스 지연) 등이 그것입니다.

타사 스크립트를 효과적으로 로드하려면 기능성과 성능 사이의 균형을 맞추어야 합니다. 너무 일찍 또는 무분별하게 로드하면 핵심 콘텐츠를 차단하여 초기 페이지 렌더링 속도를 늦추고 사용자를 불편하게 할 수 있습니다. 너무 늦게 로드하면 중요한 분석 데이터를 수집하지 못하거나 사용자가 기대하는 기능을 지연시킬 수 있습니다. 이 장에서 다루는 기법들—async 및 defer 속성 사용, 파사드를 통한 지연 로딩 구현 등—은 타사 콘텐츠가 페이지에 표시되는 시점과 방식을 세밀하게 제어할 수 있게 합니다. 이 장을 마치면 사이트에 필요한 기능을 유지하면서 성능 영향을 최소화하기 위해 타사 로딩을 순차화하는 방법을 이해하게 될 것입니다.

순서 지정 및 우선순위 설정

외부 스크립트 최적화의 핵심은 페이지의 핵심 콘텐츠에 비해 로드 및 실행 시점을 제어하는 것입니다. AI 생성 HTML은 로드 시점을 고려하지 않고 단순히 외부 <SCRIPT> 태그를 포함하는 경우가 많습니다. 이로 인해 브라우저가 부적절한 시점에 스크립트를 로드하고 실행하여 다른 중요한 작업을 지연시킬 수 있습니다. 외부 코드가 초기 페이지 렌더링을 방해하지 않도록 순서를 수동으로 제어해야 합니다.

중요 스크립트 식별

먼저, 에서 설명하듯 외부 스크립트를 핵심과 비핵심으로 분류하세요. 핵심 외부 스크립트는 페이지 기능이나 렌더링에 절대적으로 필요한 요소입니다. 신중하게 처리하되 조기에 로드해야 합니다. 예를 들어, UI 일부(외부 JavaScript API를 사용하는 지도 컴포넌트 등)를 렌더링하는 데 외부 라이브러리를 사용한다면, 이는 화면 상단 콘텐츠 표시의 핵심이 될 수 있습니다.

비중요 제3자 스크립트는 향상 기능이나 추적 기능을 제공하지만 페이지 초기 작동에는 필요하지 않습니다. 여기에는 분석, 광고, 히트맵, 소셜 위젯 등이 포함됩니다. 이러한 스크립트는 메인 인터페이스가 활성화된 후나 조금 늦게 로드되어도 사용자 경험에는 대체로 문제가 없습니다. 거의 항상 메인 콘텐츠가 로드되거나 상호작용 가능해질 때까지 지연되거나 연기되어야 합니다.

잘 최적화된 사이트는 주요 콘텐츠를 제3자 추가 요소보다 우선시합니다. Web.dev에 기고한 바와 같이, 모범 사례는 "주요 콘텐츠가 다른 보조 콘텐츠보다 빠르게 로드되어야 한다"는 ...