이 페이지는 Cloud Translation API를 통해 번역되었습니다.

서드 파티 삽입 사용 시 권장사항

많이 사용되는 서드 파티 임베딩을 효율적으로 로드하는 기법의 개요입니다.

Addy Osmani

Katie Hempenius

Leena Sohoni

많은 사이트에서 타사 삽입 기능을 사용하여 웹페이지의 일부 섹션을 다른 콘텐츠 제공자에게 위임함으로써 몰입도 높은 사용자 환경을 조성합니다. 타사 콘텐츠 삽입의 가장 일반적인 예로는 동영상 플레이어, 소셜 미디어 피드, 지도, 광고가 있습니다.

서드 파티 콘텐츠는 다양한 방식으로 페이지 실적에 영향을 미칠 수 있습니다. 렌더링을 차단하거나, 네트워크 및 대역폭의 다른 중요한 리소스와 경합하거나, 코어 웹 바이탈 측정항목에 영향을 미칠 수 있습니다. 서드 파티 삽입으로 인해 로드될 때 레이아웃이 변경될 수도 있습니다. 이 문서에서는 서드 파티 삽입을 로드할 때 사용할 수 있는 성능 권장사항, 효율적인 로드 기술, 인기 있는 삽입의 레이아웃 변경을 줄이는 데 도움이 되는 Layout Shift Terminator 도구에 관해 설명합니다.

삽입이란 무엇인가요?

서드 파티 삽입이란 사이트에 표시되는 콘텐츠 중 다음과 같은 콘텐츠를 말합니다. * 내가 작성하지 않은 콘텐츠 * 서드 파티 서버에서 제공

여러 오프스크린 삽입이 표시되며 이는 지연 로드될 수 있습니다.

삽입은 다음과 같은 경우에 자주 사용됩니다. * 스포츠, 뉴스, 엔터테인먼트, 패션 관련 웹사이트에서는 동영상을 사용하여 텍스트 콘텐츠를 보완합니다. * Twitter 또는 소셜 미디어 계정을 활발하게 운영 중인 조직은 웹페이지에 이러한 계정의 피드를 삽입하여 더 많은 사용자와 소통하고 연락을 취합니다. * 음식점, 공원, 이벤트 장소 페이지에는 지도가 삽입되는 경우가 많습니다.

서드 파티 삽입은 일반적으로 페이지의 <iframe> 요소에 로드됩니다. 서드 파티 제공업체는 마크업, 스크립트, 스타일시트로 구성된 페이지를 가져오는 <iframe>로 구성되는 HTML 스니펫을 제공합니다. 일부 제공자는 다른 콘텐츠를 가져오기 위해 <iframe>를 동적으로 삽입하는 스크립트 스니펫도 사용합니다. 이로 인해 타사 삽입 항목이 지나치게 많아지고 퍼스트 파티 콘텐츠가 지연되어 페이지의 성능에 영향을 미칠 수 있습니다.

서드 파티 삽입이 성능에 미치는 영향

인기 있는 삽입에는 100KB 이상의 자바스크립트가 포함되어 있으며, 최대 2MB까지 확장되기도 합니다. 실행할 때 기본 스레드를 로드하고 사용하는 데 더 많은 시간이 걸립니다. Lighthouse 및 Chrome DevTools와 같은 성능 모니터링 도구를 사용하면 서드 파티 삽입이 성능에 미치는 영향을 측정할 수 있습니다.

서드 파티 코드의 영향 줄이기 Lighthouse 감사는 페이지에서 사용하는 서드 파티 제공업체 목록을 크기 및 기본 스레드 차단 시간과 함께 보여줍니다. 감사는 Lighthouse 탭 아래의 Chrome DevTools를 통해 사용할 수 있습니다.

삽입 소스 코드는 변경될 수 있으므로 삽입과 타사 코드가 성능에 미치는 영향을 주기적으로 감사하는 것이 좋습니다. 이 기회를 활용하여 중복 코드를 삭제할 수 있습니다.

서드 파티 코드의 영향 감소

로드 권장사항

서드 파티 삽입은 실적에 부정적인 영향을 미칠 수 있지만 중요한 기능도 제공합니다. 서드 파티 삽입을 효율적으로 사용하고 성능에 미치는 영향을 줄이려면 아래 가이드라인을 따르세요.

