PageSpeed Insights에서 GTM의 JavaScript 파일을 줄이는 방법

Google Tag Manager (GTM) JavaScript(JS) 파일은 웹사이트 방문자의 행동을 추적하고 분석하는 데 유용합니다. 하지만 과도한 JS 파일은 웹사이트의 성능과 기능에 심각한 영향을 미칠 수 있습니다.

이러한 JS 코드는 웹사이트 로딩 속도를 저하시켜 고객 경험을 악화시킵니다. 게다가 Amazon의 연구에 따르면 페이지 로딩 시간이 100ms 지연될 때마다 매출이 1% 감소한다는 사실을 알고 계셨나요? 따라서 웹사이트의 JS 파일을 줄이는 것은 매우 중요합니다.

이 글에서는 컨테이너 감사부터 서버 추적으로의 전환에 이르기까지, GTM JS 파일 수를 줄이기 위한 솔루션을 안내해 드립니다.

GTM에서 JS 파일을 최적화할 때 얻을 수 있는 가장 주된 이점은 웹사이트 로딩 속도의 획기적인 개선입니다.

각 JS 파일을 로드하려면 별도의 HTTP 요청이 필요하며, 이러한 파일이 많을수록 더 많은 요청이 발생합니다. 이는 사용자 측면에서 웹사이트 콘텐츠 로딩 지연으로 이어져 이탈률을 높일 수 있습니다. 또한 웹사이트 자체에는 SEO 순위 하락 및 웹사이트 트래픽 감소라는 직접적인 결과로 이어질 수 있습니다.

JS 파일을 줄이면 HTTP 요청 수가 감소하여 웹사이트 로딩 속도가 빨라집니다.

GTM 파일은 일반적으로 PageSpeed Insights 보고서의 다음 섹션에서 발견됩니다:

• 서드파티 코드의 영향 줄이기
• Google Tag Manager의 사용하지 않는 JavaScript 줄이기

문제가 있는 섹션을 클릭하여 해당 항목으로 바로 이동하십시오.

서드파티 JS 코드를 사용하면 다양한 사용자 행동(클릭, 스크롤, 콘텐츠 공유 등)에 대한 추적을 설정할 수 있습니다. 그러나 웹사이트 속도에 영향을 미치며, 웹페이지에 가장 큰 부하를 주는 요인 중 하나가 되는 경우가 많습니다.

GTM 파일 문제를 해결하려면 다음 솔루션을 적용해 보십시오:

웹사이트 성능 분석에 더 이상 필요하지 않은 태그가 있을 수 있으므로 GTM 컨테이너의 모든 태그를 검토하십시오. 이 간단한 단계만으로도 서드파티 코드 수와 웹사이트 부하를 줄이는 데 도움이 됩니다.

이 작업을 완료하려면 GTM.Tools를 사용하는 것이 좋습니다. 여기에서 컨테이너를 점검하고 작업공간 콘텐츠를 수정하거나 일괄 업데이트할 수 있습니다.

Custom HTML 태그는 개인화된 특정 추적 설정에 유용하지만, 용량이 지나치게 큰 경우가 많아 실행 시 웹사이트 로딩 시간에 악영향을 미칩니다. 사용 중인 맞춤 태그를 검토하고, 보다 최적화된 GTM 템플릿으로 전환해 보십시오.

CDN은 웹사이트 데이터를 캐시하고 방문자와 더 가까운 서버에서 특정 페이지를 전송합니다. 이를 통해 JS 파일을 더 빠르게 제공할 수 있습니다.

페이지가 로드될 때 모든 태그가 즉시 실행되어야 하는 것은 아닙니다. 실행을 지연할 수 있는 태그에는 태그 시퀀싱을 설정하십시오. 태그 시퀀싱을 사용하면 지정된 "기본" 태그가 실행되기 직전이나 직후에 실행할 태그를 지정할 수 있습니다. 이 옵션을 찾으려면 지연하려는 태그의 “Advanced Settings”로 이동하십시오.

Custom HTML 태그를 줄이거나 일부 태그를 삭제하는 방법이 적합하지 않다면, 서버 측 추적을 시도해 보는 것을 권장합니다. 

작동 방식은 다음과 같습니다. 서버 측으로 전환하면 웹에서 서버 컨테이너로 모든 GTM 태그를 이전합니다. 이 태그들은 사용자 브라우저 내부 대신 서버 컨테이너에서 로드됩니다. 이를 통해 웹사이트 로딩 속도가 향상됩니다.

