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

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

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

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


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

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

  • ユーザビリティが上がる
  • SEOに好影響を与える

それぞれについて詳しく解説していこう。

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

サイトの表示速度を速めることでユーザービリティが上がる点は重要だ。

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

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

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

ユーザビリティを上げるためには、サイトの表示速度を上げることが重要となるのだ。

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

サイトの表示速度を速めることで、SEOに好影響を与える点も見逃せない。

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

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

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

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

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


ここまでの説明でWordPressの表示速度を高速化することが、SEOに影響を与えることはわかった。しかし高速化することは、SEO対策の枝葉の部分にすぎない。ユーザーの満足度を高めることこそが本質だ。「SEOとは検索ユーザーに120%の価値と満足を提供すること」を参考にして本質的な理解をしておこう。


2.サイト表示速度を確認する

サイト表示速度を高速化するために、まずは自分のサイトがどれくらいの速度なのか確認する必要がある。この章ではサイト表示速度の確認方法を解説する。簡単な方法なので、ぜひ試してみてほしい。

2-1.サイト表示速度の確認方法

それではまずは自分のサイトの表示速度を測ってみよう。

使用するツールはGoogleの PageSpeed Insights だ。PageSpeed InsightsはGoogleが提供している、サイトの表示速度測定ツールである。ここからはPageSpeed Insightsを使ったサイト速度の確認方法を解説する。

PageSpeed Insightsのサイトを表示したら、「ウェブページを入力」に測定したいサイトのURLを入力し、「分析」をクリックする。

ここでは仮にGoogle Japanの公式ブログで確認してみる。「分析」をクリックすると以下のように分析が開始される。

そしてすぐに以下のように分析結果が表示される。

デフォルトではもモバイルの表示スピードの測定となっているため、PCの表示速度が知りたい場合には「パソコン」を選択しよう。

最も重要なのは中心に大きく表示されている評価結果だ。ここでは「55」という数字が表示されているが、この数値が高ければ高いほどサイトの表示速度が速いということになる。

※PageSpeed Insightsのスコアは50点台以上を目指そう
PageSpeed Insightsのスコアは50点以上か50点未満かが一つの目安になる。PageSpeed Insightsの評価はほかのサイトとの比較によって表されているため、50点でちょうど平均値となる。もしも自分のサイトが50点未満だったら改善を考えよう。

表示速度が50点以上ある場合には、大がかりな改善は必要ない。高いスコアを出したからといってサイトの順位が劇的に向上するようなことはないので、過剰に時間を割かなくてもよいだろう。

2-2.表示速度が遅いサイトと早いサイトの比較

表示速度が高速なサイトが、どれほど早いのか下図で確認してみよう。

以下は、表示速度が遅いサイトと表示速度が早いサイトの差を、PageSpeed Insightsで比較したものだ。遅いサイトと高速化の設定が完了したサイトを比較すると、表示速度の差が50ポイント以上も向上してることが分かる。

ページスピードインサイトで表示速度計測

表示速度測定ツールのもう一つ有名なツールとしてGTMetricsというものがある。こちらも確認したところ、スコアにも非常に大きな差がでていることが分かる。ページの表示速度に6秒程の差があることが分かる。

ジーティーメトリックスで表示速度計測

いかがだろうか?

サイトの表示速度の設定を行うだけでこのロスを限りなく少なくすることができれば、サイト全体のパフォーマンスを上げることができるのだ。あなたも実践してみて欲しい。


・PageSpeed Insightsではトップページを計測。
・GTMetrics では記事ページを計測。


3.Wordoressを高速化する方法

それではここからは、具体的にWordpressを高速化する方法を解説していこう。

3-1.画像ファイルを最適化する

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

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

このように、画像一枚だけでも、コンテンツの容量が大きく増えてしまうのだ。画像サイズの最適化には以下の3種類の方法がある。

  • EWWW Image Optimizerの導入
  • 画像圧縮無料サービスの利用
  • WebP(ウェッピー)を利用する

それぞれ解説していこう。

EWWW Image Optimizer の導入

EWWW Image Optimizer

まずは、WordpressプラグインであるEWWW Image Optimizerを導入してみよう。EWWW Image Optimizerは、画質を劣化させることなく自動的に画像サイズを圧縮してくれるプラグインのことである。

コンテンツに使用する画像を一枚ずつ、いちいち圧縮していると効率が悪い。自動的に画像サイズを圧縮してくれるのであれば使用する画像のサイズをいちいち気にする必要がなくなる。

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

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

画像圧縮無料サービスを利用する

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

それが以下の2つだ。

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

WebP(ウェッピー)を利用する

「WebP(ウェッピー)」という画像フォーマットを利用することで、高画質を保ったまま軽量化した画像を書き出すことができる。

WebP(ウェッピー)とは、Googleが開発した画像フォーマットである。拡張子は「.webp」となる。

