사이트 성과를 분석하기 위해서 대부분의 사이트는 구글 어낼리틱스 분석 코드를 적용합니다. HTML에 직접 코드를 입력하기도하고, 플러그인을 적용하기도 합니다.
그런데 이 구글 어낼릭틱스 코드는 애드센스 코드와 함께 사이트 속도를 저하시키는 것으로 유명합니다. 아무리 최적화된 코드를 적용한 플러그인을 적용해도 최소 0.5초이상 느려집니다.
구글 애널리틱스 코드를 적용하면 왜 이렇게 속도가 느려지는 것일까요? 느려지는 것을 최소화하는 방법은 없을까요?
예전에는 어디에 어떤 방식으로 구글 애널리틱스 코드를 입력하느냐로 고민했지만 이것들 사이에는 속도 차이가 그리 크지는 않았습니다. 거의 비슷한 방식으로 구동되기 때문이죠.
여기 How to Load Google Analytics 10x Faster in WordPress라는 글에서는 조금은 다른 방안을 소개하고 있는데요. 사이트 속도 개선에 도움이 될 것 같아 소개해 봅니다.
1. 왜 구글 애널리틱스는 느릴까?
먼저 왜 구글 애널리틱스( Google Analytics )를 적용하면 속도가 느려지는지를 살펴보죠.
1.1. Google Tag Manager + Analytics = 73KB
전문가들의 글을 보면 실제로 우리가 사용하는 구글 애널리틱스( Google Analytics ) 스크립트는 20kb에 불과하지만 실제로 구동되는 gtag.js에 포함된 다른 것들을 모두 포함하면 용량이 73kb에 달한다고 합니다.
솔직히 73kb는 용량이 크다고 할 수는 없습니다. 보통 이미지 하나 크기가 100kb 정도되기 때문에 이미지 하나 정도 늘어난 용량이라고 할 수 있죠.
그렇지만 스피드를 줄이는 것은 이러한 파일 하나 하나 용량을 최적화하는데에서 시작됨을 잊어서는 안되겠죠.
1.2. Third-Party HTTP Requests & DNS Lookups
지금 사용되고 있는 구글 애널리틱스 스크립트는 아래와 같은 형식을 띠고 있습니다.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119755794-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXX-XX');
</script>
이 스크립트는 먼저 www.googletagmanager.com로부터 js 파일을 다운받습니다. 이렇게 다운 받은 스크립트는 다시 www.google-analytics.com으로부터 또 다른 파일을 다운받습니다.
이 스크립트에서 보듯이 두번에 걸쳐 HTTP 요청이 이루어집니다. 그것도 각기 다른 도메인에 말이죠. 브라우져는 두번의 추가 TCP 연결과 DNS Lookup을 수행합니다.
그리고 이 구글 관련 서버는 우리나라에 있는 것이 아닐 가능성이 높으므로 이들 파일을 가져오는데 시간이 걸릴 수 있습니다.
1.3. Browser Cache
GTmatrix와 같은 스피드 측정 사이트의 측정 결과를 살펴보면 구글 어낼리틱스 스크립트 파일들은 오직 2시간 정도만 브라우 캐싱됩니다.
이는 캐싱 시간이 적기 때문에 브라우저 캐싱을 통한 이득을 못 볼 가능성이 높습니다.
2. 어떻게 구글 어낼리틱스를 최적화 할것인가?
위에서 구글 애널리틱스의 문제는 1) 너무 많은 HTTP 요청이 이루어지고, 그것도 각기 다른 사이트에 요청하는 것이며 또한 이들은 한국이 아닌 외국에 서버가 있기 때문에 더욱 느려지며 2) 이런 문제를 어느 정도 줄여줄 브라우져 캐싱 효과도 적기 때문에 느려진다고 진단했습니다.
실제로 많은 요청이 이루어지드라도 캐싱이 확실한 CDN 서비스릉 이용하는 경우 굉장히 빠른 구글 어낼리틱스 속도를 보여준다고 합니다.
한국에서는 비용을 내는 비지니스용 CDN은 확실한 속도를 보장하지만 무료 CDN은 서버가 국내에 있어도 해외에 있는 CDN 서버를 사용하기 때문에 속도 개선 효과가 적거나 오히려 나빠진다고 합니다.
더우기 CDN 사용 시 FFTB 속도가 느려지므로 SEO에 부정적이라는 이야기도 있기 때문에 무료 CDN 사용은 망서려지기도 합니다.
그래서 여기에서 제안하는 방식은 구글 서버로 파일 요청을 보내지 말고, 평소에 자기 서버에 구글 애널리틱스 관련 파일을 가지고 있는 Self Hosting Google Analytics 방식을 제안하고 있습니다.
물론 구글은 이렇게 사용자 서버에서 구글 애널리틱스 파일을 가지고 있으면서 구글 애널리틱스 작동하는 것을 막고 있지만, 이를 회피하는 플러그인들이 있습니다.
2.1. Minimal Google Analytics
이는 기존 73kb에 달했던 구글 애널리틱스 총 용량을 1.5kb로 획기적으로 줄여주는 코드입니다. 이 코드는 아래 주소를 통해서 얻을 수 있습니다.
Minimal Google Analytics Snippet
<script>
(function(a,b,c){var d=a.history,e=document,f=navigator||{},g=localStorage,
h=encodeURIComponent,i=d.pushState,k=function(){return Math.random().toString(36)},
l=function(){return g.cid||(g.cid=k()),g.cid},m=function(r){var s=[];for(var t in r)
r.hasOwnProperty(t)&&void 0!==r[t]&&s.push(h(t)+"="+h(r[t]));return s.join("&")},
n=function(r,s,t,u,v,w,x){var z="https://www.google-analytics.com/collect",
A=m({v:"1",ds:"web",aip:c.anonymizeIp?1:void 0,tid:b,cid:l(),t:r||"pageview",
sd:c.colorDepth&&screen.colorDepth?screen.colorDepth+"-bits":void 0,dr:e.referrer||
void 0,dt:e.title,dl:e.location.origin+e.location.pathname+e.location.search,ul:c.language?
(f.language||"").toLowerCase():void 0,de:c.characterSet?e.characterSet:void 0,
sr:c.screenSize?(a.screen||{}).width+"x"+(a.screen||{}).height:void 0,vp:c.screenSize&&
a.visualViewport?(a.visualViewport||{}).width+"x"+(a.visualViewport||{}).height:void 0,
ec:s||void 0,ea:t||void 0,el:u||void 0,ev:v||void 0,exd:w||void 0,exf:"undefined"!=typeof x&&
!1==!!x?0:void 0});if(f.sendBeacon)f.sendBeacon(z,A);else{var y=new XMLHttpRequest;
y.open("POST",z,!0),y.send(A)}};d.pushState=function(r){return"function"==typeof d.onpushstate&&
d.onpushstate({state:r}),setTimeout(n,c.delay||10),i.apply(d,arguments)},n(),
a.ma={trackEvent:function o(r,s,t,u){return n("event",r,s,t,u)},
trackException:function q(r,s){return n("exception",null,null,null,null,r,s)}}})
(window,"XX-XXXXXXXXX-X",{anonymizeIp:true,colorDepth:true,characterSet:true,screenSize:true,language:true});
</script>
여기에 자신의 애널리틱스 추저코드를 넣은 코드를 HTML에 삽입해 사용할 수 있습니다.
다만 이 방법은 페이지뷰만을 구글에 보내는 것이기 때문에 확실한 속도개선이 있습니다. 그러나 구글 애널리틱스를 통해서 얻을 수 있는 다양한 다른 정보는 포기해야하죠.
2.2. Self Host Google Analytics JavaScript
두번째 방법은 위에서도 언급한 사용자 서버에서 구동하는 self-host Google Analytics 방법입니다.
이는 google-analytics.com/analytics.js 파일을 다운로드해서 your-domain.com/analytics.js 파일에서 작동하도록 하는 것입니다.
이를 지원하는 두가지 플러그인이 있는데요. 그것은 CAOS for Google Analytics 과 WP Rocket라는 캐싱 플러그인을 이용하는 것입니다.
캐싱 플러그인을 사용할 필요가 없다면 CAOS for Google Analytics가 더나은 대안으로 보입니다.
