블로그 성능 향상을 위한 Lazyload 설정 방법

블로그 성능 향상

블로그(사이트)의 로딩 속도가 중요하나요?

네, 블로그나 웹사이트의 로딩 속도는 매우 중요합니다. 느린 로딩 속도는 사용자들의 경험을 저하시키고, 검색 엔진 최적화(SEO)에서도 중요한 요소 중 하나로 사이트 점수에 영향을 줍니다.

빠른 로딩 속도는 사용자들이 페이지를 빠르게 접근하고 내용을 쉽게 읽을 수 있도록 도와줍니다. 또한, 사용자들이 웹사이트에서 머무는 시간을 증가시키고 이탈률을 낮출 수 있습니다. 따라서 로딩 속도를 최적화하여 웹사이트의 성능을 향상하는 것은 중요합니다.

Lazyload Analytics

Lazyload는 사이트에 등록된 이미지를 지연로드하기 위해 더 많이 사용하지만 타사코드의 영향을 줄이기 위해 애널리틱스에도 Lazyload를 적용할 수 있습니다. 아래 스크립트를 자신의 블로그에 맞는 애널리틱스 코드로 수정하셔서 사용하시면 되겠습니다.

<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>

스크립트에서 수정해야 하는 부분은 UA-123xxxxxx으로 작성되어 있는 부분을 자신에게 맞는 코드로 수정하시면 됩니다.

스크립트 구조 설명

위에서 설명드렸던 것처럼 이 스크립트는 Google Analytics를 지연로드 하는 데 사용되는 스크립트입니다. 각 부분을 간단히 설명하겠습니다.

lazyAnalytics 변수: 페이지가 스크롤될 때 Google Analytics 스크립트를 지연 로드하기 위한 제어 변수입니다. 스크롤 이벤트에 따라 스크립트가 한 번만 로드되도록 설정됩니다.
gtag() 함수: Google Analytics의 데이터를 추적하기 위해 사용되는 함수입니다. dataLayer.push()를 호출하여 Google Analytics에 이벤트나 데이터를 보냅니다.
window.addEventListener("scroll",...) 이벤트 리스너: 페이지가 스크롤될 때마다 스크롤 이벤트를 감지하여 Google Analytics 스크립트를 지연 로드합니다. 스크롤 이벤트가 처음 발생하면 Google Analytics 스크립트를 로드하고 lazyAnalytics 변수를 true로 설정하여 다시 로드되지 않도록 합니다.
Google Analytics 스크립트 로드: 스크롤 이벤트가 발생하면 동적으로 Google Analytics 스크립트를 로드합니다. 이때, id=UA-123xxxxxx";와 같이 Google Analytics의 추적 ID를 포함한 URL을 사용하여 스크립트를 가져옵니다.
gtag("js", new Date) 및 gtag("config", "UA-123xxxxxx"): Google Analytics 스크립트를 초기화하고 웹사이트의 추적 ID를 설정합니다.

이 스크립트는 페이지가 스크롤될 때마다 Google Analytics 스크립트를 지연 로드하여 페이지의 성능을 향상하고, 사용자 경험을 최적화하는 데 도움이 됩니다. 적용하기 전 html을 백업하시고 진행하시는 것을 잊지 마세요.

블로그스폿 적용 방법

HTML 편집으로 이동합니다.
~~<b:include name='post-analytics'/>~~ 를 삭제합니다.
제공된 Lazyload Analytics코드를 ~~</body>~~ 사이에 붙여 넣습니다.

자신에게 맞는 애널릭틱스 코드로 수정하시는 것을 잊지 마세요.

마무리

해당 스크립트를 적용 후 PageSpeed Insights에서 사이트의 성능을 테스트해 보세요. gtag 항목으로 관련된 타사코드가 표 되지 않을 것입니다. 애드센스 및 애널리틱스 코드를 지연시키는 것만으로도 모바일 기준으로 20-30점 이상의 성능개선효과를 확인하실 수 있습니다.

블로그 성능 향상을 위한 Lazyload 설정 방법