스크립트 순서

잘 디자인된 페이지에서는 자사 콘텐츠가 핵심 콘텐츠가 되는 반면, 서드 파티 삽입 콘텐츠는 사이드바를 차지하거나 퍼스트 파티 콘텐츠 다음에 표시됩니다.

최상의 사용자 환경을 제공하려면 기본 콘텐츠가 다른 지원 콘텐츠보다 먼저 빠르게 로드되어야 합니다. 예를 들어 뉴스 페이지의 뉴스 텍스트는 Twitter 피드 또는 광고를 삽입하기 전에 로드되어야 합니다.

서드 파티 삽입에 대한 요청은 퍼스트 파티 콘텐츠를 로드하는 데 방해가 될 수 있으므로 서드 파티 스크립트 태그의 위치가 중요합니다. 스크립트가 실행되는 동안 DOM 생성이 일시 중지되기 때문에 스크립트가 로딩 순서에 영향을 미칠 수 있습니다. 서드 파티 스크립트 태그를 주요 퍼스트 파티 태그 뒤에 배치하고 async 또는 defer 속성을 사용하여 비동기식으로 로드합니다.

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

지연 로드

타사 콘텐츠는 일반적으로 기본 콘텐츠 다음에 제공되므로 페이지가 로드될 때 표시 영역에 표시되지 않을 수 있습니다. 이 경우 사용자가 페이지의 해당 부분으로 스크롤할 때까지 서드 파티 리소스 다운로드가 지연될 수 있습니다. 이렇게 하면 초기 페이지 로드를 최적화할 수 있을 뿐만 아니라 데이터 요금제와 네트워크 연결 속도가 느린 사용자의 다운로드 비용을 절감할 수 있습니다.

실제로 필요할 때까지 콘텐츠 다운로드를 지연하는 것을 지연 로드라고 합니다. 요구사항 및 삽입 유형에 따라 아래에 설명된 다양한 지연 로드 기법을 사용할 수 있습니다.

`<iframe>`의 네이티브 지연 로드

<iframe> 요소를 통해 로드된 서드 파티 삽입의 경우 브라우저 수준의 지연 로드를 사용하여 사용자가 화면 밖 iframe 근처로 스크롤할 때까지 오프스크린 iframe 로드를 지연할 수 있습니다. <iframe>의 로드 속성은 Chrome 77 이상에서 사용할 수 있으며 다른 Chromium 기반 브라우저에도 도입되었습니다.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

로드 속성은 다음 값을 지원합니다.

lazy: 브라우저가 iframe 로드를 지연해야 함을 나타냅니다. 브라우저가 표시 영역에 가까워지면 iframe을 로드합니다. iframe이 지연 로드에 적합한 경우 사용합니다.
eager: iframe을 즉시 로드합니다. iframe이 지연 로드에 적합하지 않은 경우 사용합니다. loading 속성을 지정하지 않으면 라이트 모드를 제외하고 이 속성이 기본 동작입니다.
auto: 브라우저가 이 프레임의 지연 로드 여부를 결정합니다.

loading 속성을 지원하지 않는 브라우저는 이 속성을 무시하므로 네이티브 지연 로드를 점진적 개선으로 적용할 수 있습니다. 이 속성을 지원하는 브라우저에 따라 표시 영역으로부터의 거리 임계값 (iframe 로드가 시작되는 거리)이 다르게 구현될 수 있습니다.

다음은 다양한 유형의 삽입에 대해 iframe을 지연 로드할 수 있는 몇 가지 방법입니다.

YouTube 동영상: YouTube 동영상 플레이어 iframe을 지연 로드하려면 YouTube에서 제공하는 소스 코드에 loading 속성을 포함합니다. YouTube 삽입 항목을 지연 로드하면 초기 페이지 로드 시 약 500KB를 절약할 수 있습니다.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   loading="lazy"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
            encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

Google 지도: Google 지도 iframe을 지연 로드하려면 Google Maps Embed API에서 생성된 iframe 삽입의 코드에 loading 속성을 포함합니다. 다음은 Google Cloud API 키의 자리표시자가 포함된 코드의 예입니다.

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

ageagesizes 라이브러리

