Отложить загрузку скрипта кнопки «Нравится» в Facebook

Google Pagespeed жалуется на мой скрипт кнопки facebook. Как я могу отложить сценарий?

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

Результаты в следующем теге скрипта (через инспектор Chrome):

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

facebook jquery deferred-loading
person RegEdit    schedule 11.03.2013    source источник
comment
Socialite.js - отличная библиотека, которая делает это невероятно простым.   -  person Nathaniel    schedule 12.03.2013

Ответы (3)


arrow_upward
9
arrow_downward

Используйте setTimeout luke!

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

Вы можете перебросить нагрузку в другой поток для асинхронной обработки или отложить ее.

person ghost    schedule 13.03.2013
comment
это восхитительно. 20 баллов оценки скорости страницы Google, полученные с помощью такой небольшой настройки! спасибо призрак! - person bluantinoo; 16.06.2015
comment
Я так ошибаюсь, когда устанавливаю для этого тайм-аут. Могли бы мы сделать это более динамично + - person coinhndp; 03.04.2020
comment
Если вы просто хотите, чтобы атрибут defer работал, используйте этот код: js.async = true; js.setAttribute('defer', 'defer'); - person Luuk Skeur; 09.11.2020

arrow_upward
4
arrow_downward

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

Я поместил javscript-код кнопки Like в свою функцию и вложил его в

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

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

<body onload="FbButtonLoad();">

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

<div id="fb-root"></div>
<div class="fb-like" data-send="true" data-width="350" data-show-faces="true"></div>
person yoshi    schedule 17.10.2014
comment
лучше поместить FbButtonLoad(); в $(window).load() вместо onload, чтобы отделить Javascript от HTML. - person Raptor; 30.07.2015

arrow_upward
0
arrow_downward

Еще одно немного менее совершенное решение (только 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")
);
person Community    schedule 04.03.2017