【完全ガイド】ワードプレスWEBサイトを高速表示させるための全施策

ワードプレスで作ったWEBサイトを高速表示させるためにできること、考え方のポイントについて解説します。すべてやる必要はありませんが、必須項目に対応すると標準状態よりかなり高速化が可能です。

目次

基本的な考え方

最初に、「WEBサイト表示高速化」に対する私なりのスタンスをお話しします。というのも、ひとくちに「WEBサイト表示高速化」といっても考え方も目的も人によって違うからです。
 

体感速度を優先し、PageSpeedInsightsスコアはおまけ

 
基本的に私の「WEBサイト表示高速化」とは「体感速度」重視です。つまり、実際に操作して早いと感じるかどうか?ストレスなくWEBサイト内を回遊できるか?ということを重視します。
 
PageSpeedInsightというツールで100点というスコアをたたき出すことは非常に簡単ですが、そのために実際の操作で違和感を感じるようなら100点は諦めます。PageSpeedInsightはあくまで「技術的に適合しているか」という点をメインに評価しており、また、すべての技術的課題をクリアしても低評価となることがあるため、何が100点の根拠なのかはわかりません。
 
それならば、「体感速度重視」としたほうがよっぽど潔くチューニングできるし、読者側のメリットも大きいのです。
 

初回訪問だけでなく再訪・回遊も意識する

 
WEBサイトの高速表示を実現するための各種計測ツールがありますが、そのほとんどは「初回訪問」をベースに表示速度の評価をしています。
 
私個人の考えとしては携帯の4G回線で2.5秒程度であれば表示される前に離脱するユーザーはそれほどいないのではないかと思います。
 
むしろ、自分の最大の目的だった情報を見た後でなおサイト内を回遊しようというときに表示が遅いという場合にこそ、大きなストレスがかかるのではないでしょうか?
 
1ページ移動するたびに2秒以上かかっていたら「遅いな~」「ほかのサイトで探そっかな~」と思うでしょう。
 
初回訪問と回遊ではストレスの基準値がだいぶ違うという認識が重要です。
 

できるだけ無料・低コストで実現する

 
私の基本的な信条は「高コスパ」です。WEBサイトの表示高速化を実現するために過大なコストがかかるようなやり方は基本的に採用しません。お金を払うにしてもそれに足る効果があるもののみというスタンスです。
 

何もしないときの速度は3秒程度のサイトを前提

 
最後に、これから紹介するやり方は、Wordpressで何も設定しない状態で仮に3秒~5秒くらいモバイルで表示時間がかかっているものという前提で「やるべき」「やったほうが良い」という話をします。もちろん基準以上でも以下でもbetterであることは間違いありませんが、力を入れる順番が変わることがあります。すべてを説明すると非効率なのでご了承ください。
 
「やるべき」施策については【必須】表示しています。
 
 

1.キャッシュ・データ再利用の仕組みを使う

 

【基本理解】キャッシュを使うとは?

 
ワードプレスの初心者の方は「キャッシュを利用する」といわれてもピンと来ないかもしれません。
 
基本的な仕組みとしてワードプレスはアクセスがあるたびにWEBページに必要なデータをデータベースから引き出してユーザーのブラウザに運んでいます。「動的に生成する」と表現することもあります。
 
キャッシュを使うというのは「いちいちデータベースから読み込まずに、先にWEBページに必要なものをパッケージしておいてリクエストが来たらすぐ配送できるようにしたほうが良いよね」という考え方です。
 
例えばAさんがZというページを表示させるときに組み立てたデータをそのままコピーして残しておいてBさんから同じZへのリクエストがあったら再利用してしまおう!そんなイメージを持っていただけたらと思います。
 
あらかじめ組み立ててて置いて作業がほとんど発生しないので「動的」に対して「静的」と表現する場合もあります。動的な組み立てに必要な工数が10だとすれば静的にあらかじめ作っておいたものを渡すだけの工数は1以下になるのでキャッシュを使うことは確実にWEBサイトの表示高速化につながります。
 
