サイトの表示スピードをプラグインでアップしよう！【WordPress】

こんにちは、プロクラスの中山です！
最近、たまたまなのか流行りがあるのか、サイトの表示スピードでお悩みの方からのご相談が多く寄せられております。

ワードプレスでいろいろな会社・個人の方のサイトを制作することが多いのですが、ワードプレスはたくさんの機能を追加してくれるためとっても「重い」サイトになりがちです。
あなたのホームページのスピードはいかがですか？

サイトの表示速度を調べよう！

Googleからサイト表示速度を調べるためのツールが提供されています。
まずは自分のサイトのURLを入力してどれくらいのスピードか調べてみましょう！

■Google Speed Insights（グーグルスピードインサイト）
https://developers.google.com/speed/pagespeed/insights/?hl=ja

また、スマホでの表示をチェックしてくれる下記のツールもあります。

■Test My Site（テストマイサイト）
https://testmysite.withgoogle.com/intl/ja-jp

ちなみに、これらのモバイル（スマホ）での点数はかなり厳しめになっております！
Wi-Fiや早い回線につながっている人なら少々数字が悪いサイトでもパッと表示されるのですが、こちらのテストツールは3G回線で計測しているためかなり遅めの環境を想定されています。

頑張ってもあまり数値がよくない時は、気にしすぎないようにしましょう・・・

サイトのスピード改善をやってみよう！

それでは、早速実際にスピード改善をやったビフォーアフターを見ていきましょう！
今回は、「簡単ホームページ作成！初めてのワードプレス」の授業で作るサイトをサンプルにしてみます。

サイトの環境

いつも授業で使わせていただいている「ロリポップ」のレンタルサーバーにサイトを設置しています。
授業で作ったサイトをそのまま使われている方はみなさん同じ環境ですね。
今回はスタンダードプランを選択しているので、ライトプランよりもスピードが早いようです。これはワードプレスを動かしているPHPというプログラムの動作スピードの違いですね。

CGI版PHPよりもモジュール版PHPの方が高速なレスポンスが実現可能とのこと。
サイトはphp7.1モジュール版で作成します！

何も編集していない状態の表示速度

このままサイトを運用する人はなかなかいないと思うのですが、全く記事も画像も追加していない状態の表示速度も測っておきました。テーマはTwenty Nineteen。素っ裸の状態です。

味気ないサイトだけあって、めちゃくちゃ表示スピードは早いですね。
スマホは98点、パソコンは99点とほぼ完璧な状態です。

モバイル（スマホ）の表示スピード計測結果

パソコンの表示スピード計測結果

ここからは授業で完成させたサイトを使って計測していきます！
先ほどのまっさらな状態との違いは画像が増えたこと、お問い合わせフォームやスライドショーなど、読み込むプログラムの数が増えたことです。

サイトのイメージ

授業の通りサイトを作ったらなかなか優秀な表示速度の早いサイトができてしまったので、人為的に遅いサイトを作りました。

通常よりも画像を多く使用し、必要以上に大きめの写真を使ったりしております。
Googleマップ、メールフォーム、Facebookのタイムラインも埋め込んでみました。
内部のプログラムをちょっとでも多くするために、授業で使うプラグインに加えてお問い合わせフォームの確認画面とSEO対策用プラグインを入れてみました。

修正前のモバイル（スマホ）の表示スピード計測結果

修正前のパソコンの表示スピード計測結果

余計なものをわざと入れた甲斐あって、スマホでまぁまぁ遅めのスコアを叩き出しました。サイトの表示速度を遅くするのは多くの場合画像です。
スマホは98点から30点へダウン。PCの方は81点とそこまで悪くはないようですね。

表示スピードアップのための改善点

Googleスピードインサイトは親切に「ここを直したらいいよ」という内容を教えてくれます。ありがたいですね。
下記はスマホ版でのアドバイス内容です。早速直していきましょう！

しかし・・・

Oh・・・上級者向けの表現ですね。
次世代フォーマット・・・
オフスクリーン・・・
レンダリング・・・

カタカナの謎の用語が飛び交っています。ず、頭痛が・・・・！！！

でも大丈夫！

