ブログ03:サイト閲覧者のストレスを軽減してユーザビリティUP!!【後編:サイト表示速度を改善する2つの方法】
Staff

サイト閲覧者のストレスを軽減してユーザビリティUP!!【後編:サイト表示速度を改善する2つの方法】

間が空いてしまいましたが、前回の続きです。

サイトの表示速度、GoogleやYahoo!からの評価……などをチェックできるツールについては、前回の記事でご紹介しました。ので、今回は、そのチェック結果を踏まえて具体的にどうやって改善していくかについて。

前回の記事【前編:サイト表示速度の簡単チェック方法】はコチラ

表示速度の計測方法とか改善方法とかより、そこを改善すると何にイイのかが知りたい!という方は、目次の7のみお読みいただければOKです!

サイト表示速度を改善する2つの方法

前回のおさらいになりますが、特別なスキルを(あまり)必要とせず、なのに効果絶大な改善方法は以下の2つ。

  1. 画像を軽くする
  2. キャッシュ制御

ひとつずつ解説していきます。って「解説」というほどのボリュームもないのですが……決してサボっているわけではないです。それほど簡単にできちゃう(のに効果は絶大)ってことです。

改善方法01.画像を軽くする

例えば、ある画像のサイズが500KBあったとします。
これを例えば200KBくらいにして、アップロードし直す。
これ(またはこの繰り返し)だけです。

WordPressサイトならプラグインを入れてまとめてエイっとやっても、手作業で1画像ずつやっても、やり方はお好みで。

画像ひとつひとつは少ししか軽くなっていなくても、チリも積もれば…ですね。

改善方法02.キャッシュ制御

WordPressで構築したサイトであれば、キャッシュ系のプラグインを入れてしまうのが手っ取り早いです。

キャッシュ系プラグインには、「W3 Total Cache」など有名なものがいくつかありますが、私のオススメは「WP Fastest Cache」。

このWP Fastest Cacheは、

  • 他のプラグインと競合してエラーが出るというガッカリなことが(今のところ)ないという安心感
  • 設定がとても簡単、しかも日本語対応!という手軽さ

により、現時点ではイチ押しプラグインです。

(ただし、キャッシュ系プラグインは、他のプラグインや使用しているテーマなどとの兼ね合いでエラーが出やすいことなどから、自己責任でお願いします)

今回使ったプラグイン

WP Fastest Cache
https://ja.wordpress.org/plugins/wp-fastest-cache/

WordPressのキャッシュを管理できるプラグインは数多くありますが、初心者の方にも使いやすいという観点からもオススメのプラグイン。インストール・有効化後、まずは言語設定で日本語を選択。あとは見たまま設定していくだけなので、とってもラクちんです。

その他のオススメ

計測方法(その他の表示チェックツール)

前回ご紹介したツールのほかにも、表示速度をチェックできるツールはまだまだあります。

Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

表示速度をチェックしてくれるツールのなかで、おそらく最も有名。Googleが無料で提供。ちなみに、WordPressサイトの場合は必須プラグインの影響により100点満点になることはありません。また、Googleアナリティクス、Googleアドセンスに登録している場合も同じく100点にはなりません。まずは70点くらいを目標にすると良いと思います。

Pingdom Website Speed Test
http://tools.pingdom.com/fpt/

スウェーデンの企業が提供する無料ツール。詳細な解析結果を出してくれるのが◎。ちなみに弊社サイトのトップページは2.11秒でした。3秒切っているので、とりあえず合格ラインかな。Googleのトップページは1秒未満。サスガです。

Googleアナリティクスの「サイトの速度」
https://www.google.com/intl/ja_jp/analytics/

Googleアナリティクスを導入しているのなら、コチラで計測するほうがURL入力の手間もないのでラクちんです。ログイン後、左メニューの「行動」→「サイトの速度」→「概要」で確認できます。

改善方法(あと2つの方法)

今回ご紹介した改善方法は2つですが、もっといろいろガッツリやってとにかくスピードアップしたい!という方は、以下もお試しください。

改善方法03.HTTPリクエスト回数を減らす

ページ表示時間の大半は、各パーツのダウンロード時間です。よって、各パーツの数を減らせば、その分だけダウンロードリクエスト回数が減り、表示速度も速くなります。見直すパーツは、画像・CSS・JSです。

改善方法04.ファイルを軽くする

本記事の改善方法01の画像軽量化と同じく、html・CSS・JSの各ファイルも軽くします。具体的には、必要のないスペースや改行などを取り除くだけ。自動圧縮ツールを使うのでも、手作業でも、どちらでもOKです。

改善後の計測結果

改善後の表示速度の計測結果

前回は、1から2への変化をご紹介しましたが、本記事執筆にあたり「改善方法04」までを行ったので、みたび計測。その結果が3です。Yahoo!(左から2番め)とリクエスト回数(一番右)がイイ感じになりました。

しかし、表示速度がやや遅めなのが気になります。前述の「Pingdom Website Speed Test」では2.11秒でしたから、かなり差があります。

というように、計測ツールではじきだされる秒数についてはあくまでも目安程度に。それよりも各ファイルがどれだけ軽くなったか、リクエスト回数はどのくらい減ったかなどの実数のほうが大切です。

まとめ/表示速度が速くなるとメリットいっぱい!

2010年4月から、Googleは「検索順位を決めるアルゴリズムにページ読込速度を取り入れる」ことを正式発表しました。つまり、サイトのパフォーマンスが検索順位に影響を与えるようになったということ。また、「ページの反応が0.5秒遅くなるとアクセス数が20%低下する」とも発表されています。

前者はSEO対策に、後者はユーザビリティに影響し、結果としてコンバージョンや売上などに影響します。これらは、サイトを運営していくうえで無視できないものですし、ビジネス的にも(言うまでもなく)非常に重要なこと。そこに影響大なのですから、ぜひ一度、表示速度のチェックと改善を行ってみてください。

表示速度を高速化して、検索順位アップ、ユーザビリティやユーザーエクスペリエンスの向上、コンバージョン率アップなどにつなげましょう!

自分でやるのは…という方には、モチロンご相談も承ります

Takako Hirakawa
「物書き出身、ファッション風味、Web屋育ち、アウトドア志向」。
1人10役をこなすマルチプレイヤー(ホントはもう少しゆるっとしたい)。
プロフィール詳細はコチラ