写経するのとコピーするのではどっちが楽?と言われればピンとくるのではないでしょうか?
 
 

① サーバー機能としてのキャッシュを使う

 
キャッシュを使う戦術のその1は利用しているサーバーが持っている「キャッシュ」機能を使うというやり方です。
 
私が使っているエックスサーバー以外にも、結構いろんなサーバーが高速化機能として「キャッシュ機能」を用意しています。
 
ただ、実際の体感速度に大きく貢献はしません。やったほうがましという程度です。サーバーについては最後のほうで解説しますが、SSDとかCPUやメモリの性能のほうが大事です。
 

② 【必須】ブラウザ側のキャッシュ再利用機能を使う(使わせる)

 
ブラウザ側のキャッシュ再利用機能を使う(使わせる)ための設定はかなり重要です。
 
キャッシュが効きすぎてブログのページを更新してもその内容がユーザー側に反映されないことがあるというデメリットは存在しますが、それでも明らかに体感表示速度は向上します。
 
ブラウザ側のキャッシュ再利用を使うというのはどういうことかというと、サイトにアクセスした際に使用したCSSやJavaScript・画像などのデータをブラウザに一定期間保存してもらい、次にアクセスがあったらそれらのデータを優先して使ってもらおうちという考え方です。
 
例えるなら・・・コーヒーを飲むときに毎回新しいカップを使うのではなく、しばらくカップをテーブルに置いてもらってつぎ足したほうがお互いに楽じゃね?みたいな考え方です。
 
まあ、こんな仕組みなのではじめてサイトに訪問した時だけはこの機能で表示が高速化されることはありません。
 
ブラウザ側のキャッシュを利用するだけなら次のプラグインがおススメです。インストールして有効化するだけです。
 
 
なお、ブラウザキャッシュに関する設定は基本的にはhtaccessというファイルに書き込むだけなのですが、NginxやLiteSpeedというWEBサーバーソフトを利用しているサーバーは注意が必要です。htaccessに書き込んだ内容を反映させるような設定をレンタルサーバー運営会社側で用意していないと全く機能しない可能性があります。(エックスサーバーはNginxを採用していますがhtaccessを反映するように組み込まれています)
 
※自分で書き込む人はこちらを参考にしてください。保存期間は1か月になっていますが8日以上であればどの程度でも構いません。

 

 

③ 【必須】プラグインで静的HTMLを生成する

 
もう一つの必須のキャッシュ利用方法としてプラグインを用いて静的HTMLを生成するというのがあります。
 
冒頭でも話した「動的に作るより、静的にあらかじめ作っていたものを使ったほうが早くね?いちいち読みだして作るのだりぃわ。」という考えです。
 
正直言って②のブラウザキャッシュと③のプラグインによるキャッシュでWEBサイトの表示高速化は半分完了です。それぐらい大事な方法です。
 
キャッシュ系のプラグインは無料から有料までいろいろありますが、テーマや他のプラグインとの相性もあるのでいくつか試して最も高速化されてエラーも起きなかったプラグインを採用するのがベストです。
 
一応おススメとしては
 

参考

cache-enabler

 

参考

Autoptimize

 
この辺りは高速化の仕組みがシンプルで間違いがありません。
 
細やかな高速化・さらなる高速化を実現したいときは有料のプラグインがいくつかありますが当サイトの有料プラグインページからご覧いただければと思います。
 
ちなみに上記②③でサイトの表示速度は3秒超から2秒前後くらいにまで削減されます。
 
 

2.送るデータを減らす

 

【基本理解】送るデータを減らすための基本知識

 
WEBサイトを表示するのに必要がデータが少なければ当然ですが表示までの時間も短縮されます。ここで押さえておきたいのは
 
 
チェックリスト
  • データの量だけでなく個数も減らす
  • 画像が送受信データのほとんどとなるケースが多い
  • 次いでJavaScript・CSSといったデータを減らす
  • 最終的に全体で1MB以下が理想
 
ということです。特に画像とその他のコードの優先順番を間違えてはだめです。一生懸命コードを最適化しても効果はわずか。むしろ画像を一つ最適化するほうが10倍以上効果があることのほうが普通なのです。
 