브라우저는 iframe을 언제 로드해야 하는지 결정하기 위해 유효 연결 유형 및 라이트 모드와 같은 신호 외에도 삽입 항목의 표시 영역 거리를 사용하므로 네이티브 지연 로드가 일관되지 않을 수 있습니다. 거리 기준점을 더 잘 제어해야 하거나 여러 브라우저에서 일관된 지연 로드 경험을 제공하고 싶다면 lazysizes 라이브러리를 사용할 수 있습니다.

지연 크기는 이미지와 iframe 모두에서 검색엔진 최적화에 적합한 빠른 지연 로더입니다. 구성요소를 다운로드하면 다음과 같이 YouTube 삽입을 위한 iframe과 함께 사용할 수 있습니다.

<script src="lazysizes.min.js" async></script>

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

마찬가지로 지연 크기는 다른 서드 파티 삽입의 경우 iframe과 함께 사용할 수 있습니다.

지연 크기는 Intersection Observer API를 사용하여 요소가 표시되는 시점을 감지합니다.

Facebook에서 데이터 지연 사용

Facebook에서는 삽입할 수 있는 다양한 유형의 소셜 플러그인을 제공합니다. 여기에는 게시물, 댓글, 동영상 및 가장 인기 있는 좋아요 버튼이 포함됩니다. 모든 플러그인에는 data-lazy 설정이 포함되어 있습니다. true로 설정하면 플러그인이 loading="lazy" iframe 속성을 설정하여 브라우저의 지연 로드 메커니즘을 사용합니다.

Instagram 피드 지연 로드

Instagram은 임베딩의 일부로 마크업 블록과 스크립트를 제공합니다. 스크립트가 페이지에 <iframe>를 삽입합니다. 이 <iframe>를 지연 로드하면 삽입 크기가 100KB 이상 gzip으로 압축될 수 있으므로 성능이 향상될 수 있습니다. WPZoom 및 Elfsight와 같은 WordPress 사이트용 Instagram 플러그인은 지연 로드 옵션을 제공합니다.

삽입을 퍼사드로 대체

양방향 삽입은 페이지에 가치를 더해주지만, 많은 사용자가 이와 상호작용하지 않을 수 있습니다. 예를 들어 식당 페이지를 탐색하는 모든 사용자가 삽입된 지도를 클릭하거나 펼치고 스크롤하고 탐색할 수 있는 것은 아닙니다. 마찬가지로 통신 서비스 제공업체 페이지의 모든 사용자가 챗봇과 상호작용하는 것은 아닙니다. 이러한 경우 대신 퍼사드를 표시하여 삽입을 로드하거나 지연 로드를 피할 수 있습니다.

퍼사드는 실제 삽입된 서드 파티와 유사해 보이지만 작동하지 않기 때문에 페이지 로드에 드는 부담이 훨씬 적은 정적 요소입니다. 다음은 사용자에게 가치를 제공하면서 이러한 삽입을 최적으로 로드하는 몇 가지 전략입니다.

정적 이미지를 퍼사드로 사용

지도를 대화형으로 만들 필요가 없는 경우 지도 삽입 대신 정적 이미지를 사용할 수 있습니다. 지도에서 관심 지역을 확대하고 이미지를 캡처하여 대화형 지도 삽입 대신 사용할 수 있습니다. 아래와 같이 DevTools의 노드 스크린샷 캡처 기능을 사용하여 삽입된 iframe 요소의 스크린샷을 캡처할 수도 있습니다.

노드 스크린샷 캡처

DevTools에서 이미지를 png로 캡처하지만 WebP format for better performance로 변환하는 방법도 있습니다.

동적 이미지를 퍼사드로 사용

이 기법을 사용하면 런타임에 대화형 삽입에 해당하는 이미지를 생성할 수 있습니다. 다음은 페이지에 삽입된 콘텐츠의 정적 버전을 생성할 수 있게 해 주는 몇 가지 도구입니다.

Maps Static API: Google Maps Static API 서비스는 표준 HTTP 요청에 포함된 URL 매개변수를 기반으로 지도를 생성하고 웹페이지에 표시할 수 있는 이미지로 지도를 반환합니다. URL은 Google 지도 API 키를 포함해야 하며 페이지의 <img> 태그에 src 속성으로 배치되어야 합니다.

