타사 JavaScript를 효율적으로 로드
로드 시간과 사용자 경험을 개선하기 위해 타사 스크립트를 사용하는 일반적인 함정을 피하십시오.
타사 스크립트가 페이지 로드 속도를 늦추는 경우 성능을 개선할 수 있는 두 가지 옵션이 있습니다.
사이트에 명확한 가치를 추가하지 않는 경우 제거하십시오.
로딩 프로세스를 최적화합니다.
이 게시물은 다음 기술을 사용하여 타사 스크립트의 로딩 프로세스를 최적화하는 방법을 설명합니다.
<script>태그에서async또는defer속성 사용필요한 오리진에 대한 초기 연결 설정
지연 로딩
타사 스크립트 제공 방법 최적화
async 또는 defer 사용 #
동기 스크립트는 DOM 생성 및 렌더링을 지연시키므로 페이지를 렌더링하기 전에 스크립트를 실행해야 하는 경우가 아니면 항상 타사 스크립트를 비동기적으로 로드해야 합니다.
async 및 defer 속성은 브라우저에 백그라운드에서 스크립트를 로드하는 동안 HTML 구문 분석을 계속하고 로드된 후 스크립트를 실행할 수 있음을 알려줍니다. 이렇게 하면 스크립트 다운로드가 DOM 구성 및 페이지 렌더링을 차단하지 않습니다. 그 결과 모든 스크립트가 로드되기 전에 사용자가 페이지를 볼 수 있습니다.
<script async src="script.js">
<script defer src="script.js">async와 defer의 차이점은 스크립트 실행을 시작할 때입니다.
async #
async 속성이 있는 스크립트는 다운로드가 완료된 후 창의 로드 이벤트 전에 첫 번째 기회에 실행됩니다. async 스크립트가 HTML에 나타나는 순서대로 실행되지 않을 가능성이 있음을 의미합니다. 또한 파서가 작동하는 동안 다운로드를 마치면 DOM 구축을 중단할 수 있음을 의미합니다.
defer #
defer 속성이 있는 스크립트는 HTML 구문 분석이 완전히 완료된 후 DOMContentLoaded 이벤트 전에 실행됩니다. defer는 스크립트가 HTML에 나타나는 순서대로 실행되도록 보장하고 파서를 차단하지 않습니다.
로드 프로세스 초기에 스크립트를 실행해야 하는 경우
async를 사용합니다.덜 중요한 리소스에 대해
defer를 사용합니다. 예를 들어 스크롤 없이 볼 수 있는 동영상 플레이어입니다.
이러한 속성을 사용하면 페이지 로드 속도를 크게 높일 수 있습니다. 예를 들어 Telegraph는 최근 광고 및 분석을 포함한 모든 스크립트를 연기하고 광고 로딩 시간을 평균 4초 개선했습니다.
필요한 원본에 대한 초기 연결 설정 #
중요한 타사 출처에 대한 초기 연결을 설정하여 100–500ms를 절약할 수 있습니다.
두 가지 <link> 유형이 여기에 도움이 될 수 있습니다.
preconnectdns-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">타사 리소스 지연 로드 #
내장된 타사 리소스는 제대로 구성되지 않은 경우 느린 페이지 속도에 크게 기여할 수 있습니다. 중요하지 않거나 스크롤 없이 볼 수 있는 경우(즉, 사용자가 보기 위해 스크롤해야 하는 경우) 지연 로드는 페이지 속도와 페인트 메트릭을 개선하는 좋은 방법입니다. 이렇게 하면 사용자는 기본 페이지 콘텐츠를 더 빨리 얻을 수 있고 더 나은 경험을 할 수 있습니다.
한 가지 효과적인 접근 방식은 기본 페이지 콘텐츠가 로드된 후 타사 콘텐츠를 지연 로드하는 것입니다. 광고는 이 접근 방식의 좋은 후보입니다.
광고는 많은 사이트에서 중요한 수입원이지만 사용자는 콘텐츠를 찾아옵니다. 광고를 지연 로드하고 주요 콘텐츠를 더 빠르게 전달하면 광고의 전체 조회가능성 비율을 높일 수 있습니다. 예를 들어 MediaVine은 지연 로드 광고로 전환하여 페이지 로드 속도가 200% 향상되었습니다. DoubleClick은 공식 문서에서 광고를 지연 로드하는 방법에 대한 지침을 제공합니다.
다른 접근 방식은 사용자가 페이지의 해당 섹션으로 스크롤할 때만 타사 콘텐츠를 로드하는 것입니다.
Intersection Observer는 요소가 브라우저의 뷰포트에 들어오거나 나갈 때 효율적으로 감지하는 브라우저 API이며 이 기술을 구현하는 데 사용할 수 있습니다. lazysizes는 iframes을 지연 로드하는 인기 있는 JavaScript 라이브러리입니다. YouTube 임베드 및 위젯을 지원합니다. IntersectionObserver에 대한 선택적 지원도 있습니다.
이미지 및 iframe을 지연 로드하기 위해 loading 속성을 사용하는 것은 JavaScript 기술에 대한 훌륭한 대안이며 최근에 Chrome 76에서 사용할 수 있게 되었습니다!
타사 스크립트 제공 방법 최적화 #
타사 CDN 호스팅 #
타사 공급업체는 일반적으로 CDN(콘텐츠 전송 네트워크)에서 호스팅하는 JavaScript 파일의 URL을 제공하는 것이 일반적입니다. 이 접근 방식의 이점은 URL을 복사하여 붙여넣기만 하면 빠르게 시작할 수 있고 유지 관리 오버헤드가 없다는 것입니다. 타사 공급업체가 서버 구성 및 스크립트 업데이트를 처리합니다.
그러나 나머지 리소스와 동일한 출처에 있지 않기 때문에 공용 CDN에서 파일을 로드하려면 네트워크 비용이 듭니다. 브라우저는 DNS 조회를 수행하고, 새 HTTP 연결을 설정하고, 보안 출처에서 공급업체 서버와 SSL 핸드셰이크를 수행해야 합니다.
타사 서버의 파일을 사용하는 경우 캐싱을 거의 제어할 수 없습니다. 다른 사람의 캐싱 전략에 의존하면 스크립트가 불필요하게 네트워크에서 너무 자주 다시 가져올 수 있습니다.
타사 스크립트 자체 호스트 #
자체 호스팅 타사 스크립트는 스크립트의 로드 프로세스를 더 잘 제어할 수 있는 옵션입니다. 자체 호스팅을 통해 다음을 수행할 수 있습니다.
- DNS 조회 및 왕복 시간을 줄입니다.
- HTTP 캐싱 헤더를 개선합니다.
- HTTP/2 서버 푸시를 활용합니다.
예를 들어 Casper는 A/B 테스트 스크립트를 자체 호스팅하여 로드 시간을 1.7초 단축했습니다.
자체 호스팅에는 한 가지 큰 단점이 있습니다. 스크립트가 오래될 수 있고 API 변경이나 보안 수정이 있을 때 자동 업데이트를 받지 못한다는 것입니다.
서비스 워커를 사용하여 타사 서버의 스크립트 캐시 #
타사 CDN 이점을 유지하면서 캐싱을 더 잘 제어할 수 있는 자체 호스팅의 대안은 서비스 워커를 사용하여 타사 서버의 스크립트를 캐시하는 것입니다. 이렇게 하면 네트워크에서 스크립트를 다시 가져오는 빈도를 제어할 수 있으며 페이지가 주요 사용자 순간에 도달할 때까지 중요하지 않은 타사 리소스에 대한 요청을 조절하는 로드 전략을 만들 수 있습니다. preconnect을 사용하여 초기 연결을 설정하면 네트워크 비용을 어느 정도 완화할 수도 있습니다.