例えば当サイトのトップページは全体で300kb弱のという極めて少ないデータ量ですが、そのうちの約200kbは画像です。これらの画像は最適化前は1.5倍程度のデータ容量がありましたので100kbは最適化によって減ったということです。CSSではいくら頑張っても10kb程度しか圧縮できませんでした。一般的なWEBサイトは画像が1MB以上占めることもざらです。つまり画像を圧縮することが高速化の大きなカギとなるのは間違いないのです。
 

① CSSやHTML・JSなどのコードを最小化・最適化する

 
前述しましたが、よほどコードの書き方が下手でない限り転送データ全体の中のこれらのコードのデータ容量はそれほど多くありません。なので体感的に高速化はあまり感じられませんが、GooglePageSpeedInsightのスコアには影響します。軽くやれる範囲での対応で十分です。
 

方法その1 プラグインを使う

 
CSSやHTML、JavaScriptなどのコードを最小化するのにはプラグインを使用するのがベストです。
 
キャッシュに関する話題でも紹介したAutoptimizeなどのプラグインを使用すると良いでしょう。
 

参考

Autoptimize

 
ただし、この手のプラグインの中にはワードプレスのカスタムCSS設定画面に入力したCSSが最適化されないかもしれません。その時は手動でCSSを最小化して設定画面に貼り付けましょう。以下のサイトで最小化できます。
 

参考

css-minifier

 

方法その2 CDNの機能を使う

 
CloudflareなどのCDNサービスを利用する場合は、プラグインで最小化しなくともCDN側で最小化処理することも可能です。
 
両方でやっておけば間違いないという感じです。
 
なお、クラウドフレアを使う際は必ずサーバープッシュを有効にすることが大事。config.phpに以下のコードを加えるだけでCDNとレンタルサーバー間のデータのやり取りが効率化されます。
 

② 小さなデータは結合、転送もGzipで

 
「HTTP/2で配信できるのだから結合しないほうが良くね?」と思う中級者の方、私もかつてはそう思っていました。実際のところ、CSSやJavaScriptなどで100kbにも満たないデータは結合して配信したほうが高速表示できているような気がします。
 
CSSやJavascriptの結合は前項で紹介したプラグインやCDNなどの機能で利用することができます。
  
また、データを配信する際にGzipという形式で圧縮して送り、ブラウザで展開してもらうと全体のデータ量が数%~10%程度減ります。
 
Gzipはhtaccessに記載することで可能になりますが、プラグインでやるのが楽です。
 
以下参考です。

 

 

③ 【必須】画像は圧縮・最適化する

 
しつこいようですが転送データ容量を圧縮するには画像の圧縮・最適化が最も効果的です。特に投稿記事内にいくつもの解説画像を挿入していたり、記事一覧ページやサイドバーなどにアイキャッチ画像を多数使用している場合は画像のデータ量が非常に多くなるので削減効果も大きくなります。
 
画像を圧縮するだけで0.5秒は表示速度を改善できます。
 

画像の圧縮の基本

 
圧縮方法はlossy(ロッシー)圧縮方式が基本です。lossless(ロスレス)という圧縮方式もありますがlossyのほうが圧倒的にデータ量が少なくなります。
 
圧縮方式の言葉の響きからlossyは画像が汚くなるのでは?と心配する方もいると思いますが、画像が粗く汚くなる原因は圧縮率の設定や計算方法によるところのほうが大きいので、気にせずlossyを選択しましょう。圧縮ソフトやプラグインによっては「非可逆圧縮方式」と表示している場合もあります。
 
多くの場合、圧縮率の設定を自分で行う必要がありますが基本は70%程度がおススメです。
 
また、デフォルトの画像のサイズも自分で決めておきましょう。例えば記事内に使用する画像であれば幅600~900px程度で十分です。フォトサイトなど、全画面表示の必要があるときにのみ幅1920pxなどの高解像度でが元画像を保存しておくようにすると良いです。
 

