直帰率を改善せよ！WordPressのカスタマイズ方法とプラグイン

以前までウェブさえのサーバーはロリポップでしたが、「ウェブ系フリーランスをモンスタークライアントから守る契約書」という記事を更新したときに、決められた転送量を遥かに超えるアクセスがあり、一時期ページを開けない状態になりました。

それをきっかけに「sixcore」に移転したのですが、転送量の問題よりも読込時間が速くなったことに感動しました。

サーバーのアップグレードは今回のことではありませんが、今から紹介する方法の土台になったことは間違いありません。

一部の機能を制限した無料版でも充分効果があり、導入後は格段にページの読込時間が短縮されました。

• W3 Total Cache：システムや記事の内容に関わるデータを快適に読み込めるよう色々と役立ってくれます。
• 001 Prime Strategy Translate Acceleratorwarna：元々、外来品のWordPressを日本語へと翻訳するスピードを速めてくれます。
• DB Cache Reloaded Fix：データベースとのやり取りをスピードアップしてくれます。

この３つ、それぞれのインストールからセットアップの方法は、またまた他人様のブログを参考にさせていただきました。本当に丁寧に説明されていて助かりました！

• WordPressのキャッシュ系プラグイン「W3 Total Cache」の設定の一例！
• WordPressの実行時間を短縮させる「001 Prime Strategy Translate Accelerator」
• WordPressで読み込み速度1秒台を実現するために実施した5つの施策

といっても、もともとレスポンシブのテーマを使ってましたが、より細かくスマホに最適化したいところがあり、そのための作業が面倒で先延ばしにしていました。今回やっと実行！スマホで読込むには時間がかかりすぎる部分を非表示にしました。

非表示にする方法は、CSSのメディアクエリで「display:none」にするテクニックが有名ですが、それだと実は見えてないだけで実際の読込は行われています。そのため読込速度を改善することはできません。

なので、phpで訪問者の端末を判定し、スマホの場合は非表示の部分を一切読込まない方法を使いました。

手順としては、まず端末を判定するためのphpコードをテーマのfunction.phpにコピペ。

function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android', // 1.5+ Android
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

それから、テンプレートファイルで、スマホで見せる部分と見せない部分を以下のように分けて記述します。

<?php if(is_mobile()) { ?>
    スマホで見せるところ
<?php } else { ?>
    スマホでは見せないところ
<?php } ?>

作業の途中、スマホからの見え方を確認するにはchromeのデベロッパーツールを使いました。画面上部のメニューから[表示 > 開発・管理 >デベロッパーツール > setting > Overrides > UserAgent]で端末を指定できます。

実際に「Googleアナリティクスのすごい使い方！バブルチャートで検索経由の売上を増やそう」のページを計ってみました。

読込時間はこちら（→ GTmetrix | Website Speed and Performance Optimization）で計れます。読込を遅くする原因を指摘してくれるので便利ですよ。

まだまだ時間はかかってますが、前よりは速くなりました。画像を多用してるのでどうしても遅くなりがちですが、これからはもっと巧く効果的な画像の使い方を考えて改善していきたいですね。

この記事を書き終えたあと、ネットを巡っていると内容がダダかぶりの記事を発見→[ WordPress ] やった！！たった10分で。ほんの3つのプラグインと1つのサービス導入でブログが 200% 高速化しました！ | 覚醒する @CDiP←こちらの方が今までの過程について本記事より詳しく丁寧に説明されてます。必見！

今までの表示方法は、ちょっと複雑な判定方法で関連記事をピックアップしサムネイル画像と一緒にタイトルを表示してました。それを同一カテゴリで新着記事をタイトルだけ表示するシンプルな方法に変えました。同一カテゴリを表示するコードはこんな感じです。プラグインではないので、見た目や表示位置をいじりやすくなってます。

<dl>
	<?php
		foreach((get_the_category()) as $cat) {
			$catid = $cat->cat_ID ;
			break ;
		}
		$thisID = $post->ID;
		$get_posts_parm = "'numberposts=3&category=" . $catid . "&exclude=". $thisID . "'";
	?>
	<dt>あなたにはこんな記事もおすすめ！</dt>
	<dd>
		<ul class="star">
			<?php $posts = get_posts($get_posts_parm); ?>
			<?php foreach($posts as $post): ?>
			<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?></a></li>
			<?php endforeach;
			wp_reset_postdata(); ?>
		</ul>
	</dd>
</dl>

• Yet Another Related Posts Plugin (YARPP)
• WordPress Related Post for Japanese