theinnovators웹사이트에서 필수적으로 사용하는 서드파티(3rd-party) 스크립트는 페이지 성능 저하의 주요 원인이 된다. Partytown은 Web Worker 기술을 활용하여 이들 스크립트를 메인 스레드 밖에서 실행함으로써 성능 병목을 효과적으로 해결한다.
작동 원리
웹 브라우저는 기본적으로 단일 스레드 환경에서 동작한다. 즉, 렌더링, 사용자 이벤트 처리, 자바스크립트 실행이 모두 한 줄의 작업 흐름(Main Thread) 안에서 차례차례 처리된다.
이 환경에서 Google Analytics, 광고 SDK, 챗봇 등 서드파티 스크립트가 실행되면, 메인 스레드를 차지하면서 페이지 렌더링이 지연되거나, 사용자 인터랙션 반응이 늦어지는 문제가 발생한다.
Partytown은 이 문제를 해결하기 위해, 서드파티 스크립트를 Web Worker라는 브라우저의 백그라운드 스레드로 이동시킨다.
메인 스레드에서는 사용자 코드만 처리하고, 외부 스크립트는 워커에서 실행되므로, 병렬 처리 구조가 만들어진다.
기존 방식 vs Partytown 방식
- 왼쪽 (기존 방식): 사용자 코드(파란색)와 외부 스크립트(주황색)가 메인 스레드에 몰려 있어 병목 발생.
- 오른쪽 (Partytown 적용): 사용자 코드는 메인 스레드, 서드파티 스크립트는 워커 스레드에서 독립적으로 실행되어 성능 향상.
👉 핵심은 “역할 분리”다. 사용자 경험에 직접적인 영향을 주는 렌더링과 인터랙션 로직은 메인 스레드에서 처리하고, 상대적으로 중요도가 낮은 외부 스크립트는 워커로 분리해 실행함으로써 메인 스레드를 가볍게 유지하는 것이다.
기술적 특성 및 장점
- 병목 제거: 메인 스레드에서 서드파티 스크립트를 분리하여 렌더링 지연 현상 감소
- 성능 최적화: 초기 로딩 속도 개선, 사용자 반응성 향상
- 유연한 통합: Next.js, Astro, Nuxt, SvelteKit 등 다양한 프레임워크에서 사용 가능
- 간단한 도입: 기존
<script>태그를type="text/partytown"으로 변경하는 방식으로 쉽게 적용 가능
활용 사례
- Google Analytics, AdSense 등 분석 및 광고 스크립트
- 마케팅 자동화 툴, 챗봇 삽입 스크립트
- 사용자 트래킹, A/B 테스트, 소셜 미디어 위젯 등
Partytown은 JavaScript 기반 웹 페이지에서 흔히 발생하는 성능 병목 문제를 구조적으로 해결할 수 있는 기술이다. 특히 단일 스레드의 한계에 접근하는 현실적인 대안으로, 웹 워커를 적극적으로 활용해 렌더링 성능을 확보하고 사용자 경험을 개선한다.
빠른 초기 로딩, 끊김 없는 사용자 인터랙션을 필요로 하는 SPA 또는 마케팅 중심 웹사이트에 효과적인 적용이 가능하다.
TI Tech Lab 김준수 연구원
Source
- https://www.builder.io/
- https://partytown.qwik.dev/
- https://medium.com/@shivam_99875/boosting-javascript-web-performance-with-partytown-82c510f8a88a
- https://www.youtube.com/watch?v=Bb05tF8x-xI
Add comment