ソフトを使って圧縮する

 
面倒でも間違いの無い方法はフリーソフトなどを使用して直接圧縮する方法です。なぜ間違いがないかといえば、圧縮後の画像品質を目で確認してからワードプレスサーバーにアップロードできるからです。
 
おススメのソフトは
 
 
フリーソフト以外でもWEBサービスとして以下のようなものもあります。
 

参考

MOZJPEG

 

プラグインで圧縮する方法

 
できるだけ面倒なことをせずに圧縮したいときはワードプレスの圧縮プラグインを利用するのがベストです。以下のプラグインが最も評判がよく間違いがありません。
 
 
すでにサイトを運営していて圧縮する画像数が上記プラグイン無料枠では足りないという場合は別の買い切り型の有料プラグインがあります。(有料プラグインのページで紹介しています)
 

④ 画像専用のCDNを使う

 
アイキャッチ画像などには向きませんが、記事中・ページ中の画像に関してはCloudinaryという画像専用のCDNを使うとよいかもしれません。
 
Cloudinaryでは画像の圧縮やリサイズといった編集機能があります。CDNを利用して高速配信されるうえに画像圧縮も簡単に行えるので非常に便利です。無料枠で十分つかえます。
 

参考

Cloudinary

 

⑤ 画像は「srcset(ソースセット)」属性を付けて記述する

 
最新版のワードプレスを使っており使用する画像もサイト内のものという場合は自動的に適用されるので気にしなくてもよいのですが、外部の画像を使用する場合などはできるだけ「srcset」属性を付けてHTML内に記述するようにしましょう。
 
「srcset」は閲覧者が大きな画面で見ているとき大きな画像、小さな画面では(リサイズ済みの)小さな画像を配信する仕組みです。そのため、特にスマートフォンでの表示が速くなります。
 
ちなみに前述のCloudinaryに保存し画像を記述すると自動的にsrcsetが適用されます。
 
自前でやるにはちょっと難しいので、効果は高い施策ですがハードルが高いと感じる人は無視してかまいません。
 
 ⑥ <head>内から不要なコードを減らす
あまり効果があるとは言えませんがこだわるなら<head>内から余分なコードを減らしましょう。
function.phpに以下のコードを記載してください。

 

⑦ 余分なクエリストリングを削除する

クエリストリングといわれて何のこと?と思う方もいるかもしれませんが、JavaScriptなどでみられる?以下の部分です。

例:domain.com/script.min.js?ver=1.14.2. ←ここのこと

function.phpに以下のコードを記載してください。体感速度にはほとんど影響しませんが、PageSpeedInsightのスコアに影響します。

 

⑧ 不要なスクリプトを削除する

それぞれfunction.phpに記載して下さい。

不要な絵文字スクリプトを削除する

 

 

不要ならWP-Embedのコードを削除する

WP-EmbedはWordpress標準のSNSサイトリンクの埋め込み機能・ブログカード機能です。必ずしも必要ではなく、むしろデザインが崩れることもあるので削除する人も多いです。

 

不要なJQueryを削除する

かなり前のバージョンのJQueryの機能を利用するプラグインのためにjquery-migrate.min.jsを読み込んでいる場合も多く、実際には使用していない時は読み込まないようにしたほうが良いです。

 

このあたりの削除方法はプラグインでもできるものがあります。(探せばすぐ見つかります)

function.phpをいじりたくない人はプラグインを使いましょう。

3.表示に必要なデータの読み込み順などを最適化する

 
WEBサイトを表示するためには様々なデータを読み込む必要がありますが、モノによっては必ずしも読み込む必要のないものがあります。例えばスクロールしないと見えない部分の画像や直接は見た目に何の影響も与えないWEB解析用のJavaScriptなどはその代表例です。
 
それらのデータがもし「読み終えるまではWEBページを表示してはだめよ」みたいなコードの書き方担っているのであれば「僕のことは無視して先に表示しておいてね」というようなコードの書き方に変更すれば表示の体感速度が劇的に改善されます。
 

