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

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

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

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

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

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

いかがだろうか？

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

１．なぜサイトの表示速度が重要なのか？

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

１−１．ユーザビリティが上がる

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

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

” Website Response Times（英語） “

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

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

１−２．SEOに好影響を与える

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

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

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

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

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

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

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

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

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

３．画像サイズの最適化による高速化

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

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

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

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

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

３−１．画像のファイルサイズの圧縮

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

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

３−１−１．EWWW Image Optimizer の導入

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

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

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

３−１−２．画像の質を保ったまま圧縮してくれるオススメサービス

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

それが以下の２つだ。

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

３−２．画像の読み込みを後回しにする

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

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

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

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

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

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

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

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

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

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

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

５．キャッシュの使用による高速化

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

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

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

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

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

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

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

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

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

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

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

５−１．WordPressのキャッシュの導入方法

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

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

５−２．CDNサービスを使う

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

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

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

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

まとめ

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

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

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

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

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