사용하지 않는 JS 코드는 페이지를 렌더링(페이지 콘텐츠를 로드하고 표시)하는 데 필요하지 않은 코드입니다. 이 코드는 JavaScript 번들 크기를 늘려 웹사이트 로딩 속도를 저하시킵니다.

이 문제를 해결하는 가장 효과적인 방법은 GTM 컨테이너를 감사하고 불필요한 태그를 삭제하는 것입니다.

하지만 PageSpeed Insights의 이 섹션에서 이러한 JS 파일을 완전히 제외할 수는 없을 가능성이 높다는 점을 유념하십시오. 

일부 변수 유형은 GTM 자체의 일부일 수 있으며, 일반적으로 GTM이 작동하는 데 필요합니다. 이러한 변수에는 Auto Event Variable, DOM Element, Element Visibility 등이 포함됩니다. 컨테이너에 이러한 변수를 직접 추가하지 않았더라도 PageSpeed Insights에서 “사용하지 않는 JS 코드”로 표시될 수 있습니다.

이러한 변수는 GTM 라이브러리의 일부이며, 이를 삭제하면 코드가 손상되어 GTM이 비정상적으로 작동하거나 전혀 작동하지 않을 수 있습니다.

GTM 라이브러리의 일부이자 GTM 작동에 필수적임에도 불구하고 왜 “사용하지 않는 JS 코드”에 나타날까요? 컨테이너에 해당 유형의 변수가 없기 때문에 PageSpeed Insights가 이를 사용하지 않는 코드로 표시하는 것입니다. 이는 오직 GTM 라이브러리에만 포함되어 있습니다.

보시다시피 GTM JS 파일과 관련하여 겪을 수 있는 근본적인 문제는 정리되지 않고 과부하된 컨테이너에서 비롯됩니다. 핵심 해결책은 컨테이너 크기를 모니터링하고 제때 불필요한 태그를 삭제하는 것입니다.

GTM 컨테이너 크기를 모니터링하는 방법에는 두 가지가 있습니다:

브라우저에 Get Google Tag Manager Size 확장 프로그램을 추가하고, 확인이 필요할 때 웹사이트에서 바로 사용하십시오.

이 확장 프로그램은 컨테이너 크기를 표시하고 변수, 태그 및 트리거 수에 대한 세부 정보를 제공합니다.

아래 링크를 사용하여 GTM 컨테이너 크기를 확인하십시오. URL의 “YOUR_ID” 부분 대신 컨테이너 ID를 입력하십시오(GTM에서 “Workspace”를 클릭하면 ID가 표시됩니다).

https://www.googletagmanager.com/gtag/js?id=YOUR_ID

결과 페이지가 표시되면 해당 내용을 TextEdit(Mac OS의 경우) 또는 Notepad(Windows OS의 경우)에 복사하여 붙여넣으십시오. 그러면 이 파일의 크기를 확인할 수 있으며, 이것이 바로 GTM 컨테이너의 크기입니다.

GTM 컨테이너 크기는 언제 확인해야 하나요?

컨테이너 크기 한도는 200 KB이지만, 140 KB에 도달하면 GTM에서 경고를 표시합니다. 물론 웹사이트 성능에 영향을 주지 않으려면 컨테이너 크기를 이보다 훨씬 작게 유지하는 것이 좋습니다.

GTM 코드가 웹사이트 성능에 미치는 영향을 관리할 수 있도록, 대규모 변경 사항이 있거나 트래킹을 설정한 후에는 특히 수시로 컨테이너 크기를 모니터링하는 것이 좋습니다.

과도한 GTM JS 파일은 PageSpeed Insights에서 웹사이트의 성능 점수를 크게 떨어뜨릴 수 있습니다. 이러한 코드는 로딩 속도를 저하시켜 이탈률을 높이고 SEO 순위를 악화시킵니다.

GTM JS 파일 수를 줄이는 가장 효과적인 방법은 크기를 제어하고, GTM 컨테이너를 감사하며, 불필요한 태그를 삭제하는 것입니다. 하지만 태그 수를 줄여도 문제가 해결되지 않는다면 클라이언트 사이드 대신 서버 사이드 트래킹을 고려해 보시는 것을 권장합니다. 서버 사이드를 이용하면 모든 GTM 태그가 브라우저 대신 서버 컨테이너에 로드되므로 웹사이트 로딩 속도가 빨라집니다.