① 表示を妨げる(レンダリングブロック)要素を排除する

 
この施策の肝はやはり表示を妨げる要素をなくするということです。その方法にはいくつかやり方があります。
 

JavaScriptは基本的に「defer」

 
おおよそ表示を妨げる要素の多くはJavaScriptです。CSSもGooglePageSpeedInsightから指摘を受けることが多いですが、実際の体感速度上での影響はJavaScriptのほうが圧倒的に大きいです。
 
たまに出くわす「表示が超絶遅いサイト」の多くはデザイン的な仕掛けやインタラクティブな仕掛けのためにJavaScriptを多用しているケースがほとんどです。
 
それはともかくJavaScriptには基本的に「defer(デファー):遅延読み込み」という属性を付与します。文字通り「あとから読み込んでね」という指示を出すのです。
 
それでWEBサイトにアクセスした際に崩れて表示されるようであればその原因を突き止めて当該JavaScriptに対し次のいずれかの施策を実行します。
 
チェック!!
  • 「async(エシンク):非同期読み込み」属性を付ける
  • そもそもそういった属性を付けないがHTML内でフッターで読み込むようにする
  • HTMLインライン上に記述してしまう
  • 特に施策は行わない
 
 
このあたりの調整をプラグインでするなら下記のプラグインがおススメです。
 
 
GoogleAnalyticsなどのように自分でJavaScriptコードを記入する際は

  

 

こんな感じで記述します。
 
なお、プラグインを使わずfunction.phpにコードを記述する方法もありますが初心者向けではありません。
 
人によっては「全てAsync」を薦める人もいますが、JavaScriptに依存するテーマを利用しているときはその方法のほうが良いと私も思います。ただ、そんなテーマは特別の事情がない限りは使わないのが原則です。
 
 

クリティカルCSSを使う

 
例えばトップページを表示するのに個別記事でしか使っていないCSSとか問い合わせページでしか使っていないCSSとかも一緒に読み込むのは無駄ですよね。クリティカルCSSとは「サイトの表示に最低限必要なCSS」のことだと思ってください。最低限必要なCSSをインライン化すれば、残りのCSSは無視(deferやasync)して表示させても問題ないよねってアプローチがこの施策です。
 
この施策を行うのに最も適したやり方は「クリティカルCSS機能をサポートするテーマを利用する」という方法です。テーマの機能を有効化すれば何もする必要がありません。
 
もしそういうテーマでなく、自分で必要なCSSを抽出することもできないのであれば次のサービスを試してみてください。URLを入力するとクリティカルCSSが生成されます。ただし、正確性はそれほどでもないのであしからず。
 
 
 
クリティカルCSSが生成されたらテーマのheader.phpなどに書き込むか次のプラグインで挿入してあげるとよいでしょう。
 
 

CSSが多くなければすべてインライン化する

 
クリティカルCSSを生成するのが面倒な時はいっそすべてのCSSをインライン化してもよいと思います。CSSのデータ量が40kb以下であれば全く問題はありません。
 
MEMO

※インライン化とは
コードを別のファイルにして読み込みコードをHTML内に記述するのではなく、直接HTMLコード内に記述する方法。詳しくはググってください。

 
 
なお、プラグインであれば前述のAutoptimizeを使えば簡単にインライン化が可能です。
 
手動でインライン化するCSSを生成したいのであればこのあたりのサービスを使いましょう。
 

参考

CSS inliner

 
それか、利用中のテーマのCSSをそっくりそのままインライン化してしまえばよいです。
 
ただし、あまりインライン化しすぎると読み込むCSSのデータ総量が増えますのでほどほどにしましょう。
 
 

② 【必須】画面下の画像は遅延ロードする

 
スクロールしないと見えないような位置にある画像はスクロールしてその場所に来たら見えるようにしてもなにも問題ありません。
 
この遅延ロードのことをしばしば「LazyLoad」という言葉で見かけます。プラグインを探す時もLazyLoadで探せば数多くのプラグインが見つかるはずです。
 
いくつかのプラグインを試してサイト表示に不具合が出なかったものを使うと良いです。LazyLoad系のプラグインも他のプラグインやテーマとの相性があります。インストールすることでむしろ表示が遅くなることもあります。しっかりと検証して導入してください。
 