便利なプラグインがあります。そう、ワードプレスなら。

効率的な画像フォーマット

画像に余計なデータがあったり、でかすぎるサイズの写真をあげていたり、そんなことって多いですよね。
特に、デジカメやスマホで撮った写真には画像データ以外にいろいろな情報が入っていたりします。

EWWW Image Optimizerというプラグインを入れておけば不要なデータを削除して画像を圧縮することができます！今までにアップロードした写真を一括で圧縮することができます。

■EWWW Image Optimizer　プラグインのページ
https://ja.wordpress.org/plugins/ewww-image-optimizer/

■設定方法（外部サイトのブログ記事です）
https://mixart.jp/blog/wordpress/ewww-image-optimizer-setting/

今回は64枚の画像を圧縮したようです。
しかし、もともと規格外にでかすぎる画像は使っていなかったので、そんなに点数は変わらず・・・
スマホでは1点アップ、PCは2点アップです！デジカメやスマホなどで撮った写真が多い人はもっと点数がアップするかもしれませんね。

※画像を圧縮しすぎると画質が悪くなることがあります。もしもの時のために自分のパソコンにも元の画像をダウンロードしておいてバックアップしてから圧縮するのがおすすめです。

画像圧縮後のモバイル（スマホ）の表示スピード計測結果

画像圧縮後のパソコンの表示スピード計測結果

オフスクリーン画像の遅延読み込み

続いて、オフスクリーン画像の遅延読み込みを改善してくれるプラグインを設置してみましょう。
これはつまり、画面にまだ表示されていない下の方の画像は後回しに読み込んで、まずは見えてる部分の画面をご用意しますよ〜、という内容です。
今回のように縦長の画面で画像多めのサイトにはおすすめです。

ここで使用するのは「a3 Lazy Load」というプラグインです。
「Lazy Load」のためのプラグインはいくつも種類があるのですが、今回はこちらを。

■a3 Lazy Load　プラグインのページ
https://ja.wordpress.org/plugins/a3-lazy-load/

■設定方法（外部サイトのブログ記事です）
https://yururitona.com/a3-lazy-load

なかなかの効果！スマホは一気に12点アップです！PCも3点アップしました！

オフスクリーン画像の遅延読み込み後のモバイル（スマホ）の表示スピード計測結果

オフスクリーン画像の遅延読み込み後のパソコンの表示スピード計測結果

ただ、ご注意いただきたいのは目次のプラグインなどをお使いの方です！
画像を一時的に表示しないことによって画面の高さが変わるので、ページを行き来する中で前のページに戻った時に正しい位置が表示されないことがあります。
そんな場合は、似たような名前ですが「Lazy Loader」というプラグインがおすすめです。
画像の高さを保ったまま、読み込みだけを遅くしてくれます。

その他、一時的に画像を表示しないことによる表示不具合などが起こる可能性があるプラグインですので、注意が必要です。

レンダリングを妨げるリソースの除外

これは簡単にいうと、いらないプログラムの読み込みを後回しにするみたいな感じでしょうか。functions.phpというプログラムファイルに書き込んで実施する方法もあるのですが、このファイルを編集すると間違ってサイトが表示されなくなったりするので危険です。
そのため、こちらもプラグインでやってみましょう。

使用するプラグインは、Async JavaScript。

細かい設定はせず、下記2箇所をバシッと押してやりました。
クイック設定で一気に解決です。

※このプラグインの影響でうまくプログラムが動かなくなる場合もあるかもしれないので、その場合は細かい調整が必要です。おかしいなと思ったらプラグインをOFFにしてください。

※わかりやすくするために日本語に翻訳して表示していますが、実際の管理画面の表記は残念ながら英語でした。

■Async JavaScript　プラグインのページ
https://ja.wordpress.org/plugins/async-javascript/

■設定方法（外部サイトのブログ記事です）
https://lazy-se.net/wp-plgin-async-javascript/

おお！ついにスマホ版で「遅い」を脱出しましたよ！！
スマホで10点アップの53点、PCでは2点アップの88点です！

レンダリングを妨げるリソースの除外後のモバイル（スマホ）の表示スピード計測結果

