성능개선 - Third Party Script Blocks
서비스 기능을 지속적으로 추가하다 보면 사이트 성능이 떨어지는 경우가 발생하게 됩니다.
최근 사내 서비스 성능을
light house를 통해 체크해보니 상태가 생각보다 많이 나빠졌다는것을 확인하게 됐습니다. 이미지 사이즈 등 여러가지 원인이 있겠지만 그 중 한 가지 원인으로는 third party script 로 인한 blocking 으로 인한것으로 파악이 됐습니다.third party script 를 추가하는 목적으로는 광고 , 분석 그리고 소셜미디어 등에 필요한 기능을 실행하는것으로 external url 을 통해 받아오게됩니다. (ex: google tag, facebook pixel, tiktok pixel)
위 경우 최근에 tiktok, google tag manager로 부터 받아온 script들이 blocking을 발생시키고 있는것으로 확인 할 수 있습니다.
Blocking 해결 하는 방법?
그렇다면 blocking을 해결하기 위한 방법은 어떤것들이 있을까요?
async/defer
async , defer 키워드를 활용하면 script 태그가 body 태그 하단에 위치 하지 않도록 할 수 있습니다.async 키워드는 브라우저가 script를 비동기로 다운받도록 해주며 script 다운로드가 완료되면 진행되고 있는 DOM 파싱 작업을 잠시 중단하고 script가 실행된 후 다시 DOM 파싱이 진행되도록 합니다.defer 키워드의 경우 동일하게 비동기로 다운받도록 해주지만 DOM 파싱이 완료가 되어야 실행된다는 차이점이 있습니다. 즉, 완전히 파싱이 된 DOM 혹은 페이지 내 위치해 있는 파일과 상호작용이 필요한 경우 defer를 사용하는것이 좋습니다. 
preload, prefetch, dns-prefetch, pre-connect
preload 는 onload 이벤트를 차단하지 않고 리소스를 가져오는 데 중점을 둡니다. 우선 순위가 높고 초기 설립에 필요한 리소스(예: 웹 글꼴, 이미지 또는 기타 스타일시트)에 사용합니다.prefetch 는 나중에 필요할 수 있는 리소스를 가져오는 데 초점을 맞추고 있습니다. 예를 들어, 사용자의 인증 프로세스를 기다리는 동안, prefetch 를 사용하면 인증되면 다음 페이지에 리소스를 저장하고 렌더링할 수 있도록 준비할 수 있습니다.dns-prefetch 는 브라우저에 도메인의 DNS 확인을 미리 수행하도록 요청합니다 (DNS 조회). 해당 도메인에 연결을 예정이고 초기 연결 속도를 높이고 싶을때, 즉 DNS 조회 지연시간을 줄이는데 유용하게 사용 할 수 있습니다. preconnect 는 HTTP 요청이 서버에 전달되기 이전에 브라우저가 특정 도메인과 연결을 미리 설정한 뒤 필요한 리소스들을 효율적으로 미리 가져와 해당 도메인에 연결하는데 발생하는 지연시간을 줄일 수 있습니다. dns-prefetch 처럼 DNS 조회를 한다는 점이 비슷하지만 추가적으로 TLS negotiations , TCP handshake 이 포함된다는 점에서 차이가 있습니다.그럼 nextjs에서는?
nextJS에서는
Script 컴포넌트가 지원하는 3가지 strategy 를 통해 third party script 들의 로딩 순위를 설정 할 수 있게 해줍니다. 이는 소요 시간을 절약하고 페이지 로딩 성능을 향상 시킬 수 있게 도와줍니다.beforeInteractive 는 페이지가 상호작용이 가능하기 이전에 가져오기 실행해야될 필요가 있는 스크립트들이 있는 경우 사용합니다. 이를 통해 스크립트들은 초기에 HTML내에 삽입되어 자체 번들 javascript가 실행되기 전에 실행됩니다.afterInteractive 는 tagmanager 혹은 분석툴 같이 해당 페이지와 상호작용이 가능해진 이후에 실행되는 경우 사용합니다. 설정된 스크립트들은 클라이언트 사이드에 삽입이 되어 hydration 이후 실행됩니다.lazyOnLoad 는 페이지 load 가 완료된 이후 body 태그 마지막에 스크립트를 추가해줍니다. 참고: