2013-03-11 2 views
4

Google pagespeed жалуется на мой фейсбук как скрипт кнопки. Как я могу отложить сценарий?Отложить загрузку Facebook Like Button Script

45KiB JavaScript разобран при начальной загрузке страницы. Отложить разбор JavaScript для уменьшения блокировки отображения страниц. http://static.ak.facebook.com/.../xd_arbiter.php? ... (21KiB инлайн JavaScript) https://s-static.ak.facebook.com/.../xd_arbiter.php? ... (21KiB однострочного JavaScript) 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

это потрясающе. 20 точек зрения проскальзывания страницы google получили с такой небольшой настройкой! спасибо призрак! – bluantinoo

3

SetTimeout работает, но это не реально Defer, так как если страница по окончании загрузки по истечении установленного времени (в данном случае 3 секунды) аналогичная кнопка будет загружена до завершения загрузки страницы.

Я положил javscript код Одноименные баттона внутри своей собственной функции и вложенные его внутрь

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

затем я поставил его в тело тега для запуска на странице загрузки:

<body onload="FbButtonLoad();"> 

Кнопка появляется на странице, где я оставил ее контейнеры:

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

лучше поместить 'FbButtonLoad();' в '$ (window) .load()' вместо 'onload', чтобы отделить Javascript от HTML. – Raptor

0

Еще несколько менее совершенных растворов 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") 
);