정적 지도 작성기 도구는 URL에 필요한 매개변수를 구성하는 데 도움을 주고, 이미지 요소의 코드를 실시간으로 제공합니다.

다음 스니펫은 소스가 Maps Static API URL로 설정된 이미지의 코드를 보여줍니다. 이미지를 클릭하여 실제 지도에 액세스할 수 있도록 하는 링크 태그에 포함되어 있습니다. (참고: API 키 속성은 URL에 포함되지 않음)
```
<a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>
```
Twitter 스크린샷: 지도 스크린샷과 마찬가지로 이 개념을 사용하면 실시간 피드 대신 Twitter 스크린샷을 동적으로 삽입할 수 있습니다. Tweetpik는 트윗의 스크린샷을 찍는 데 사용할 수 있는 도구 중 하나입니다. Tweetpik API는 트윗의 URL을 받아 해당 콘텐츠가 포함된 이미지를 반환합니다. API는 이미지의 배경, 색상, 테두리 및 크기를 맞춤설정하는 매개변수도 허용합니다.

클릭하여 로드하여 퍼사드 개선

클릭 투 로드 개념은 지연 로드와 퍼사드를 결합합니다. 처음에는 페이지가 퍼사드와 함께 로드됩니다. 사용자가 정적 자리표시자를 클릭하여 상호작용하면 서드 파티 삽입이 로드됩니다. 이를 상호작용 시 가져오기 패턴이라고도 하며 다음 단계를 통해 구현할 수 있습니다.

페이지 로드 시: 파사드 또는 정적 요소가 페이지에 포함됩니다.
마우스 오버 시: 퍼사드가 서드 파티 삽입 제공업체에 미리 연결됩니다.
클릭 시: 퍼사드가 서드 파티 제품으로 대체됩니다.

퍼사드는 동영상 플레이어, 채팅 위젯, 인증 서비스 및 소셜 미디어 위젯용 서드 파티 삽입과 함께 사용할 수 있습니다. 재생 버튼이 있는 이미지일 뿐 YouTube 동영상 삽입은 자주 접하게 되는 파사드입니다. 실제 동영상은 이미지를 클릭할 때만 로드됩니다.

상호작용 시 가져오기 패턴을 사용하여 맞춤 클릭 투 로드 퍼사드를 빌드하거나 다양한 유형의 삽입에 사용할 수 있는 다음 오픈소스 퍼사드 중 하나를 사용할 수 있습니다.

YouTube 퍼사드

Lite-youtube-embed는 YouTube 플레이어에 권장되는 퍼사드로, 실제 플레이어처럼 보이지만 224배 더 빠릅니다. 스크립트와 스타일시트를 다운로드한 다음 HTML 또는 자바스크립트에서 <lite-youtube> 태그를 사용하여 사용할 수 있습니다. YouTube에서 지원하는 맞춤 플레이어 매개변수는 params 속성을 통해 포함될 수 있습니다.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
다음은 lite-youtube-embed와 실제 임베딩을 비교한 것입니다.

라이트 YouTube 삽입

YouTube 삽입

YouTube 및 Vimeo 플레이어에서 사용할 수 있는 다른 유사한 퍼사드로는 lite-youtube, lite-vimeo-embed, lite-vimeo가 있습니다.
채팅 위젯 퍼사드

React-live-chat-loader는 삽입 자체가 아니라 채팅 삽입처럼 보이는 버튼을 로드합니다. Intercom, Help Scout, Messenger와 같은 다양한 채팅 제공업체 플랫폼에서 사용할 수 있습니다. 유사한 위젯은 채팅 위젯보다 훨씬 가볍고 더 빠르게 로드됩니다. 사용자가 버튼에 마우스를 가져가거나 버튼을 클릭하거나 페이지가 오랫동안 유휴 상태이면 실제 채팅 위젯으로 대체될 수 있습니다. Postmark 우수사례는 React-live-chat-loader를 구현한 방법과 이를 통해 달성한 성능 개선을 설명합니다.

임베딩을 삭제하거나 링크로 대체

일부 타사 삽입으로 인해 로드 성능이 저하되고 위의 기법을 사용할 수 없는 경우 가장 간단한 방법은 삽입을 완전히 삭제하는 것입니다. 사용자가 여전히 삽입한 콘텐츠에 액세스할 수 있도록 하려면 target="_blank"로 콘텐츠 링크를 제공하면 사용자가 콘텐츠를 클릭하여 다른 탭에서 볼 수 있습니다.

