Web Worker

LCP를 중점으로 웹 성능최적화를 위해 Web vitals를 활용해서 분석하고 있던 중, 사용하지 않는 자바스크립트 줄이기에 관심을 갖게 되었다.

홈페이지에서 Google Tag Manager를 사용하고 있는데 이 부분이 문제가 되었던 터라 어떻게 해결을 할 수 있을 지 고민이 되었다.

그래서 여러가지 서치한 결과 Web Worker라는 걸 알게 되었다.

Web Worker란?
Web Worker는 스크립트 연산을 백그라운드 스레드에서 쉽게 할 수 있도록 도와주는 기능이다.
자바스크립트는 싱글 스레드이지만 웹 브라우저는 싱글 스레드가 아니다. 그리고 멀티 스레딩을 지원한다. Worker는 JS가 제공하는 기능이 아닌, Web API기능으로 브라우저에서 제공할 수 있는 추가 스레드를 이용해서 병렬 처리가 가능하다.

웹 API의 일부 함수는 멀티 스레드로 처리가 되는 것도 있지만, 사용자가 직접 데이터를 처리하는 부분은 싱글 스레드에서 동작되므로 데이터 처리가 많아질수록 병목현상이 생겨 렌더링 프레임에 영향을 미치게 된다.

이런 병목현상을 처리하기 위해서 Web Worker를 사용하게 된다.

다행이 Next.js에서 실험단계이지만 Script에서 Web Worker를 할 수 있도록 지원하는 기능이 있었다.

GTM이 있는 Script에 strategy="worker"를 추가하여 확인한 결과

import Script from 'next/script'
 
export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

확실히 리소스를 줄일 수 있었다.
224KiB -> 158KiB
66KiB 감소

참고
https://medium.com/hcleedev/web-web-worker-%EC%82%AC%EC%9A%A9%EB%B2%95%EA%B3%BC-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-webpack-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%AC%B8%EC%A0%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%AA%A8%ED%82%B9-2d77c5b23afe

https://tech.kakao.com/2021/09/02/web-worker/