ちなみに最初からテーマでサポートされているのがベストです。テーマでサポートされていれば確実に表示は速くなります。
 

③ 無駄なスクリプトを読み込まないようにする

 
1つのプラグインで数多くの機能を有するものは便利ですが無駄なJavaScriptを読み込んでいるものも多いです。
 
以下のサイトで解析するとどのようなJavascriptの読み込みに時間がかかっているのかがすぐにわかります。
 
 
初心者には難しいかもしれませんが、「明らかに使っていないだろこれ」というようなスクリプトがあれば最初から読み込まないようにするとよいでしょう。
 
具体的に読み込ませない方法はいくつかありますが、最も簡単な方法は以下のプラグインを使って特定のプラグインを特定のページ以外では無効にするという方法があります。
 
 
ただし、これはプラグインそのものに対するコントロールなので、JSファイルそのものを細やかにコントロールしたいときはGonzalesといった有料プラグインを利用するしかありません。
 
 

④コメント欄を遅延ロードするか表示しない

 
もしワードプレスの個別記事にコメントが多数寄せられていればその表示にもかなりの時間がかかります。
 
そういう場合はコメント欄を遅延ロードするのも1つの手です。次のプラグインで簡単に実装できます。
 
 
逆にほとんどコメントがないというのであればコメント自体をさせない設定をしてもよいかもしれません。読者とのコミュニケーションはツイッターなどのSNSでやるというのでも決して悪いわけではないのです。
 

⑤ FontAwesomeはSVGを使うかicomoonを使う

 
世界で最も利用されているアイコンフォント「FontAwesome(フォントオウサム)」はテーマやプラグインで標準サポートされているケースも多いです。しかしながらFontAwesomeを利用しているのであれば少し注意が必要です。
 
FontAwesomeを利用する際、ほとんどのケースで外部CSSを読み込むことで表示しているいます。しかしながら、このCSSは読み込みが遅くレンダリングをブロックする原因となりやすいのです。そこでasyncやdeferの属性を与えるわけですが、そうすると今度はCSSの読み込みが終わった後に表示がずれるとか一瞬点滅するという現象が起きることがあります。
 
もしこのような表示上の問題が発生するようであれば、FontAwesomeをSVGで読み込みLazyLoadを有効にすると自然な感じで読み込みがスタートして表示崩れも起きにくいです。
 
またicomoon等のサービスを使って必要最小限のアイコンフォントを読み込むのも有効な方法です。
 

参考

IcoMoon

 
プラグインがデフォルトでFontAwesomeのCSSを読み込むように設定されているのであればそれを解除するコードをfunctions.phpに書き込むか前述のGonzalesというプラグインでコントロールしましょう。
 

⑥ 日本語WEBフォントは極力使わない

 
日本語WEBフォントは利用することで非常に独創的なサイトを作りあげることができますが、データ量が1MBを超えるため確実に表示は遅くなります。また、asyncなどの属性を付加するとWEBフォントの読み込み後に一度テキストが画面から消えて再度WEBフォント適用後のテキストで表示されるという問題が発生します。この点滅問題に対処するにはasyncなどの属性を付けないようにするしかないのですが、そうすると表示が1秒以上遅延することもあります。まさに堂々巡り。
 
もともと表示が遅いサイトであれば気にならないのですが、2秒以下で表示されるサイトではおそらくかなりストレスを感じるようになります。
 
日本語WEBフォントに関する対処方法は
 
1)使わない
 
2)使うときはプリロードなどの画面エフェクト(くるくる回ったりするやつ)を使用して不自然さを避ける
 
という対処になります。
 
高速表示を目指すなら「使わない」が正解です。ちなみに当サイトではNotoSansJapaneseをfont-familyで指定していますが、WEBフォントとして読み込まず、PC等にインストールして使っているデザインにうるさい人にだけローカルデータを使って表示されるようにしています。
 
 

4.その他読み込みの仕組みを最適化する

 

