WordPressで作られたWebサイトの表示速度を早くするためにできること

Posted under - WordPress

28

WordPress 楽しんでますか? 今回は WordPress で作られたWebサイトを少しダイエットさせて、表示速度を早くするために、やっておいたらいいかもしれない Tips をいくつかご紹介します。

WordPress Speed Up
私は WordPress が大好きなので、もちろんこのブログも WordPress で作っています。でも WordPress は PHP で作られているブログツール。ブラウザで表示されている Webページは、PHP によって動的に作られた HTMLです。

Webページを表示するたびに、Webサーバの中で PHP が働き、HTMLを吐き出しているので、最初からHTMLで書かれた Webページに比べて、表示が遅くなる傾向があります。

私のブログは、毎日のアクセスがそれほど多い訳ではないので、それほど神経質にはなっていませんが、一時キャッシュ系のプラグインの使用と、その他にもいろいろ工夫をしたりしているのでご紹介します。

WordPress スピードアップ 目次

  1. 一時キャッシュ系のプラグインを使用する
  2. プラグインやウィジットは厳選して必要なものだけ
  3. HTMLで書けるところはHTMLで
  4. データベースを最適化

1. 一時キャッシュ系のプラグインを使用する

通常 WordPress で作られた Webサイトにアクセスすると、PHP がデータベースを読みに行って、それから HTML を吐き出します。

一時キャッシュ系のプラグインを使うと、Web ページのコピーを一時的に作ってくれて、それをユーザーに表示するっていうイメージです。毎回 PHP がデータベースを読みにいってから HTML を吐き出す … という一連のサイクルが省略されるので、表示スピードがアップします。

一時キャッシュ系プラグインを使った場合

ユーザーがアクセスしてから、ページが表示されるまでのイメージです。

2010年9月くらいの Tutorial9 の記事ですが、WordPress の一時キャッシュ系のいろんなプラグインを使った時と、使っていない時とのパフォーマンスの違いをレポートしています。プラグインを選ぶ時の参考になると思います!

上記のブログでも紹介されていますが、以下のプラグインあたりが人気みたいです。

また、PCブラウザ用と iPhone、iPad 用など、複数のテーマを設定している人は、導入に注意が必要ですね。そのまま導入すると、iPhone でアクセスしても PC 用のページ(キャッシュされているページ)が表示されてしまう、またはその逆も起こってしまうこともあるようです。

2. プラグインやウィジットは厳選して必要なものだけ

WordPress には便利なプラグインがたくさんあって、いろいろ試しているうちにどんどん増えていきます。でも、プラグインが増えれば、その分ファイルのインクルードが増えて、表示速度に影響するようです。Javascript でできるものは Javascript で対応したりして、プラグインはできる限り厳選して必要なものだけにしています。

プラグインは厳選して必要最低限

また、私はウィジットも使ってません。サイドバーに最近の記事を表示したり、タグクラウドを表示したり、カレンダーを表示したりする必要があるときは、sidebar.php に直接コードを書いています。

Attention

コードの中で、非推奨になった引数を使っていました。テンプレートタグ – query_posts の引数 showpostsposts_per_page の導入により非推奨となっています。なのでコードの一部を修正させて頂きました。

Attention

query_posts 関数は、メインの WordPress ループだけを変更するためのものです。新たなループを作るためのものではありません。メインループの他にループが必要な場合は、別の WP_Query オブジェクトを作ってください。メインループの他で query_posts を使用すると、メインループが不正な状態になり、期待する結果が得られません。

2.1. サイドバーにカテゴリーを表示する

カテゴリーを表示するテンプレートタグ、wp_list_categories を使えば、簡単にカテゴリーを表示できます。

でも、カテゴリーの表示順は、ID順、アルファベット順、投稿が多い順など、ソートするルールが決まっていて、自由に並び順を指定できる訳ではないので注意が必要です。詳しくは WordPress Codexを参照してくださいね。

sidebar.php
<ul class="category">
  <?php wp_list_categories('show_count=1&title_li='); ?>
</ul>

2.2. カレンダーを表示する

カレンダーを表示したい箇所にテンプレートタグ、get_calendar を記述するだけです。

sidebar.php
<?php get_calendar(); ?>

2.3. 最近の記事を表示する

showposts=5 は、記事を 5件表示するという意味です。posts_per_page=5 は、記事を 5件表示するという意味です。

テンプレートタグ、query_posts は使わずに、WP_Query 関数で新しいオブジェクトを作りましょう。

sidebar.php
<ul class="recent-post">
<?php 
$args=array( 'posts_per_page'=>5 );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><?php the_title(); ?></a><br />
    <span class="date"><?php the_time("j M,Y") ?></span>
    <span class="comments_number"><?php comments_number('0', '1', '%' ); ?></span>
  </li>
<?php endwhile; wp_reset_postdata(); ?>
<?php } ?>
</ul> 

2.4. ランダムに記事を表示する

記事の中からランダムに記事を表示します。showposts=5 で表示件数を変更できます。posts_per_page=5 で表示件数を変更できます。

sidebar.php
<ul class="randam-post">
<?php 
$args=array( 'posts_per_page'=>5, 'orderby'=>rand );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><?php the_title(); ?></a><br />
    <span class="date"><?php the_time("j M,Y") ?></span>
    <span class="comments_number"><?php comments_number('0', '1', '%' ); ?></span>
  </li>
<?php endwhile; wp_reset_postdata(); ?>
<?php } ?>
</ul> 

