1

ページの読み込みが遅くなるのを防ぐために、ページ上のすべての Facebook/Twitter/Google 道具を非同期的に読み込もうとしています。それを行うための正しいコードがあると思いましたが、機能していないようです。

コードのすべてのビットは、次のように php インクルードにまとめられています。

    <!-- Facebook -->
<div id="fb-root"></div>
<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=xxxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<!-- Google +1 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'en-GB'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- Twitter -->
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>

<!-- Analytics -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

webpagetest.org でページをテストすると、ページの読み込み時間は約 5 秒で、ページが完成する前に facebook などへのリクエストが大量に発生していることがわかります。スクリプトを削除すると、ページの読み込みはより立派な 1.9 秒に低下します。

私ですか？

4

3 に答える 3

1

できることは 1 つあります。

<html>
    <head>
    </head>
    <body>
      ....
      ....
      <script src='http://....'/>
      <script src=''/>
    </body>
</html>

ページの重要なコンテンツをロードした直後にスクリプトをロードします。この方法で、コンテンツとスクリプトを優先して読み込むことができます。

于 2012-08-17T12:58:06.053 に答える
1

JavaScript のdefer属性を使用することもできます。

<script defer="defer"></script>
于 2012-08-17T13:00:51.733 に答える
1

最新のブラウザでは、使用することもできます

<script type="text/javascript" async src="..."></script>

于 2012-08-17T13:02:08.840 に答える