레이아웃 안정성

삽입된 콘텐츠를 동적으로 로드하면 페이지 로드 성능이 향상될 수 있지만 경우에 따라 페이지 콘텐츠가 예기치 않게 이동할 수도 있습니다. 이를 레이아웃 변경이라고 합니다.

시각적 안정성은 원활한 사용자 환경을 보장하는 데 중요하므로 누적 레이아웃 변경 (CLS)은 이러한 전환이 발생하는 빈도와 중단되는 정도를 측정합니다.

페이지 로드 중에 나중에 동적으로 로드되는 요소를 위해 공간을 예약하여 레이아웃 변경을 피할 수 있습니다. 브라우저는 요소의 너비와 높이를 알고 있는 경우 예약할 공간을 결정할 수 있습니다. iframe의 width 및 height 속성을 지정하거나 서드 파티 삽입이 로드될 정적 요소에 고정된 크기를 설정하여 이를 보장할 수 있습니다. 예를 들어 YouTube 삽입에 대한 iframe의 너비와 높이는 다음과 같이 지정해야 합니다.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

YouTube, Google 지도 및 Facebook과 같이 인기 있는 삽입은 지정된 크기 속성이 있는 삽입 코드를 제공합니다. 그러나 이를 포함하지 않는 제공업체가 있을 수 있습니다. 예를 들어 이 코드 스니펫은 결과로 만들어진 삽입의 크기를 나타내지 않습니다.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

이 페이지가 렌더링된 후 DevTools를 사용하여 삽입된 iframe를 검사할 수 있습니다. 다음 스니펫에서 볼 수 있듯이 삽입된 iframe의 높이는 고정되어 있지만 너비는 백분율로 지정됩니다.

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

이 정보는 피드 로드 시 컨테이너가 확장되지 않고 레이아웃 변경이 발생하지 않도록 포함하는 요소의 크기를 설정하는 데 사용할 수 있습니다. 다음 스니펫을 사용하여 이전에 포함된 삽입의 크기를 수정할 수 있습니다.

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

레이아웃 변경 종결자

서드 파티 삽입은 렌더링되는 최종 콘텐츠의 크기 (너비, 높이)를 생략하는 경우가 많으므로 페이지에서 레이아웃을 크게 변경할 수 있습니다. 다양한 표시 영역 크기에서 DevTools를 사용하여 최종 크기를 수동으로 검사하지 않으면 이 문제를 해결하기 어려울 수 있습니다.

이제 자동화된 도구인 Layout Shift Terminator를 사용하면 Twitter, Facebook, 기타 제공업체 등 인기 있는 삽입에서 레이아웃 변경을 줄일 수 있습니다.

레이아웃 변경 종료자:

iframe에서 삽입된 클라이언트 측을 로드합니다.
많이 사용되는 다양한 표시 영역 크기에 맞게 iframe의 크기를 조절합니다.
각 인기 표시 영역에 대해 삽입의 크기를 캡처하여 나중에 미디어 쿼리와 컨테이너 쿼리를 생성합니다.
삽입이 초기화될 때까지 (이후 최소 높이 스타일이 삭제됨) 미디어 쿼리 (및 컨테이너 쿼리)를 사용하여 삽입 마크업 주위에 최소 높이 래퍼의 크기를 지정합니다.
페이지에 삽입 코드를 포함할 위치에 복사/붙여넣기할 수 있는 최적화된 삽입 스니펫을 생성합니다.

Layout Shift Terminator를 사용해 보고 언제든지 GitHub에 의견을 남겨 주세요. 이 도구는 베타 상태이며 향후 지속적으로 기능을 개선할 수 있도록 노력하고 있습니다.

결론

서드 파티 삽입은 사용자에게 많은 가치를 제공할 수 있지만 페이지에 삽입한 콘텐츠의 수와 크기가 증가하면 성능이 저하될 수 있습니다. 그렇기 때문에 삽입의 위치, 관련성, 잠재적 사용자의 필요에 따라 삽입에 적절한 로딩 전략을 측정하고, 판단하고, 사용해야 합니다.