블로거 인라인 스크립트 파싱 지연하는 방법

Google Developers에서 제공하는 PageSpeed Tools에서 페이지 속도를 높이는 방법들 중 하나는 자바스크립트를 지연하는 것이다. 자바스크립트를 지연하는 방법에는 여러가지가 있지만 블로거 템플릿에 사용된 인라인 스크립트를 지연하는 방법을 소개한다.

구글에서 제시하는 가장 기본적인 스크립트 지연 소스를 이용하여 브라우저의 현재 주소를 불러오고 그 주소 내에 인라인 스크립트를 지연하는 방식이다.

인라인 스크립트는 외부에서 링크를 통해 불러 들이는 것이 아닌 템플릿 내에서 작성된 스크리트를 말한다. 아무래도 HTML과 CSS가 스크립트 보다 먼저 로딩되는 것이 페이지 로딩이 빨라 졌다 느끼게 된다.

따라서 인라인 스크립트 역시 지연을 시켜 효과를 볼 수 있다. 하지만 요즘 같이 빛 처럼 빠른 인터넷을 사용하는 환경에서는 무의미 할 수 있으며 인라인 스크립트를 많이 사용하지 않는 템플릿에서는 아래 소스가 사용 될 가치는 극히 적을 것이다. 적용하기 위해서는 아래 스크립트를 템플릿 </head>에 붙여넣는다.

---

블로거 인라인 스크립트 파싱 지연하는 스크립트

<!-- 블로거 인라인 스크립트 파싱 지연 시작 -->
<script type='text/javascript'>
 // Add a script element as a child of the body
 // 스크립트 요소를 body의 자식으로 넣는다.
 function downloadJSAtOnload() {
 var this_url = document.location.href;  <!-- 현재 주소 불러오기  -->
 var element = document.createElement(&quot;script&quot;);
     element.src = this_url;  <!-- 위에서 불러온 현재 주소를 적용 -->

document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 // 브라우저에 따라 이벤트 핸들링 명령을 달리 한다.
 if (window.addEventListener)
 window.addEventListener(&quot;load&quot;, downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent(&quot;onload&quot;, downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script> 
<!-- 블로거 인라인 스크립트 파싱 지연 끝 -->