① プリフェッチ・プリロードする

 
例えば外部のCSSやJS等を使用するときはプリフェッチを使うと読み込みが速くなります。
 
※プリフェッチ・プリロードとは
プリフェッチもプリロードも日本語訳すると「事前読み込み」になります。細かい違いは捨ておいてください。
 
MEMO

※プリフェッチ・プリロードとは
プリフェッチもプリロードも日本語訳すると「事前読み込み」になります。細かい違いは捨ておいてください。

なお、プリフェッチやプリロードをサポ―トするプラグインはいくつかありますが次のプラグインが便利です。
 
 

参考

InstantClick

 

② AjaxやPjaxを使う

 
より軽快にページ遷移をするための施策としてAjaxやPjaxといった技術を利用することも可能です。両方ともプラグインがあります。うまくはまれば爆速サイトが出来上がりますが、技術的にとても繊細な調整が必要なので私は使用をあきらめました。
 
 

参考

WP-PJAX

 
両方ともサイト内の移動時に必要最小限のファイルのみ読み込もうというアプローチのプラグインですが、Pjaxのほうが基本的に表示が速いです。
 

③ 【必須】プラグインを最適化する

 
ワードプレスを多機能化するとどうしてもプラグインが増えてしまいます。プラグインが増えると読み込むファイルが多くなるためどうしてもWEBサイトの表示が遅くなります。ついでに言うとGooglePageSpeedInsightのスコアが非常に悪くなります。それはもう恐ろしいくらい。
 
そこで、サイト全体の表示等に係るプラグイン(フロントエンド側で使うプラグインとも表現)と特定のページでしか使わないプラグインと管理画面でしか使わないプラグインに切り分けで読み込みを制御することでこの問題を解決します。
 
すでにご紹介していますが以下のプラグインが無料で使える中では最も良い選択肢です。
 
 
このプラグインはもしGooglePageSpeedInsightのスコアを向上させようというのであれば必須です。たとえ30個のプラグインを有効化しても、このプラグインで上手に制御すればスコア100点をとることは可能です。(使わないと50点以下も普通です)
 
体感速度も多少良くなります。導入していない人はぜひ検討してください。
 

④ テーマを最適化する

 
テーマの中にはどうやっても高速化は無理だろ・・・というテーマも少なくありません。そういう場合はテーマをすっぱりと切り替えるか、無駄なコードを削除することで改善できます。
 
ちなみに、高速化が難しいテーマの特徴ですが
 
チェック!
  • GoogleWEBフォントを推してくる
  • ページビルダーを標準搭載
  • 読み込みJavaScriptが多い
  • とにかく多機能・高機能
  • 投稿一覧ページで大きなアイキャッチ画像を多用する
  • Poファイルでマルチ言語化対応させている
 
というものがあります。
 
「何でもできる=データが重い」
 
という基本原則だけは忘れないようにしましょう。
 
ちなみに使用していないCSSを探す場合は次のサービスを使うとよいかもしれません。
 

参考

Unused CSS

 

⑤ ServerPushを使う(HTTP/2のみ)

 
サイトがHTTPSにせよHTTPにせよHTTP/2に対応していればサーバープッシュという機能を使ってデータの配信プロセスを短縮できます。何言っているかよくわからないという人は無視してかまいません。
 
一応ザックリ説明しておきます。通常は読み込むファイルごとに「ファイルを送ってね」という指示(リクエスト)をブラウザが出すので最低でも20回くらいのリクエストがあるわけです。
 
ところがサーバープッシュを利用すると最初の「ファイルを送ってね」という指示をサーバーが受けると「どうせ必要なんだから関連するファイルを全部送るよ」と判断して送り付けてしまうという機能なのです。
 
サーバープッシュを使うには次のプラグインをまずは使ってみると良いです。
 
 
手動でやるなら次のコードをhtaccessに書き込んでみてください。
 

 

 
ブラウザにキャッシュされたCSSを優先したいときは次のコードを参考に改編して使うと良いらしいです。
 

 

