Google Page Speed Prefer asynchronous resources (Facebook)- loads http://connect.facebook.net/en_GB/all.js synchronously.

最近為自己的網頁http://sharechiwai.com 加上了 Facebook social plugin
希望大家給我多一些 Like 多一些我
誰不知 當我使用Google Page Speed我測試 sharechiwai.com的性能時
卻出現了以下的建議

Prefer asynchronous resources – Fetching resources asynchronously prevents those resources from blocking the page load.
Suggestions for this page

The following resources are loaded synchronously. Load them asynchronously to reduce blocking of page rendering.
http://localhost:8080/sharechiwai/lookforhk loads http://connect.facebook.net/en_GB/all.js synchronously.

load http://localhost:8080/sharechiwai/lookforhk loads http://connect.facebook.net/en_GB/all.js synchronously.
是存取facebookJavascript Plugin 的方法所導致的


   <script>(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_GB/all.js#xfbml=1&appId=277649966574";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        

做了一會兒research 之後找到了解決方法了

解決方法:
原來這個facebook Javascript Object 上有一個async的屬性 property
我們只要把他設定為 true便可以解決
e.g.

js.async=true;

loads http://connect.facebook.net/en_GB/all.js synchronously.“的問題了


   <script>(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; //<--ASYNC = TRUE
            js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=277649966574";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

Hope you find it useful

Leave a Reply