Addy Osmani

서드 파티 리소스 (예: 삽입 및 스크립트)는 현재 웹 전반에서 널리 사용됩니다. 소셜 미디어, 동영상, 분석, 실시간 채팅, 광고, A/B 테스트, 맞춤설정 등을 삽입할 수 있는 즉시 사용 가능한 솔루션을 제공합니다. 서드 파티 삽입은 사이트 소유자가 핵심 역량에 집중하는 동시에 표준적이면서도 중요한 기능을 외부 제공업체에 오프로드할 수 있도록 하는 현대 웹사이트에 필수적인 부분입니다.

웹페이지에서 퍼스트 파티와 서드 파티가 모두 조화롭게 작동하면 페이지에서 우수한 사용자 환경을 제공할 수 있습니다. 하지만 엔지니어링팀과 비즈니스팀 모두의 상당한 노력이 필요하며 종종 간과되어 웹페이지의 성능이 저하되고 Core Web Vitals와 같은 사용자 중심 측정항목에 부정적인 영향을 미칩니다. 이는 양 당사자에게 해가 되며 비즈니스에서 기회를 놓치게 만듭니다. 더 나은 방법이 있을까요?

Google은 서드 파티 스크립트와 리소스가 브라우저에서 이를 사용하는 웹사이트의 성능이나 사용자 환경에 미치는 영향이 최소화된 상태에서 의도한 비즈니스 가치를 제공하는 웹의 미래를 꿈꾸고 있습니다. 이렇게 하면 사용자가 더 빠르게 페이지를 로드할 수 있습니다.

지난 1년 동안 Google은 사이트 소유자의 비즈니스 가치를 저하시키지 않으면서 서드 파티 스크립트의 유해한 영향으로부터 사용자 경험을 보호할 수 있는 다양한 가능성을 고려하고 논의하고 실험해 왔습니다.

이 게시물을 통해 YouTube의 실험에 대한 정보를 공유하고자 합니다. 이번 발표가 사용자 에이전트, 비즈니스, 서드 파티 제공업체 간의 투명성과 가시성을 높이고 더 빠른 웹을 향한 길을 여는 시작이 되기를 바랍니다.

서드 파티 자세히 알아보기

서드 파티는 사이트 외부의 제공업체에서 제공하는 리소스입니다. 사이트 소유자가 직접 관리하지는 않지만 소유자의 승인을 받아 표시됩니다. 서드 파티 리소스는 다음과 같습니다.

• 기본 사이트 출처와 다른 공유 및 공개 출처에 호스팅됩니다.
• 개인 사이트 소유자가 작성하거나 영향을 주지 않았습니다.
• 다양한 사이트에서 널리 사용됩니다.

서드 파티는 광고를 통한 수익 창출부터 더 나은 마케팅 기회 제공(소셜 미디어 삽입)에 이르기까지 다양한 비즈니스 목표를 달성하는 데 도움을 줍니다. 일반적인 서드 파티 카테고리는 다음과 같습니다.

출처: 카테고리별 서드 파티

이러한 서드 파티 스크립트와 라이브러리를 사용하면 웹 개발자가 기존의 방법을 재발명하는 대신 검증된 솔루션을 활용하여 표준 기능을 구현할 수 있습니다. 따라서 서드 파티는 개발 시간을 단축하고 비즈니스가 제품을 더 빠르게 출시하거나 업그레이드할 수 있도록 지원합니다. 따라서 데스크톱과 모바일에서 모든 웹사이트의 94% 이상이 서드 파티를 사용하는 것은 놀라운 일이 아닙니다.

서드 파티는 성능에 어떤 영향을 미치나요?

서드 파티 개발자는 제공하는 특정 기능에 대한 주제 전문가인 것이 이상적입니다. 대부분의 인기 있는 서드 파티는 여러 번 반복되었으며, 코드는 자체 비즈니스 목표에 맞게 최적화될 수 있습니다. 여기에는 서드 파티를 사용하는 페이지의 실적이 포함되기도 하고 포함되지 않을 수도 있습니다. 하지만 가장 최적화된 서드 파티도 실적에 영향을 미칩니다. 이러한 영향이 발생하는 주요 이유는 다음과 같습니다.