レンダリングを妨げるリソースの除外後のパソコンの表示スピード計測結果

ファイルの圧縮

さて、さらに！今度は画像だけじゃなくファイルの中身も圧縮したいと思います！
下記のような感じです。

圧縮前のHTML

圧縮後のHTML

こ、これは・・・
改行がなくなって読みにくくなっとるやないかーい！

しかし、パソコンやコンピュータは余計な改行がなくなった方が読みやすいらしいんです。使用したプラグインはこちら。

■Autoptimize　プラグインのページ
https://ja.wordpress.org/plugins/autoptimize/

■設定方法（外部サイトのブログ記事です）
https://pasolack.com/wordpress/autoptimize/

さて、どうなったかな〜・・・53点から、49点に。

って数字悪なっとるやないかい！（一時的な数値かもしれないのですが）
頭きた！もっといらないもの消してやる！Autoptimizeの追加設定だ！

「絵文字を削除」、「静的リソースからクエリー文字列を削除」にチェックをつけてみました。

ファイル圧縮後のモバイル（スマホ）の表示スピード計測結果

ファイル圧縮後のパソコンの表示スピード計測結果

きましたね！スマホが12点アップで65点、PCが9点アップです！
もうPCは97点、ほぼ満点！燃え尽き症候群です！！

ですが、最後にもうひと押し！キャッシュプラグインというものも設定してみましょう。

WP Fastest Cache

このプラグインをONにすると管理画面の上と左メニューに虎ちゃんマークが表示されます。（本当はヒョウ。速くなるぞ〜ってことです。）

■WP Fastest Cache　プラグインのページ
https://ja.wordpress.org/plugins/wp-fastest-cache/

■設定方法（外部サイトのブログ記事です）
https://design-plus1.com/tcd-w/2018/07/how-to-use-wp-fastest-cache.html

こんな感じに設定してみました。

するとスマホ版が65点⇒76点に。11点アップです！

ただし、設定によってはキャッシュが不具合を起こしてしまうこともあります。
ページを更新したはずなのに古い画面が表示されて直っていない！などなど。
こちらを設定される場合はちゃんとおかしなところがないか各ページを確認するようにしましょう。

・・・というわけで、とりあえずこんなとこにしとくかな。

テストマイサイトでも確認しておきましょう。

Test My Siteでの結果

めちゃ速い！やったー！ってユーザビリティのガイドラインを満たしていないってどういうことだ！
私が設定したプラグインのうちどれかの働きによってスマホでの表示がうまくいっていないようです。。
「ボタンとかが小さすぎてスマホユーザーには押しにくいよ！」みたいなことを言ってきています。

一つ一つプラグインを切ってはテストし、また入れ替えてテストをした結果、「a3 Lazy Load」がこのサイトと相性がよくなかった模様です。
他のLazy Loadプラグインに入れ替えて試してみるなどの対応が必要ですね。

今回はこれを切っても良好な結果が出ているので、良しとしましょう！このような結果が出てもモバイルフレンドリーテストで「スマホ表示に対応しているよ！」という結果が出たならOKです。

スピードアップ結果発表！

最後にa3 Lazy LoadはOFFにしましたが、スマホで69点、PCで97点という結果になりました！
無事にスマホのユーザビリティ問題もクリアです。ユーザーにはちゃんとしたサイトが見えていても、Googleがエラーと判断したら検索結果での順位を下げられてしまったりするかもしれないので、念の為ちゃんと直しておきました。

もっと細かく直してさらにアップすることも可能ですが、プラグインで簡単にできるのはとりあえずこのくらいでしょうか。この先はちょっとプロのテクニックなどなどが必要になってくる範囲です。（他にもいいプラグインがあったりもするのですが）

サイトによって適した対処法・プラグインは異なります

今回はテストサイトでプログラムが動かなくなろうが構わないというスタンスでどんどん設定を追加していきましたが、サイトによっては大事なシステムが動かなくなってしまったりする場合もあります。
サーバーの環境によって、またはお使いのサイトのテーマファイルによって速度や適した対処法は異なります。
一つ一つしっかりチェックしながらプラグインを設置するようにしましょう！