5.データの生成や反応を早くする

 
そもそもの環境面の話を少し。すでに運営している人は難しいのでしょうが、これからサイトを開設する人向けのサイト高速化のヒントです。
 
 

① 高速なサーバを使う

 
当たり前ですが高速なサーバーを使うことは基本です。専用サーバーやクラウドサーバーを安く使うよりは高機能なレンタルサーバーをそれなりのプランで利用することをお勧めします。
 
少なくとも
 
チェックリスト
  • SSDを使用していること
  • メモリの容量、CPUのコア数が多いこと
 
この辺りをチェックして比較して選択しましょう。
 

② PHP7を使う

 
ワードプレスはPHPでWEBサイト表示に必要なデータを生成しています。そのため、PHPのバージョンとして「7」がサポートされていることが重要です。
 

③ LiteSpeedもしくはNginx対応

 
生成したデータをインターネットを通じてやりとりする役割を担うのがWEBサーバーソフトです。
 
Apache(アパッチ)< Nginx(エンジンエックス)< LiteSpeed(ライトスピード)
 
の順番で性能が良くなります。
 
体感速度はそれほど変わりませんが、アクセス数が多くなった時には大きな差があるかもしれません。
 

④ HTTP/2やQUIC対応

 
HTTP/2もQUICもデータ配信の規格のようなものです。比較的最近普及した技術なので、これらの規格に対応しているサーバーはおススメサーバーといえます。
 

⑤ MySQL8対応

 
これは今後の話になりますが、ワードプレスのデータベースとして現在普及しているのはMySQL5.xというバージョンです。
 
それが最近「8」にジャンプアップしました。性能も一気に上がり、かなりの高速処理が可能になったそうです。
 
2018年5月現在、ワードプレスそのものがまだ「8」に対応していない現状ですが、いずれ対応してくると思われます。いずれ必要になる知識として覚えておくと良いです。
 
 

6.AMP・PWAに対応する

 

① AMPに対応する

 
AMPを使うとモバイルでのサイト表示が恐ろしいほど高速になります。0.1~0.3秒で表示されます。
 
ただし、WEBサイトの表示がAMP特有のシンプルなものに変更され、広告など一部表示されないコンテンツも出てくる可能性があります。
 
AMPでもデザインやコンテンツが維持されるようなテーマを選択するか、高機能なAMP対応プラグインを利用することでこれらの問題をある程度解決できます。
 
AMPを使うか使わないかは好みの問題ですが、サイト表示の高速化がどうしてもできないという場合はAMPで高速化するのが最も楽な方法になります。
 
おススメのプラグインは以下の2つです。
 
シンプルにAMP対応する
 
多機能にデザインを維持してAMP対応する
 

② PWAに対応する

 
PWA対応は2018年から向こう3年間はホットなテーマです。AMPはGoogleにキャッシュデータを残して表示高速化する技術ですが、PWAはブラウザ側に専用のプログラムを置くことで表示高速化する技術です。専用のプログラムがブラウザ側で動いているので、データの読み込みとページとしての構築がかなり速くなります。
 
また、PWAの最大の特徴は「まるでアプリケーション」のような体験ができることです。詳しくは割愛しますが、WEBサイトがスマホアプリになるというイメージがわかりやすいです。
 
ただ、ワードプレスをPWA対応させるだけの価値があるプラグインは2018年5月現在まだありません。WEBサイトのURL表示部分がなくなっただけじゃない?という程度のものです。
 
ブログの更新をプッシュ通知できるという特徴もありますが、もうしばらくは様子見で問題ないです。
 
 

7.【高難度】Wordpressをバックエンド専用にする

 
最後に、かなり難易度が高いですがWordpressをコンテンツを作るためだけに機能させ、ユーザーが見るフロントエンド側は別のサーバーに静的に構築するという方法もあります。以下参照です。
 
 

ーー最後に

 
以上、かなり長文になりましたがこれでもザックリとしたワードプレスWEBサイト表示高速化の方法です。
 
個別の詳しい方法についてはそのうち投稿します。
 



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

© 2019 ~いまどきワードプレスデザイン研究所 by Ganapati