1. 크기 및 스크립트 실행 비용: 서드 파티는 종종 <script> 또는 <iframe> 요소를 페이지에 삽입하는 것만으로 상당한 기능을 제공하는 것을 목표로 합니다. 그런 다음 이러한 요소는 크기가 크고 다운로드 및 실행하는 데 시간이 더 오래 걸리는 스크립트와 리소스를 가져옵니다. JavaScript가 너무 많으면 기본 스레드가 더 오래 사용 중이 되어 렌더링이 차단되고 사용자 상호작용이 지연됩니다. 일부 주요 서드 파티는 분석된 사이트의 50% 이상에서 기본 스레드를 42ms~1.6초 동안 차단하는 것으로 알려져 있습니다. 차단된 기본 스레드로 인해 사이트의 성능 점수에 영향을 미치는 측정항목 중 하나인 총 차단 시간 (TBT)이 길어집니다. 또한 사용자 상호작용에 대한 응답이 지연되고 웹사이트의 응답성을 측정하는 데 사용되는 다음 페인트에 대한 상호작용 (INP) 측정항목이 저하됩니다. 따라서 스크립트 실행 비용은 성능에 큰 영향을 미칩니다.

2. 수: 웹사이트는 평균적으로 모바일과 웹에서 약 21개의 서드 파티를 사용합니다. 서드 파티 태그는 기술/개발팀에서 직접 관리하지 않는 태그 관리 도구에 의해 추가되는 경우가 많습니다. 필수가 아닌 태그는 검토 절차 없이 다른 팀에서 추가할 수 있으며 삭제되지 않습니다. 이는 사용자 환경, 페이지 크기 또는 CPU 사용량에 상당한 영향을 미칠 수 있습니다. 거버넌스 프로세스를 수립하면 이러한 상황을 해결하고 개발자가 각 제공업체의 영향을 감사할 수 있습니다. 개발자가 특정 기능을 제공하는 모든 서드 파티의 실적 영향, 이점, 장단점을 비교할 수 있는 준비된 데이터를 사용할 수 있으면 좋습니다. 팀이 직면하는 또 다른 문제는 많은 사이트에서 서드 파티 태그가 프로덕션에서만 실행되고 개발 환경에서는 실행되지 않아 개발자가 태그를 테스트하기가 더 어렵다는 점입니다.

3. 네트워크: 서드 파티는 서로 다른 출처에 호스팅되므로 브라우저는 서드 파티에서 콘텐츠를 다운로드하기 위해 더 많은 연결을 설정해야 합니다. 여러 연결이 우선순위에 따라 다운로드를 조정할 수 없어 네트워크 경합이 발생합니다. 적절한 최적화가 고려되지 않으면 페이지 로드가 더 지연될 수 있습니다.

4. 시퀀싱: 서드 파티가 기본 스레드를 차단하고 더 중요한 리소스의 대역폭을 놓고 경쟁할 수 있습니다. 하지만 경우에 따라 서드 파티가 페이지 렌더링에 필요한 중요한 리소스일 수 있습니다. 웹사이트에서 여러 서드 파티를 사용하는 경우 퍼스트 파티 및 서드 파티 리소스의 최적 시퀀싱이 필요합니다. 웹 개발자는 시퀀싱을 최적화하는 데 사용할 수 있는 다양한 옵션을 알고 있어야 합니다.

따라서 서드 파티는 Core Web Vitals의 일부 또는 전체 구성요소에 영향을 줄 수 있습니다. 대부분의 서드 파티는 최대 콘텐츠 렌더링 시간 (LCP) 및 최초 입력 반응 시간 (FID)에 부정적인 영향을 미칩니다. YouTube 삽입이 모바일 웹사이트의 10% 에서 4.5초 동안, 조사된 웹사이트의 50% 에서 1.6초 이상 기본 스레드를 차단합니다. 느린 연결 상태에서 이러한 스크립트가 20개 있는 페이지를 발견한 사용자의 불편함을 상상해 보세요. thirdpartyweb.today의 다음 시각화는 현재 실적에 가장 큰 영향을 미치는 서드 파티를 보여줍니다.

"상위 400만 개 사이트 중 약 2,700개의 출처가 전체 스크립트 실행 시간의 약 57% 를 차지하며, 상위 50개 항목이 이미 약 47%를 차지합니다." - third-party-web

빠르게 렌더링되고 적절한 시간 내에 상호작용이 가능한 페이지는 핵심 웹 바이탈로 측정한 우수한 사용자 환경에 필수적입니다. 우수한 UX는 종종 웹사이트의 비즈니스 성과로 이어지며, 이는 사용 중인 서드 파티의 비즈니스에도 도움이 될 수 있습니다. 서드 파티의 영향을 줄이기 위해 협력하면 공급망의 모든 참여자가 혜택을 누릴 수 있습니다.