2.5. 人気の記事を表示する

コメントの多い順に、記事のタイトルなどを取得します。さっきのコードとほとんど同じですねー!'orderby' => 'comment_count' とするだけで OK です。

sidebar.php
<ul class="randam-post">
<?php 
$args=array( 'posts_per_page' => 5, 'orderby' => 'comment_count' );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><?php the_title(); ?></a><br />
    <span class="date"><?php the_time("j M,Y") ?></span>
    <span class="comments_number"><?php comments_number('0', '1', '%' ); ?></span>
  </li>
<?php endwhile; wp_reset_postdata(); ?>
<?php } ?>
</ul> 

2.6. リンクを表示する

管理画面で設定できるリンクを表示します。テンプレートタグ – wp_list_bookmarks を使えば簡単に表示できます!

下の例は、リンクカテゴリーを問わずリンクを表示していますが、リンクカテゴリーのタイトルを表示したり、表示する数を制限したりと、いろんなオプションも用意されています。リンクに画像を登録してあれば、画像を表示することだってできます。

sidebar.php
<ul class="blogroll">
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>

2.7. アーカイブを表示する

アーカイブはテンプレートタグ – wp_get_archives で表示できます。最近 12ヶ月とか、最近 15日など、いろんな表示方法もオプションで用意されています。下の例では、最近 12ヶ月を記事数とともに表示しています。

sidebar.php
<ul class="archives">
<?php wp_get_archives('type=monthly&limit=12&show_post_count=true'); ?>
</ul>

2.8. 検索フォームを表示する

検索フォームを表示したい部分に searchform.php をインクルードするだけです。もしテーマファイルの中に searchform.php がなくても、WordPress のコアによって、自動的に検索フォームを出力します。

ex – header.php
<?php include (TEMPLATEPATH . '/searchform.php'); ?>

2.9. ツイッターのつぶやきを表示する

ツイッターのつぶやきも、API が用意されてるのでプラグインなしで表示できます。

ex – sidebar.php
<ul id="twitter_update_list"><li>Loading ...</li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/WebDesignRecipe.json?callback=twitterCallback2&amp;count=3"></script>

WebDesignRecipe の部分は、あなたのツイッターアカウントに変更してくださいね。それから、最後の行、count=3 の部分 … 3件のツイート表示になっているので、お好みで変更してください。

2.10. ツイートボタンを表示する

ツイッターの公式ツイートボタンを表示します。

ex- single.php
<div class="tweeter-button">
  <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  <a href="http://twitter.com/share" class="twitter-share-button"
  data-url="<?php the_permalink(); ?>"
  data-text="via @WebDesignRecipe :<?php the_title(); ?>"
  data-lang="en"
  data-count="vertical">Tweet</a>
</div>

ボタンの形やツイートに含めるテキストなども変更できます。WebDesignRecipe の部分は、あなたのツイッターアカウントに変更してください!


他にもタグクラウドを表示したり、最近のコメントを表示したり … プラグインやウィジットを使わなくても、できる事ってたくさんありますよ。

3. HTML で書けるところは HTML で

WordPress の便利なテンプレートタグに、bloginfo があります。テーマ内のあちこちで bloginfo は使われていますが、特に headr.php 内で多く見かけます。ご存知の通り、bloginfo タグはブログの名前や、URL などを出力してくれるので、とても重宝しますが、その値はいつも決まっていて、これから先も変る事がない場合がありますよね。

ブログのタイトルや、ドメインを変更する予定がなければ、テンプレートタグを使わずに、そのまま HTMLで書いてしまえば、その分サーバの負荷が減って表示スピードもアップするかも … という考えです。

静的なHTMLの場合

このブログを例にしてみると …

  • bloginfo(‘name’):ブログの名前 → Webデザインレシピ
  • bloginfo(‘url’):ブログのURL → http://webdesignrecipes.com/
  • bloginfo(‘stylesheet_url’):スタイルシートのURL
    bloginfo(‘stylesheet_directory’):スタイルシートのディレクトリ
  • bloginfo(‘rss2_url’):RSSのURL → http://webdesignrecipes.com/feed/

などなど …。これらはこの先変更する予定がないので、そのまま HTMLで書いてたりします。ちょっと古い記事ですが、この辺りのコードをコリスさんでわかりやすくまとめられています。

Memo

bloginfo についてはこんな記事も参考になります!

4. データベースを最適化

ブログを続けていくと、時間が経つにつれてデータベースが散らかってきます。コンピューターのハードディスクをデフラグするみたいに、データベースもときど最適化して整理整頓しましょう!

データベースを最適化

WordPress のデータベースを最適化するには、WP-DBManager というプラグインが便利です。最適化してくれるだけではなく、メインの機能はデータベースのバックアップです。なので、すでにインストールしている人も多いんじゃないかなーと思います。

WP-DBManager の管理画面

データベースの最適化

ダッシュボート → データベース → データベース最適化 をクリックすると、データベース内のテーブルが表示されます。データベース内に WordPress のテーブル以外があると、それも全て表示されます。最適化したいテーブルを選んで最適化ボタンを押すだけです。月に一度はデータベースを最適化したいですね!

WordPress Plugin Directory

WP-DBManager


他にもスパムコメントは放置しないで削除するとか、CSS ファイルを小さくするなど、いろんな Tips が LINE25 で紹介されています。この記事を書くのにも参考にさせてもらってます。

他にもこんな風にしたらいいぞーというのがあったら、ぜひ教えてくださいね!

Comments

Thank you for the comment.