애널리틱스 코드를 Lazyload하여 블로그 속도를 향상시키는 방법입니다.
애드센스와 마찬가지로 블로그 속도에 영향을 미치는 타사 코드에는 애널리틱스 스크립트도 포함이 되어 있습니다. 이전 글에서는 애드센스 Lazyload 적용 방법에 대해 알아보았는데 이번에는 애널리틱스 스크립트에도 Lazyload를 적용해 보겠습니다.
Lazyload Analytics 적용
아래 형광펜 표시된 부분을 자신의 수정한 후 기존 analytics 코드를 삭제한 후 대체합니다. 이 코드를 적용하면 스크롤 활동이 있을 때까지 analytics.js가 지연됩니다.
<script type="text/javascript">
/*<![CDATA[*/
var lazyAnalytics=!1;function gtag(){dataLayer.push(arguments)}window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyAnalytics||0!=document.body.scrollTop&&!1===lazyAnalytics)&&(function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://www.googletagmanager.com/gtag/js?id=UA-123xxxxxx";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}(),lazyAnalytics=!0)},!0),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-123xxxxxx");
/*]]>*/</script>블로그스팟에 적용하는 방법:
① 테마 - 맞춤 설정 버튼의
아이콘을 클릭하고 HTML 편집으로 이동합니다.
②
<b:include name='post-analytics'/>를 삭제한 후 </body> 위의 코드를 복사하여 붙여넣습니다. 형광펜 표시를 자신의 속성 값으로 변경하는 것을 잊지 마세요!
PageSpeed Insights에서 사이트 속도를 확인해보세요. 성능 항목에 gtag 관련 타사 코드가 표시되지 않을 것입니다.
블로그(사이트)의 로딩 속도는 구글의 검색 결과 순위 요인 중 하나입니다. 애드센스 및 애널리틱스 코드를 지연시키는 것만으로도 모바일 기준으로 20-30점의 개선된 결과를 볼 수 있으니 적용해보세요!