Google은 Google 태그 관리자, YouTube 삽입, ReCaptcha 등 여러 가지 일반적으로 사용되는 서드 파티 스크립트를 판매하고 있음을 알고 있습니다. Google은 Google의 여러 스크립트가 Core Web Vitals에 미치는 성능 영향이 가벼울 수 있음을 알고 있으며, 가능한 경우 이러한 영향을 개선할 방법을 모색하기 위해 노력하고 있습니다.

Chrome은 어떻게 도움이 될 수 있나요?

서드 파티 리소스의 실적이 좋지 않은 것은 개발자에게 항상 어려운 문제이며, 이를 해결하려면 기본 생태계 역학을 단계적으로 변화시켜야 합니다. Chrome은 이 공간을 탐색하여 다음과 같은 결과를 얻고자 합니다.

1. 사용자 환경 또는 비즈니스 결과를 저하시키지 않으면서 웹에서 서드 파티 리소스를 로드하는 더 나은 방법을 찾습니다.

   Google은 파트너, 비즈니스, 서드 파티, 개발자와 협력하지 않으면 이 작업을 진행할 수 없다는 것을 잘 알고 있습니다. Google은 공개 설명서와 사양을 통해 가능성을 논의하고 아이디어를 교환할 수 있는 개방적인 공간을 만들고자 합니다. 개발자는 이러한 여러 제안의 영향을 테스트하고 의견을 제공할 시간을 갖게 됩니다.

2. 서드 파티 스크립트 사용자가 도구 및 현장에서 비용을 더 잘 분류하고, 명확하고 잘 정리된 사용 경로를 제공하며, 작성 중에 더 나은 인센티브를 제공하여 기본적으로 최적화되도록 할 수 있습니다.

   Google은 서드 파티의 성능 영향을 줄이기 위해 사용자 에이전트, 프레임워크, 서드 파티 스크립트와 같은 모든 레이어를 개선하고자 합니다. 또한 사이트 소유자가 삽입된 각 스크립트와 관련된 권장사항을 적용하는 데 도움이 되는 충분한 통계를 제공하고자 합니다(해당하는 경우 더 빠른 대안 포함).

제안된 접근 방식

이러한 결과를 달성하기 위한 세 가지 접근 방식을 제안합니다.

1. **개발자가 RUM 및 Chrome의 개발자 도구를 통해 서드 파티별 영향에 대해 더 심층적인 기여 분석을 할 수 있도록 지원합니다.**

   RUM은 웹 성능 모니터링 API를 통해 사용할 수 있는 실제 사용자 측정항목 데이터 (필드 데이터라고도 함)를 의미합니다. Chrome의 개발자 도구에는 Lighthouse, Chrome DevTools, Chrome 사용자 환경 보고서가 포함됩니다. 사이트 개발자가 모든 페이지에서 사용한 모든 서드 파티의 영향을 파악할 수 있도록 사용 가능한 API 및 도구를 개선할 것을 제안합니다. 또한 이 도구는 영향을 완화하기 위해 취할 수 있는 조치 (예: 지연 또는 퍼사드 사용)에 관해 안내하고, 장단점이 있는 다른 잠재적 솔루션 (다른 서드 파티 또는 DIY)을 살펴볼 수 있도록 지원합니다. 웹 성능 모니터링 API의 경우 Google은 사용자의 개인 정보 보호와 보안을 저해하지 않으면서 교차 출처 리소스의 적용 범위를 확장할 수 있는 방법을 모색하고 있습니다.

2. **비즈니스에 서드 파티 리소스를 효율적으로 로드할 수 있는 명확한 경로를 제공하세요.**

   Google에서는 브라우저가 사용자의 더 나은 로드 환경을 위해 퍼스트 파티 및 서드 파티 리소스가 로드되는 방식 간에 더 지능적으로 절충하도록 유도하는 새로운 표준을 제안하고자 합니다. 나중에 기본적으로 서드 파티 삽입을 지연 로드하거나 사용자가 가장 중요하게 생각할 수 있는 초기 콘텐츠에 그다지 중요하지 않은 서드 파티 리소스에 다른 리소스 우선순위를 적용하는 등의 제안사항을 강조 표시할 예정입니다. 이는 이 분야에서 평가 중인 아이디어 중 일부에 불과하며, 웹 성능 전문가와 더 넓은 커뮤니티와 협력하여 이 작업을 구체화하고자 합니다.

   마찬가지로 적절한 경우 JavaScript 프레임워크 및 콘텐츠 관리 시스템 (CMS)에서도 이러한 문제를 해결하고자 합니다. Aurora 및 WordPress 성능팀과 같은 프로젝트를 통해 알려진 로드 문제를 해결하는 사전 정의된 기본값의 중요성을 알게 되었습니다. 프레임워크와 CMS에 내장된 기본값은 비즈니스를 밝은 길로 안내합니다. 또한 페이지 로드 및 CWV를 최적화하기 위해 휴리스틱을 적용할 수 있는 힌트로 사용자 에이전트 (예: Chrome)에 유용할 수 있습니다. 이러한 힌트를 사용하면 사용자 에이전트가 페이지 수명 주기에서 특정 서드 파티를 언제, 어떻게 로드해야 하는지 결정하는 데 도움이 됩니다. 예를 들어 Next.js 스크립트 구성요소에는 페이지가 상호작용이 가능해진 후에 서드 파티 스크립트를 로드하는 기본값이 내장되어 있습니다.

