WordPressを高速化するためにテンプレートをStinger3に変更│Blog Recipe

ブログのドメインを変更して以来ずっとアクセス数が低調だったWordPress運営のサイトが年明けから一気に息を吹き返した..と思ったら、またドンと落ちてしまいました。

原因はサイトスピードにあるのでは？
と思い速度アップを図るためのチューニングの記録です。

テンプレートをstinger3に変更

テンプレートはリファインsnowを使用していました。

レスポンシブルではなかったため、WPtouchでスマホとの振り分けを行い、Post-Plugin Library、 Similar Posts、Popular Postsで人気記事や関連記事を表示させていました。

WPtouchがバージョンアップを繰り返し、その都度デザインやアドセンスの張替えが面倒になったこともあり、レスポンシブルデザインのテンプレートの検討をすることにしました。

TCDの最新テンプレートも良いのですが、とりあえず無料のStinger3で様子を見ることにしました。

とりあえず、と書きましたがこのテンプレートはかなり優秀です。

アイキャッチを設定していなかったので、張替えにはちょっと手間取りましたが基本デザインは良いです。Stingerのカスタマイズ記事も多く見かけます。

アイキャッチを設定していない場合、記事中の最初の画像をアイキャッチにする方法が紹介されていました。

その他、今回Stinger3の貼り替えで行なった初期作業です。

Stingerでは日本語パーマリンクを英数字に変換する設定がされています。
過去記事に幾つか日本語パーマリンクで書き出したページが有ったためその設定を無効にしました。

設定はfunctionで行えます。

Twitterのシェアボタンを押した時の@＊＊を表示する設定もついでに行っておきます。

Pocketは気になる記事や読み残しの記事をスマホ、PC、タブレットと簡単に共有できるので自分でもかなり便利に利用しています。

ここは利便性からボタンを入れておきたいです。

sns.phpの＜li＞～＜/li＞の～の部分にPocketの非同期コードを挿入して追加しました。
数表示を避けたいので、data-pocket-count=”vertical”は”none”に設定。

その他、Twitter、Facebookやはてなの数表示も消しました。
こちらの記事参照→Stinger3の初心者向けカスタマイズ #Stinger-WP

ついでに、SNS追尾表示もしばらくはカット。
footer.php <!– ここにsns02 –><!– ここまでsns02 –>の部分です。

STINGER3ではPC用とスマホ用の２つのAdSenseコードをウィジェットから設定できます。

PCサイトは右上と記事下、関連記事の下と３箇所に336×280のレクタングル。
スマホは記事下、関連記事下の２箇所に300×250のレクタングルです。

こちらでも良いのですが、以前の計測ではスマホの広告表示ではタイトル下が効果的だったので、記事本文上に320×100ラージモバイルバナーを配置しました。

この場合、スマホで表示させるようUser-agentの判別を設定する必要があります。
以下の記事を参考にfunctions.phpに条件分岐コードを入れてsingle.phpのタイトル下にAdSenseの切り替えコードを入れました。

Stingerの検索もGoogleカスタム検索に変えます。
参考サイト→2StepでStingerのデフォルト検索をGoogle検索に変更する方法

続いて、プラグイン周りの整理です。

STINGER3はレスポンシブルなのでWPtouchは必要無くなりました。
その他、関連記事も表示されるのでSimilar Postsも必要無くなりました。
ついでにPost-Plugin Library、Popular Postsも消去です。

人気記事の表示はWordpress Popular Postsを新たに導入。プラグインはできるだけ少ないほうが良いという理由からです。

カテゴリーを並び替えるためにCategory Orderを入れていたのですが、
今さらながら知りました・・
WordPress、カスタムメニューで並べ替え出来るようになっていますね。

これも必要のないプラグインでした。

ここまででウェブ計測してみたところ、
ロード時間４~５sで６０台だったグレードが劇的に向上しました。

表示もサクサクです。よけいなプラグインを外した結果でしょうね。

ここのサイトは一足先にStinger３に貼り替えていたのですが、
ここまでの処理はまだしてません。

これからです。