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

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

あなたも表示速度の遅いサイトに出くわし、そのページを開くのをやめた経験があるのではないだろうか。サイトの表示速度が遅くなるとユーザビリティが低下し、その結果SEOにも悪影響を与えてしまう。

そこでこのページでは、WordPressの表示速度を高速化させる方法をご紹介する。どれも簡単にできる方法なので安心して読み進めて欲しい。

まず、表示速度が高速なサイトが、どれほど早いのか下図で確認しよう。表示速度が遅いサイトと、表示速度が早いサイトの差を、Googleの PageSpeed Insights で比較したものだ。遅いサイトと高速化の設定が完了したサイトを比較すると、表示速度の差が50ポイント以上も向上してることが分かる。

また、GTMetricsのスコアにも非常に大きな差がでていることが分かる。ページの表示速度に6秒程の差があることが分かる。

いかがだろうか？

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

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

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

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

Googleの調査発表”Find out how you stack up to new industry benchmarks for mobile page speed“によると、モバイルページの表示速度が1秒から5秒に伸びるだけで、直帰率は90%増加すると言われている。またインターネットリサーチの業界で著名な Nielsen Norman Group はサイトの表示速度に関して以下のように言及している。

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

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

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

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

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

Webサイトの高速化は、サイトの所有者だけでなく、すべてのインターネットユーザーにとって重要です。より速いサイトは幸せなユーザーを作成し、サイトの反応が遅い場合、訪問者がそこで過ごす時間が少なくなることが内部調査で確認されています。しかし、より高速なサイトはユーザーエクスペリエンスを向上させるだけではありません。最近のデータは、サイトの速度を向上させることで運用コストも削減されることを示しています。私たちと同様に、ユーザーは速度に多くの価値を置いています。そのため、私たちは検索ランキングでサイトの速度を考慮に入れることにしました。

また2018年には、“Use page load speed as a mobile search ranking factor”で、サイトの表示速度がモバイル検索順位を決める重要な要素であることを明言し、これをスピードアップデートと呼んでいる。下記は一部抜粋である。

検索ユーザーはできるだけ早く質問に対する回答を見つけたいと考えています。研究（英語）では、ユーザーはページの読み込み速度を非常に気にかけていることがわかっています。 読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

つまりサイトの表示速度を早くすることがユーザビリティを高め、その結果SEOに好影響を与える。そのためサイトオーナーに表示速度の早いサイトを作ることを求めているのだ。

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

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

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

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

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

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

画像サイズを最適化することで、結果的にWordPressの表示が高速になる。最適化する方法は2つある。

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

まず画像について分かりやすく単純にお伝えすると、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 の評価が大きく上がる。

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

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

「Head Cleaner」 というプラグインを使うことで、ソースの記述内容を最適化することができる。その結果WordPresの表示を高速化できる。

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

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

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

このうち、CSSとJavaScriptは、テキストデータと比べて、遥かに多くの読み込み時間が必要になる。通常、CSSとJavaScriptを、まとめてソースのタグ内に記述する場合が多い。

しかし、まとめて記述すると、ページを開く時にJavaScriptを先に読み込もうとする。そのため読み込みが終わるまで、サイトの表示に関する処理が一旦ストップしてしまう。結果的に表示速度が遅くなる。

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

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

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

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

キャッシュを使うことでサイト表示の高速化を実現することが可能だ。具体的には2つの方法で実現できる。

• プラグイン「W3 Total Cache」を使用する方法 
• 「CDNサービス」を使用する方法

2つの詳しい方法は後述する。いきなり言われても、分からないと思うので、まずキャッシュの仕組みを簡潔にご説明する。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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