2013-03-11 3 views
4

Google 페이지 스피드는 버튼 스크립트와 같은 내 페이스 북에 대해 불평하고 있습니다. 어떻게 스크립트를 연기 할 수 있습니까?페이 스북 버튼 스크립트와 같은 지연로드

45KiB의 JavaScript는 초기 페이지로드 중에 구문 분석됩니다. 지연 구문 분석 JavaScript를 사용하면 페이지 렌더링 차단을 줄일 수 있습니다. http://static.ak.facebook.com/.../xd_arbiter.php? ... https://s-static.ak.facebook.com/.../xd_arbiter.php (인라인 자바 스크립트의 21KiB)? ... (인라인 자바 스크립트의 21KiB) http://www.facebook.com/.../like.php? ... (인라인 3KiB JavaScript)를

여기에 내가 사용하고 코드입니다 내 페이지의 바닥 글에있는 .js 파일에로드하고 있습니다. (크롬의 관리자를 통해) 다음 스크립트 태그에

(function(d,s,id){ 
     var js,fjs = d.getElementsByTagName(s)[0]; 
     if(d.getElementById(id)){return;} 
     js=d.createElement(s); 
     js.id=id; 
     js.async=true; 
     js.defer=true;//THIS DOES NOT APPEAR TO SATISFY PAGESPEED 
     js.src="//connect.facebook.net/en_US/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js,fjs); 
    } 
    (document, "script", "facebook-jssdk") 
); 

결과 :

<script 
    id="facebook-jssdk" 
    async="" 
    defer="" 
    src="//connect.facebook.net/en_US/all.js#xfbml=1"></script> 
+0

[Socialite.js] (http://socialitejs.com/)는 이것을 매우 쉽게 만들어주는 훌륭한 라이브러리입니다. – Nathaniel

답변

6

사용의 setTimeout 루크!

setTimeout(function() { 
    (function(d,s,id){ 
     // load js 
     ... 
     } 
     (document, "script", "facebook-jssdk") 
    ); 
}, 3000); 

당신은 비동기 또 다른 '스레드'에 부하를 발생하거나

+0

놀라운입니다. Google 페이지 속도 통찰력의 20 포인트는 작은 조종으로 얻었습니다! 고마워! – bluantinoo

3

의 setTimeout 작동를 지연하지만 페이지가이 경우에 (시간 설정 후로드를 완료하면 이후가 진짜 연기 아니에요 수 삼초) 페이지가로드되기 전에 같은 버튼이로드됩니다.

<body onload="FbButtonLoad();"> 

버튼 :

나는 그때 페이지로드에서 실행 body 태그에서 설정 내 자신의 함수 내에서 같은 버튼의에 javscript 코드를 넣고

<script> 
    function FbButtonLoad(){ 
     (function(d,s,id){ 
     // load js 
     ... 
     } 
     (document, "script", "facebook-jssdk") 
    ); 
} 
</script> 

내부를 중첩 내가 컨테이너를 떠난 페이지에 나타납니다 :

<div id="fb-root"></div> 
<div class="fb-like" data-send="true" data-width="350" data-show-faces="true"></div> 
+1

Javascript와 HTML을 분리하기 위해서는'onload' 대신에'FbButtonLoad();'를'$ (window) .load()'에 두는 편이 낫습니다. – Raptor

0

또 다른 약간의 soluti on (HTML5에만 해당)은 DOMContentLoaded에 라이브러리를로드하는 것입니다.

document.addEventListener('DOMContentLoaded', function() { 
    (function(d,s,id){ 
     var js,fjs = d.getElementsByTagName(s)[0]; 
     if(d.getElementById(id)){return;} 
     js=d.createElement(s); 
     js.id=id; 
     js.src="//connect.facebook.net/en_US/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js,fjs); 
    } 
    (document, "script", "facebook-jssdk") 
); 
관련 문제