3. **투명성 개선을 통해 실적에 미치는 영향을 줄이도록 서드 파티에게 인센티브를 제공합니다.**

   현재 서드 파티 개발자는 스크립트가 전체 사이트에 미치는 영향을 파악하는 데 필요한 가시성을 갖추지 못하고 있습니다. Google은 이 문제를 해결하고 이러한 제공업체에 제공하는 가치를 분석하고 동일한 가치를 제공하는 시장의 다른 제품과 비교할 수 있는 도구를 제공할 계획입니다. 또한 Google은 데이터를 사용하여 영향을 일으키는 원인을 진단하고 이를 업스트림에서 완화할 수 있도록 지원하고자 합니다. 성공하려면 Google에서 작성한 서드 파티를 포함한 모든 서드 파티를 호출해야 합니다.

도전과제

이 정도 규모의 작업에는 어려움이 따릅니다. 고려해야 할 주요 문제는 다음과 같습니다.

• 서드 파티는 광고, 분석, 태그 관리, 유틸리티 등 다양한 문제를 아우르는 문제입니다. 각 영역에는 고유한 요구사항과 절충사항을 고려해야 합니다. 예를 들면 다음과 같습니다.
  • 광고 로드를 최적화할지 여부는 수익과 사용자 환경 간의 절충에 따라 달라집니다. 너무 일찍 표시하면 중요한 콘텐츠가 차단되고 너무 늦게 표시하면 사용자가 놓치게 됩니다.
  • 애널리틱스 스크립트는 페이지 크기를 늘리지만 비즈니스에 사용자 액션에 관한 중요한 데이터를 제공합니다.

YouTube는 다양한 카테고리의 서드 파티와 협력하고, 관련된 미묘한 차이를 파악하고, 절충점을 찾고, 모든 사용자에게 적합한 인센티브를 개발하고자 합니다. Google은 전략을 효과적으로 실행하기 위해 모든 지역의 당사자와 별도로 협력해야 한다는 점을 잘 알고 있습니다. 여기에는 Google 태그 관리자, Google Ads, YouTube와 같은 Google의 내부 파트너가 포함됩니다.

1. Google은 사이트 개발자와 서드 파티 개발자 모두에게 더 심층적인 기여 분석을 제공하고자 합니다. 이를 위해서는 효과 측정에 가장 관련성이 높은 데이터를 파악하고, 정확하고 세부적으로 기여도를 부여하며, 올바른 방향을 제시하는 세심한 노력이 필요합니다. 궁극적으로 특정 서드 파티가 경쟁업체에 비해 어떤 실적을 내고 있는지 모든 사용자에게 투명하게 공개되어야 합니다.

2. Chrome을 개선하여 퍼스트 파티 리소스와 서드 파티 리소스의 로드 우선순위에 적절한 균형을 맞추는 데 도움이 되는 최적화를 적용할 수 있도록 제안합니다. 중요한 변경사항은 모든 브라우저에서 표준으로 제공되지만 시간이 걸립니다. 예를 들어 <img> 및 <iframe> 요소의 loading 속성은 2019년부터 Chrome/Edge에서 사용할 수 있었지만 Safari에서는 2022년에야 사용할 수 있게 되었습니다. 기능이 표준화될 때까지 서드 파티 리소스 사용자는 다른 브라우저에도 최적화되어 있는지 확인해야 합니다. YouTube는 관련성이 있는 경우 안내에서 이를 강조 표시하여 도움을 드릴 것입니다.

