[WP] ブログが重いのでチューニングしてみた [その2]

前回はプラグインに頼って速度改善を狙ったところ、まだまだ改善すべきところがあることにがく然としている @azur256 です。

今回は、とうとうコンテンツの中に踏み込んでみました。といっても大したことはしていないのですが…

何気なく GTMetrix のレポートの詳細をみてみた

GTMetrix の Page Speed レポートの色々な要素の詳細をみてみたら、結局のところアフィリエイトの周辺でリダイレクトやら何やらでコストが掛かっている。これはアフィリエイトの集約とかをやらんとダメだな、とか思いながらつらつらとみていったところ、こんなレポートを発見。

Twitter Widget が同期読み込みになっている…Twitter の Widgets.js は確か非同期に対応したはずなのに何で？と思って、自分のブログのソースを見てみたら snsbox03 の中に以下の記述がありました。

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

1	<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

そういえばカスタマイズで SNS 用のボタンを記事の上下につけたし Twitter ウィジェットも貼っているし、それぞれのところで JavaScript 読み込みをしているのでスリム化できるところですね。対象となる JavaScript は Twitter の表示よりも後ろで読み込まれているのでフッターに持っていって一度だけ読むようにするべきだし、非同期読み込みするようにすべきです。

もしやと思って SNS ボタンのコードをみたら Google+ やはてブ、Pocket、Evernote の部分も同じように JavaScript を読み込んでいますので、ここも何度もリクエストを出しているはず。Google+ と Evernote は実際の表示よりも前にスクリプトを読み込んでいるので、この部分の JavaScript はヘッダ部分に移動させることに、はてブは処理の後ろでスクリプトを読み込んでいるので footer に移動させます。

Pocket のコードは単純ではなかったので JavaScript の書き直しとテストの時間が取れたらやろうと思います。

Twitterとはてブのコードをfooterに移動する

SNS.php にある

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

1	<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

のコードを削除し、WordPress のウィジェットで表示している Twitter Widget の

<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>

1	<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>

の部分も削除します。

その代わりにフッタに以下のコードを挿入します。

<script async src="//platform.twitter.com/widgets.js" charset="utf-8" id="twitter-wjs"></script>

1	<script async src="//platform.twitter.com/widgets.js" charset="utf-8" id="twitter-wjs"></script>

同じように、はてブの以下のコードも削除して

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

1	<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

フッタに移動したのですが、はてブのコードはフッタだとうまく動かなかったのでこれはヘッダに移動しました。

Google+とEvernote用のJavaScriptをヘッダに移動する

Google+は具体的にはこのコード

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

1	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

これをヘッダに移動します(実は、後でもう一度修正します)。Evernote の場合は以下のコードをヘッダに移動します。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

1	<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

これで、JavaScriptの類いは大体整理したつもりだったのですが…

Google PageSpeed Insights でも確認してみた

GTMetrix だけではなく Google PageSpeed Insight でも確認してみました。
PageSpeed Insights

すると、こんな記述がありました。

まだ非同期コードになっていないところがあります。よくよく調べると昔書いた AdSense のコードが残っていたり、Google+ のコードにも非同期コードがあるらしいです。

Google Developer に対応方法が書いてあるページがありました。
Use Asynchronous Scripts – PageSpeed Insights — Google Developers

これは本当に役に立つページ。Google のサービス以外にも非同期コードが紹介されています。これにしたがって、非同期コードにコツコツと修正していきました。

Google AdSense の非同期コードは以下のような形で書けるそうです。
About the asynchronous ad code – AdSense Help

    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
        style="display:inline-block;width:300px;height:250px"
        data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
        data-ad-slot="6440411535"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

<ins class="adsbygoogle"

style="display:inline-block;width:300px;height:250px"

data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"

data-ad-slot="6440411535"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

このスクリプト行はフッターに持っていき、各 AdSense を記述している部分を、この例に従ってサイズと data-ad-client、data-ad-slot を修正していきます。

Google+ のコードも非同期コードにする方法が紹介されていました。
+1 Button – Google+ Platform — Google Developers

先ほどヘッダに持っていった

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

1	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

を、以下のコードに入れ替えるだけです。

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js?onload=onLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js?onload=onLoadCallback';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

結果は…数字には現れませんでした(汗
しかし、プラシーボ効果かもしれませんが、体感的には速くなった気がします。

他にもこんなのを修正しました。

別サイトの画像を見に行ったりしているのは DNS Lookup の時間なども余計に掛かるので極力避けたいですね。

例えば、以下のようなものは過去の名残で Picasa の画像を表示していたので、自サーバに画像を移動させてリンクも変えました。

<img src="http://lh4.ggpht.com/-iXANLusj7wo/T-a9uMYtLzI/AAAAAAAAEvI/P6jplFPncSo/abicase_logo.png" width="160" height="160"/>

1	<img src="http://lh4.ggpht.com/-iXANLusj7wo/T-a9uMYtLzI/AAAAAAAAEvI/P6jplFPncSo/abicase_logo.png" width="160" height="160"/>

こういう細かいものを修正しつつ、アフィリエイトを少し整理したり、Instagram の写真表示とかを整理したりする必要がありそうです。

まだまだ先は長い気がしてきました…

WordPress 関連のエントリ

インストールや設定変更とデータ移行

最後まで読んでいただきありがとうございます。

左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです

Facebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします

RSSリーダへの登録はこちらからどうぞ。

最近,気になったこと...

I Love LEGO, iPhone, Apple and awesome.

Blog

[WP] ブログが重いのでチューニングしてみた [その2]

何気なく GTMetrix のレポートの詳細をみてみた

Twitterとはてブのコードをfooterに移動する

Google+とEvernote用のJavaScriptをヘッダに移動する

Google PageSpeed Insights でも確認してみた

他にもこんなのを修正しました。

WordPress 関連のエントリ

インストールや設定変更とデータ移行

プラグイン

バージョンアップ

カスタマイズ

Stinger 3関連

チューニング

MAMPを使ったバックアップサイトの構築

開発関連

コメントとトラックバック

コメントを残す CANCEL REPLY

フェイスブックでのコメント

URL
TBURL