WordPress高速化|1秒前半で表示する誰でもできる簡単な方法

20160510-151
  • このエントリーをはてなブックマークに追加

WordPress の数少ない欠点の一つは、サイトの表示速度が遅くなりがちになってしまうということだ。

そして、サイトの表示速度はユーザビリティだけでなく、SEOにとっても重要だ。

そこで、このページでは、WordPressの初心者でも簡単にできることだけで、表示速度を大きく高める方法をご紹介する。

弊社でテストサイトを作り、デフォルトの状態と、全ての設定完了後の表示速度を、Googleの PageSpeed Insights で比較してみたところスコアが30ポイント近くも改善された。(※下図参照)

Page-Speed-Insight

また、GTMetricsのスコアも非常に大きく改善され、ページの表示速度が1秒台前半にまで高まった。

GTMetrics-data


・テストサイトのサーバーは、WordPressのインストール方法でご紹介したX2サーバーを使用。
・テーマはデフォルトの Twenty twelve を使用。
・PageSpeed Insightsではトップページを計測。
・GTMetrics では記事ページを計測。

いかがだろうか?

どれも驚くほど簡単に設定できることだけで、サイトのパフォーマンスを上げることができるので、あなたも実践してみて欲しい。

1.なぜサイトの表示速度が重要なのか?

最初に、なぜWordPressの表示速度を上げることが大切なのかを、あらためて把握しておこう。その理由は大きく分けて2つだ。

1−1.ユーザビリティが上がる

インターネットリサーチの業界で著名な Nielsen Norman Group はサイトの表示速度に関して以下のように言及している。

数秒の遅延ですら、ユーザーエクスペリエンスを不愉快なものにするには十分である。サイトの表示速度を0.1秒も削れば、コンバージョンレートは大いに上がる。

Website Response Times(英語) “

あなた自身も、表示の遅いサイトに多少いらいらした経験はあることだろう。そして、あまりにも表示が遅いと、そのページを開くことを諦めるはずだ。

実際に、表示スピードが1秒を超えると、ユーザーの注意力が散漫になり、どれだけ良いコンテンツを作っていたとしても、それがじっくり読まれる可能性が大きく下がる。そして10秒を超えると、ユーザーはほぼ確実にサイトから離れてしまう。

1−2.SEOに好影響を与える

Google は” Using site speed in web search ranking (英語)“で、サイトの表示速度が検索順位を決める重要な要素の1つであることを明言している。

その理由はクローラーにある。

検索順位の決定には、クローラーといわれるロボットが大きな役割を担っている。そして、表示速度が早いサイトほど、クローラーが効率的に巡回できるようになるのだ。一方、表示速度が遅いサイトにクローラーがアクセスしようとすると、通常よりもクローラーの容量が多く消費されてしまうため敬遠されてしまうのだ。

つまり、Googleとしても、WEB上の膨大な情報を処理するために、サイトオーナーに表示速度の早いサイトを作ることを求めているのだ。

※より正確に理解したい方は、『検索エンジンの仕組み』や、『robots.txtの書き方』も読んでおこう。

2.サイトの表示速度を左右する三大要素

それでは、サイトの表示速度は何に影響されているのだろうか?それは以下の3つだ。

  • 画像の読み込み
  • ソースの記述内容
  • キャッシュ

この3つの要素を覚えておくことで、高速化のために何をすれば良いのかが明確になる。

それでは、これらの一つひとつの要素が、サイトの表示速度に影響を与える理由と、それぞれの最適化のために誰にでもできる方法を一つずつご紹介する。

3.画像サイズの最適化による高速化

WEBページのコンテンツは簡単に言えばテキストと画像で出来ている。

分かりやすく単純化してお伝えすると、1万文字のテキストのサイズは、30KB(キロバイト)ほどにしかならないが、画像は、500 × 500 px 程度のものでも、JPG形式なら数十KB、PNG形式なら数百KBほどのサイズになる。

このように、画像一枚だけでも、コンテンツの容量が大きく増えてしまうのだ。これを最適化する方法は2つある。

  • 画像のファイルサイズそのものを圧縮する。
  • ページのテキストの表示を最優先して画像の読み込みを後回しにする。

まずは前者の方法から見ていこう。

3−1.画像のファイルサイズの圧縮

画像のサイズを節約してアップするようにすると、結果的に、一つひとつのページの容量を大きく削減することにつながる。そして、それだけでページの表示速度を上げることができる。

そのためにできることは2つある。

3−1−1.EWWW Image Optimizer の導入

コンテンツに使用する画像を一枚ずつ、いちいち圧縮していると効率が悪い。そこで、自動的に画像サイズを圧縮してくれるのが、EWWW Image Optimizer というプラグインだ。