2021年9月時点の主要な対応ブラウザは以下の通りだ。

WebP対応ブラウザ Chrome、Firefox、Edge、Safari、Opera
WebP非対応ブラウザ IE

以前はWebP対応ブラウザはかなり限定的であったが、近年ではほとんどのブラウザで対応となりつつある。

画像をWebP変換する方法としては、Googleが提供するWebアプリケーションSquooshを利用する方法が一般的だ。

まずはSquooshの公式サイトにアクセスする。

中央の「Drop OR Paste」に、変換したい画像をドロップする。すると、以下のように読み込まれる。

中央のラインの左側がオリジナル画像、右側が圧縮後の画像だ。右下に表示されている編集ウィンドウの「Compress」のフォーマットを「Webp」に設定しよう。デフォルトでは「Quality」が75%になっているが、このスライドを移動させるとより高い圧縮率で変換が可能となる。

満足できる圧縮率になったら、右下のダウンロードボタンでダウンロードして終了だ。

3-2.キャッシュの使用による高速化

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

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

2つの詳しい方法は後述する。その前に、まずキャッシュの仕組みを簡潔にご説明しよう。

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

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

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

sitespeed-11

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

キャッシュとは、一時的に保存するデータという意味で、その一時保存データを表示するようにすることで、わざわざデータベースまで読み取りにいく手間を省くというものだ。

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

sitespeed-12

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

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

さて、この章の冒頭でも書いた通り、WordPressでキャッシュを使った高速化のアプローチは2つある。

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

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

W3 Total Cacheでキャッシュを導入する

W3 Total Cacheは、キャッシュという仕組みを簡単に取り入れることができるWordpressプラグインだ。様々なキャッシュ機能を設定・管理することができる。

今まで、キャッシュによる高速化をやったことがない方は、これを導入するだけでサイト表示スピードの劇的な高速化を実感できるだろう。

W3 Total Cacheは正直なところ、設定方法が初心者には簡単ではない。とはいえ、最適な設定を行うことでサイトの表示速度が劇的に向上する可能性もあるため、導入をおすすめしたい。

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

CDNサービスを使う

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

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

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

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

3-3.CSS/JavaScriptを圧縮する

CSSやJavascript、HTMLを圧縮することでWordpressを高速化することも可能だ。圧縮するためには「Autoptimize」というプラグインがおすすめだ。

これを使うことで、HTML上で不必要な改行やスペースなどのコードを削除してくれたり、複数のファイルの圧縮などが一気に行うことができる。

ただし、使っているデザインテーマによっては正しく動作されないこともある。使用する際には不具合が出ないか細かく確認するようにしよう。

ちなみに、CSSやJavascriptの最適化は前述したキャッシュプラグインの設定でも行うことは可能となる。両方で導入する必要はないので、キャッシュプラグインで最適化を行う場合には導入する必要はないだろう。

3-4.JavaScriptの読み込みを非同期化する

JavaScriptの読み込みを非同期化することでサイトの表示速度を上げることができる。実は、JavaScriptは読み込むのに時間がかかるため、サイトの表示速度を悪化させている可能性がある。JavaScriptの非同期化または遅延化を行うことで、サイトがスムーズに表示されるというわけだ。

Async JavaScriptは、JavaScriptの非同期化または遅延化を自動で行ってくれるプラグインだ。このプラグインを導入して設定するだけでJavaScriptの読み込みを非同期化してくれる。

日本語に翻訳されていないプラグインなので導入に躊躇するかもしれないが、きちんと設定すれば有効なため必要に応じて導入を検討してほしい。

3-5.不要なプラグインを削除する

不要なプラグインがあれば削除することで表示速度が上がる可能性がある。

プラグインの多くは無料で導入でき、Wordpressの性能を簡単に上げてくれる便利なものだ。そのため、ついつい導入しすぎてしまいWordpressに負担をかけてしまうことがある。

必要のないプラグインはWordpressに余計な負荷をかけ、表示速度が遅くなったりエラーが起こることもあるため削除しておこう。プラグインは可能な限り減らしておくことが理想だ。

3-6.デザインテーマを変更する

どのような施策をとってもサイトの表示速度が改善されない場合、デザインテーマを見直してみてもいいかもしれない。

デザインテーマによっては構造上、サイトに負荷をかけやすいものもあるためだ。その場合、デザインテーマを変更するだけでサイトの表示速度が改善されることもある。

ただし、必ずしてもデザインテーマが理由で表示速度が遅いかどうか確認する術はないため注意が必要だ。


まとめ

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

主な解決策をもう一度まとめると以下の通りだ。

  • 画像サイズを小さくする
  • ソースを工夫する
  • キャッシュを利用する
  • CSS/Javascriptを圧縮する
  • Javascriptの読み込みを非同期化する

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

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

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード

コメントはこちらから

  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開発に貢献できるかと思います。

コメントは停止中です。