3. 이 프로젝트를 실행하려면 파트너 및 개발자와 협력하여 구체적인 요구사항을 파악하는 것뿐만 아니라 실험용 솔루션을 대규모로 테스트하고, 의견을 제공하고, 필요에 따라 반복하고 즉흥적으로 조정해야 합니다. 테스트 및 평가를 위한 적절한 기간을 고려하여 변경사항을 계획해야 합니다.

초기 표준 제안서

서드 파티 로드 프로세스를 최적화하는 데 사용할 수 있는 기능을 개발하기 위한 초기 실험을 진행했습니다. Google은 지금까지의 결과에 만족하며 현재 이 중 두 가지 기능을 논의할 수 있습니다.

LazyEmbeds

이전에는 Chrome에서 라이트 모드 사용자를 위해 오프스크린 <img> 및 <iframe> 요소를 지연 로드했습니다. 이 기능은 모든 사용자에게 확장되어 사용자가 스크롤하여 근처에 도달할 때까지 서드 파티 삽입으로 확인된 <iframe> 요소의 로드를 지연시킬 수 있습니다. 이렇게 하면 페이지의 다른 부분을 더 빠르게 로드하고, Core Web Vitals를 개선하고, 메모리 사용량을 줄이고, 데이터를 절약할 수 있습니다.

다음은 LazyEmbeds를 사용하여 페이지에서 YouTube 동영상을 지연 로드하는 데모입니다. 단일 YouTube 동영상 삽입은 일반적으로 페이지에 500~600KB의 JavaScript를 추가합니다. LazyEmbeds를 사용하여 이러한 동영상 삽입이 14개 있는 블로그 게시물을 최적화하려고 했습니다. 페이지 로드 시간과 데이터 절약 측면에서 긍정적인 결과를 얻었습니다.

이 작업에 대해 자세히 알아보려면 설명 자료와 blink-dev 실험 의도 스레드 및 실험 확장 프로그램을 참고하세요.

타겟팅된 서드 파티 제한

서드 파티 스크립트는 종합적인 감독 프로세스 없이 여러 팀에서 추가하는 경우가 많습니다. The Telegraph의 엔지니어링팀은 '모든 사람은 조직에 수익을 가져다주는 '이 태그'를 페이지에 표시하기를 원한다'고 말했습니다. 이로 인해 성능 영향을 관리하는 부담이 지속적으로 증가할 수 있습니다.

타겟팅된 서드 파티 스크립트 제한은 영향을 완화하기 위해 매우 구체적인 종류의 서드 파티를 제한하는 것을 제안합니다. 이렇게 하면 브라우저에서 주요 콘텐츠와 중요한 서드 파티를 일찍 로드할 수 있고 나중에 로드해도 안전한 콘텐츠는 제한됩니다.

RUM API 개선

또한 서드 파티 실적 평가와 관련된 정보를 포함하도록 RUM API를 개선하는 방안도 고려하고 있습니다. 개선사항은 다음과 같습니다.

1. <iframe> 보고: 교차 프레임 보고에 Performance Timeline API를 활용할 수 있는 솔루션을 개발하고 있습니다. 이렇게 하면 최상위 페이지의 작성자가 페이지에 삽입된 협력하는 서드 파티 iframe의 실적 데이터를 검사할 수 있습니다.

2. 긴 작업 기여 분석: RUM의 Long Tasks API를 사용하면 사이트 소유자가 기본 스레드를 장시간 사용하고 상호작용을 지연시키는 긴 작업을 식별할 수 있습니다.

추가 업데이트

Google은 이러한 아이디어를 계속 실험하고 있으며, 앞으로 변경사항이 있을 때 GitHub 설명서와 사양 초안을 게시할 예정입니다. Google과 파트너십을 맺거나 의견을 남기고자 하는 서드 파티 및 사이트 소유자는 이를 통해 토론에 참여할 수 있습니다. 서드 파티는 Core Web Vitals/INP 데이터가 저조한 원인이 자신에게 있지 않도록 Core Web Vitals 및 INP 측정항목에 맞게 최적화하는 데 집중할 수도 있습니다. 현재 업데이트를 적극적으로 찾는 사용자는 blink-dev 그룹의 게시물을 참고할 수 있습니다.

이 문제 영역을 더 탐구하고 학습한 내용을 커뮤니티와 공유할 수 있기를 기대합니다.

Leena Sohoni-Kasture, Jeremy Wagner, Gilberto Cocchi, Kenji Baheux, Kouhei Ueno, Kentaro Hara, Alex N. Jose, Melissa Mitchell, Yoav Weiss, Shunya Shishido, Minoru Chikamune님께 감사드립니다.