これを使うと、JPGファイルでは平均15%、PNGファイルでは平均50%ほどサイズを圧縮することができる。また、これからアップロードする画像だけではなく、過去にアップロードした画像もまとめて圧縮することができるので非常に便利だ。

EWWW Image Optimizer の設定方法と使い方』で有効な使い方を分かりやすく解説しているので参考にして欲しい。

3−1−2.画像の質を保ったまま圧縮してくれるオススメサービス

通常は、EWWW Image Optimizerで十分だが、とにかく画像の質にこだわりたい方向けに、画像の質をできるだけ高く保ったままサイズを圧縮するサービスがある。

それが以下の2つだ。

  • JPEGmini:JPG形式の画像を高品質な状態で圧縮できる。” Try It Now ” のボタンをクリックして、圧縮したい画像をドラッグ&ドロップするだけで利用可能。画面右上の SIGN UP から登録すると200MBまで無料で使うことができる。気に入ったら有料のサービスを購入すれば良い。
  • TinyPNG:PNG形式の画像を高品質な状態で圧縮できる。こちらも、” Drop your .png files here ! ” と書かれている部分に、圧縮したい画像をドラッグ&ドロップすることで利用できる。20枚までなら一括で圧縮できるので便利だ。

3−2.画像の読み込みを後回しにする

通常は、画像の読み込みが完了してからページが表示される。しかし、ページを表示してから画像を読み込むようにすれば、それだけで表示速度を大きく改善することができる。

これを簡単に実現することができるのが、Lazy Load というプラグインで、これを導入するだけでもPageSpeed Insights の評価が大きく上がる。

インストールして有効化するだけなので設定も簡単だ。

4.ソースの記述内容の最適化による高速化

ソースとは、WEBページを構成するコードのことだ。通常、WEBページ上で右クリックして「ページのソースを表示する」ボタンを押すと見ることができる。

Webページのソースを構成する3大要素は以下の通りだ。

  • テキストデータ:
    文字通りテキストのデータ。前述の通りテキストの容量は全体から見ると非常に小さいので特に気にする必要はない。
  • CSS:
    デザインやレイアウトを指定する言語。別名スタイルシート。
  • JavaScript:
    画像にカーソルを合わせると自動的に拡大させたり、アニメーションを取り入れる時などに使うプログラム。

このうち、CSSとJavaScriptは、テキストデータと比べて、遥かに多くの読み込み時間が必要になる。通常は、CSS・JavaScriptをともに、ソースのタグ内に記述する場合が多い。しかし、それだと、ページを開く時にJavaScriptを先に読み込もうとするため、その読み込みが終わるまでサイト表示に関する処理が一旦ストップしてしまう。(=表示速度が遅くなる。)

そこで、JavaScript はタグ内ではなく、タグの直前に配置することで、処理時間のタイムラグを回避することができる。

source

少々難しく聞こえるかもしれないが、WordPressは、 Head Cleaner というプラグインを使うことで上記の設定を簡単に実現することができる。

『 Head Cleaner の最も理想的な設定方法』を参考に設定してみて欲しい。

※最初からCSSやJavaScriptの記述方式が最適化されているテンプレートを使っている場合は、Head Cleaner を導入する必要はない。

5.キャッシュの使用による高速化

キャッシュを使うことでサイト表示の高速化を実現することが可能だ。いきなり言われても、分からないと思うので、まずキャッシュの仕組みを簡潔にご説明する。

Webサイトには静的ページと動的ページの2種類がある。

静的ページとは、テキストと画像を用いてHTML言語でまとめたファイルのこと。動的ページは、ユーザーがブラウザで「このページを見たい!」とアクセスする度にHTML言語で都度作られるファイルのことだ。(※WordPressは動的なページに該当する。)

下の図のように、動的ページの方が、サイトを表示させるまでのステップが多い。

sitespeed-11

このように、動的ページでは、いちいちデータベースを読みにいってデータを取り出すという工程が存在する。その工程を効率良く処理するために生まれたのがキャッシュだ。キャッシュとは、一時的に保存するデータという意味で、その一時保存データを表示するようにすることで、わざわざデータベースまで読み取りにいく手間を省くというものだ。

次のフロー図を見ると、キャッシュの働きがわかりやすい。

sitespeed-12

あるユーザーがWebページを閲覧した時に、そのページのファイルを一時的に保存する。そして、別のユーザーが同じページを見たい!と要求した際、この一時的に保存したファイルが表示される仕組みだ。

これだと、ユーザーから要求があるごとに発生するプログラムの稼働やデータベースへのアクセスが不要となり、その分だけWebページの表示速度が大きく向上する。

さて、WordPressでキャッシュを使った高速化のアプローチは2つある。

  • キャッシュを導入する
  • CDNサービスを使う

まず前者からご紹介しよう。

5−1.WordPressのキャッシュの導入方法

