서드 파티 스크립트의 속도가 느려지는 경우 성능 향상을 위한 두 가지 옵션이 있습니다.
- 사이트에 뚜렷한 가치를 제공하지 않는 경우 태그를 삭제하세요.
- 로드 프로세스를 최적화합니다.
이 게시물에서는 서드 파티 스크립트의 로드 프로세스를 최적화하는 방법을 설명합니다. 다음 기법을 사용합니다.
<script>태그에async또는defer속성 사용- 필수 출처에 대한 조기 연결 설정
- 지연 로드
- 서드 파티 스크립트 제공 방식 최적화
async 또는 defer을 사용합니다.
동기식 스크립트는 DOM을 지연하므로 빌드 및 렌더링하기 전에 항상 서드 파티 스크립트를 로드하여 비동기적으로 호출될 수 있습니다.
async 및 defer 속성은 파싱을 진행할 수 있음을 브라우저에 알립니다.
로드한 다음 스크립트를 실행하여
표시됩니다. 이렇게 하면 스크립트 다운로드로 인해 DOM 생성이나 페이지가 차단되지 않습니다.
모든 스크립트가 완료되기 전에 사용자가 페이지를 볼 수 있는 렌더링
있습니다.
<script async src="script.js">
<script defer src="script.js">
async 속성과 defer 속성의 차이점은 브라우저가
스크립트를 실행합니다
async
async 속성이 있는 스크립트는 실행 후 첫 번째 기회에 실행됩니다.
다운로드 완료 후 창의
load 이벤트를 시작합니다. 다시 말해
async 스크립트가 지정된 순서로 실행되지 않을 가능성도
HTML에 표시됩니다. 또한 DOM 빌드가 중단되고
다운로드가 완료될 때까지 기다릴 필요가 없습니다.
async가 있는 스크립트는 여전히
HTML 파싱defer
defer 속성이 있는 스크립트는 HTML 파싱이 완전히 완료된 후에 실행됩니다.
종료되었지만
DOMContentLoaded
이벤트를 처리합니다. defer는 스크립트가 HTML에 표시된 순서대로 실행되도록 합니다.
파서를 차단하지 않습니다
defer인 스크립트는 다음 시점까지 실행 대기합니다.
브라우저가 HTML 파싱을 완료합니다.- 로드 시에 스크립트를 더 일찍 실행하는 것이 중요한 경우
async를 사용합니다. 프로세스입니다 - 다음 동영상 플레이어와 같이 중요도가 낮은 리소스에는
defer를 사용하세요. 접을 수 있습니다
이러한 속성을 사용하면 페이지 로드 속도를 크게 높일 수 있습니다. 예를 들어 Telegraph는 모든 스크립트를 연기했습니다, 광고 및 분석 기능을 포함하고 있으며 광고 로드 시간이 평균 4초입니다.
필수 출처에 대한 조기 연결 설정
kubectl 명령어를 실행하면 100~500ms를 초기 연결 설정 영향을 미칠 수 있습니다
두 가지 <link> 유형
preconnect 및 dns-prefetch의 도움을 받으실 수 있습니다.
preconnect
<link rel="preconnect">는 페이지가
다른 출처와 연결되어 있으며 해당 프로세스가 가능한 한 빨리 시작되도록 하고 싶다고
할 수 있습니다. 브라우저가 미리 연결된 출처의 리소스를 요청하면
다운로드가 즉시 시작됩니다.
<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch
<link rel="dns-prefetch>는 대상의 작은 하위 집합을
<link rel="preconnect"> 핸들. 연결을 설정하려면 DNS가 필요합니다.
조회 및 TCP 핸드셰이크, 그리고 보안 출처의 경우 TLS 협상을 지원합니다
dns-prefetch는 특정 도메인이 명시적으로 호출되기 전에 해당 도메인의 DNS만 확인하도록 브라우저에 지시합니다.
preconnect 힌트는 가장 중요한 연결에만 사용하는 것이 가장 좋습니다. 대상
중요도가 낮은 서드 파티 도메인은 <link rel=dns-prefetch>를 사용하세요.
<link rel="dns-prefetch" href="http://example.com">
dns-prefetch 브라우저 지원
preconnect 지원팀과 약간 다릅니다.
이렇게 하면 dns-prefetch가
preconnect입니다. 별도의 링크 태그를 사용하여 다음을 안전하게 구현하세요.
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
서드 파티 리소스 지연 로드
삽입된 서드 파티 리소스로 인해 엉망진창이 될 수 있습니다. 중요하지 않거나 스크롤해야 볼 수 있는 부분에 있는 경우 (즉, 사용자가 스크롤해야 볼 수 있는 경우) 지연 로드는 페이지 속도 및 페인트 측정항목을 개선합니다. 이렇게 하면 사용자가 더 빠르게, 더 나은 경험을 누리실 수 있습니다.
<ph type="x-smartling-placeholder">
한 가지 효과적인 방법은 기본 페이지 이후에 서드 파티 콘텐츠를 지연 로드하는 것입니다. 콘텐츠가 로드됩니다. 광고는 이 접근 방식에 적합합니다.
많은 사이트에서 광고가 중요한 수입원이지만, 사용자들은 있습니다. 광고를 지연 로드하고 주요 콘텐츠를 더 빠르게 게재함으로써 광고의 전반적인 조회가능성 비율을 높일 수 있음 예: MediaVine 지연 로드 광고로 전환되었습니다. 페이지 로드 속도가 200% 개선되었습니다. Google Ad Manager에는 광고 지연 로드 방법을 알아보세요.
사용자가 처음으로 스크롤할 때만 서드 파티 콘텐츠가 로드되도록 설정할 수도 있습니다. 해당 섹션의 페이지로 이동합니다.
교차 기기 관찰자
는 요소가 요소의 시작 또는 종료 시점을 효율적으로 감지하는 브라우저 API입니다.
브라우저의 표시 영역이며, 이를 사용하여 이 기술을 구현할 수 있습니다.
latencysizes는 널리 사용되는 JavaScript 라이브러리입니다.
지연 로드 이미지 및 iframes용입니다.
YouTube 퍼가기 및
위젯
또한 선택적 지원도 포함되어 있습니다.
(Intersection Observer)
지연 로드 이미지 및 iframe에 loading 속성 사용하기
JavaScript 기술의 훌륭한 대안이며 최근에는
Chrome 76에서 사용 가능합니다
서드 파티 스크립트 제공 방식 최적화
다음은 Google의 광고 네트워크 최적화를 위해 사용할 수 있습니다
타사 CDN 호스팅
제3자 공급업체는 일반적으로 자신이 제공한 자바스크립트 파일의 URL을 일반적으로 콘텐츠 전송 네트워크 (CDN)에서 호스팅됩니다. 이 접근 방식의 장점은 URL을 복사하여 붙여넣으면 유지보수 오버헤드가 발생하지 않습니다. 이 제3자 공급업체가 서버 구성 및 스크립트 업데이트를 처리합니다.
하지만 나머지 리소스와 동일한 출처가 아니기 때문에 공개 CDN에서 파일을 로드하면 네트워크 비용이 발생합니다. 브라우저는 DNS 조회를 수행하고, 새 HTTP 연결을 설정하고, 보안 출처에서 공급업체 서버와 SSL 핸드셰이크를 수행할 수 있습니다.
서드 파티 서버의 파일을 사용하는 경우 있습니다 다른 사람의 캐싱 전략에 의존하면 스크립트가 네트워크에서 불필요하게 다시 가져오는 데이터입니다.
서드 파티 스크립트 자체 호스팅
자체 호스팅 서드 파티 스크립트는 스크립트의 로드 프로세스를 시작합니다. 자체 호스팅을 통해 다음을 수행할 수 있습니다.
예를 들어 Casper에서는 1.7초를 단축할 수 있었습니다. A/B 테스트 스크립트를 자체 호스팅하여 로드 시간을 단축할 수 있습니다.
하지만 자체 호스팅에는 한 가지 큰 단점이 있습니다. 스크립트가 오래될 수 있고 API 변경이나 보안 수정이 있을 때 자동 업데이트를 받지 못합니다.
서비스 워커를 사용하여 타사 서버의 스크립트 캐시
서비스 워커를 사용하여 타사 서버의 스크립트를 캐시할 수 있습니다. 를 사용합니다. 이를 통해 캐싱을 더 세부적으로 제어할 수 있으며 동시에 제3자 CDN의 이점을 유지할 수 있습니다
네트워크에서 스크립트를 다시 가져오는 빈도를 제어하고
필수적이지 않거나
사용자가 페이지에서 중요한 상호작용에 도달할 때까지 서드 파티 리소스의 직접적인 영향을 받지 않습니다.
preconnect를 사용하면 초기 연결을 설정하고
네트워크 비용을 줄일 수 있습니다