WordPressには、この仕組みを簡単に導入できるプラグインがある。それが W3 Total Cache だ。今まで、キャッシュによる高速化をやったことがない方は、これを導入するだけでサイト表示スピードの劇的な高速化を実感できるだろう。

詳細な設定方法は、『W3 Total Cache の使い方と設定方法』で説明しているのでこの通りに進めてみて欲しい。

5−2.CDNサービスを使う

CDNサービスとは、コンテンツ・デリバリー・ネットワークの略で、キャッシュを複数のサーバーで所有し、ユーザーがページにアクセスした時は、そのユーザーにとって最も物理的な距離が近いサーバーが応答するシステムだ。

これを使うことで、アクセスによる負荷を広く分散することができる。

つまり、サイトへのアクセスを複数のサーバーで処理するので、負担が減り、高速化に好影響を与えることができるというものだ。そして、Cloud Flare というサービスが、このサービスを無料で提供してくれている。

Cloud Flare の設定方法』で利用方法と設定方法を詳しく解説しているので参考にして欲しい。

まとめ

このページでお伝えしたことを全て実践すると、サイトの表示速度を大きく改善することができる。

もう一度まとめると以下の通りだ。

  • 画像サイズを小さくする
  • ソースを工夫する
  • キャッシュを工夫する

これらを手動で行うことができればベストだが、そのためには労力も使うし専門的な知識も必要になる。しかし、WordPressでは、プラグインを使うことで、初心者の方でも簡単に行うことができる。

サイトの表示速度は、ユーザビリティにもSEO的にも大きな影響を与える。ぜひ、しっかりと理解して、対処するようにしておこう。

  • このエントリーをはてなブックマークに追加

バズ部のWordPress無料オリジナルテーマ

cta_extension” Xeory (セオリー)”は、バズ部のノウハウをしっかり詰め込んだ、コンテンツマーケティングに特化したWordPressのテーマです。Xeory はWEBマーケティングで結果を出すために次の3つの特長を備えています。

  • ・お問合せなどにつなげる導線の実装が簡単
  • ・ソーシャルメディアと連携する仕組みが導入済み
  • ・内部構造をSEO化にこだわって徹底して改善

世の中に良質なコンテンツが溢れることを想い、テーマは無料でご提供しております。まずはダウンロードしてお試しください。


Xeory テーマを見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

  1. 初めまして。
    バズ部さんのサイトで基礎から勉強しているものです。

    レンタルサーバーが夜間のアクセスが増加した時にサーバーダウンするようになりました。
    改善するためにこの記事で紹介頂いたプラグイン

    EWWW Image Optimizer Lazy Load  W3 Total Cache

    CDNサービスのPhotonをJetpack by WordPress.comで導入して表示速度は高速化したのですが、依然として夜間は重くなってダウンしてしまいます。

    一日辺りのサーバーへのhit数が許容範囲を超えており、それが原因で重くなっているらしいのですが、hit数を削減する他の方法をご教授していだだけないでしょうか?

    サーバーに不要なファイルが溜まっているのかよくわかりません。
    容量やPVに関しては問題はないかと思います。

    よろしくお願い致します。

    1. レンタルサーバーはどこのをお使いでしょうか?

      サーバーダウンではなく、レンタルサーバー側からデータ転送量を超えた制限を受けているかと推測しました。
      良いコンテンツを提供しているので、アクセス数が多いのでしょうね、素晴らしいです。

      データファイルの圧縮を考えるより、安定したサーバーに移行されてはいかがでしょうか?
      理由は次の2つです。

      ・あまりにサーバーエラーが頻発するとユーザーからのサイトの信頼度が低下していく
      ・今後、コンテンツを増やしていく際、いずれにしてもデータファイルの増加はまぬがれない

      バズ部ではエックスサーバー以上のサーバーを推奨しています。詳しくは『おすすめサーバー』をご覧ください。

  2. はじめまして、こんにちは。
    現在wordpress4.3.1でブログを書いています。

    こちらの記事で「Lazy Load」の紹介がありインストールした所
    テキストから表示できるようになったのはいいのですが、
    「Wptouch」でレスポンシブ表示ができなくなりました。

    どこか変更されているとは思うのですが、わからずどうしたらよいか
    アドバイスを頂けたら幸いです。

    現在使用しているテーマのphpファイルとかを
    デフォルトからコピペで元に戻すほうがよいでしょうか?

    1. スパーダさん、コメントありがとうございます。

      恐れ入りますが「Wptouch」はバズ部で推奨しておらず、回答致しかねます。
      よろしければ本家サイトの

      http://ja.forums.wordpress.org/

      でご質問いただくのはいかがでしょうか?
      WordPressはオープンソースで開発が進められています。
      ご質問することでWordPress開発に貢献できるかと思います。