サイトの表示速度を上げて離脱を防ごう！【PageSpeed Insights】

おっしーです。

今回はページの表示速度についてです。

あなたはネット検索で何かを調べているとき、
サイトタイトルを見て
「私が求めていた情報はこれかも！」

と感じてサイトをクリックしてみたものの、
サイトが表示されるのが遅くてページが表示される前に戻ったことはありませんか？

ページ表示速度は遅ければ遅いほどユーザーが離脱していきます。

そのため表示速度を早くすることはとても重要になってきます。

特に私が実践しているPPCアフィリエイトは
１クリックに対して広告費用が発生します。

クリックされたのにも関わらず、
ページ表示速度が遅い事で離脱されてしまったらどうでしょうか？

せっかくページを作っても、
内容をみてもらう前に離脱され、
広告費だけがかかっていく・・。

非常にもったいないですよね。

そこで今回は比較的簡単にページ表示速度を早くする方法を解説していきます。

まずはページ速度を測ってみよう！

ページ速度を測る方法はこちら↓

「PageSpeed Insights」

PageSpeed Insightsはパソコン表示とモバイル表示の二つの表示速度の解析をしてくれます。

やり方は計測したいURLを入れて「分析」ボタンをクリックするだけ。

＞＞PageSpeed Insights

今回は試しに私のブログを入れてみました。

まずはモバイル表示。

40ポイントはさすがに遅すぎますね・・。
赤いラインは遅い判定ですので悲しい・・。

続いてパソコン表示。

パソコン表示は83ポイントと割と良さそうですね。

平均上位くらいのポイントなのでパソコン表示はそこまで問題ではなさそうです。

ちなみに改善点も表示してくれます。

モバイル表示の改善点はこちら。

改善できる項目は主に5つ。

今回はモバイル表示が遅いようなので、
この中から4つの項目を改善してみます。

先にお伝えしておきますが、次世代フォーマットでの画像配信という項目は無視します。

理由は現在使われている主要ブラウザが次世代フォーマットでの画像というのに対応していないからです。

いくらスピードをあげるために画像の配信方法を変えたとしても、各ブラウザに対応していなければ意味がありませんよね。

全てを改善しなければならないわけではないので、
改善項目に上がっているものの中から出来る範囲で修正していきましょう。

LazyLoad系プラグインで画像の読み込みを調整する。

中でも一番短縮できる時間が長いのが
✅「オフスクリーン画像の遅延読み込み」
という項目ですね。

この項目は簡単に言うと、
最初に必要最低限の画像だけを読み込み、
「画面外の見られていない画像はスクロール時に読み込むようにすれば早くなりますよ。」

ということです。

ページへのアクセスがあったとき最初に表示させるべきなのは
「ページの上部」ですよね。

私のブログで言うと、

この画面です。
ヘッダーと4つのピックアップコンテンツ。
そしてカテゴリー別ボタン。

アクセスがあったときはこれらを一番最初に表示させたい訳です。

そのため、サイト全部を最初に読み込むのではなく、
ヘッダーを含むページ上部のいくつかの画像を最初に読み込むようにすれば良いという事になります。

オフスクリーン画像の遅延読み込みにもってこいなのが「LazyLoad」というプラグインです。

LazyLoadは画像の読み込みを制限してくれるプラグインです。

オフスクリーン画像の遅延読み込みをする際にはもってこいです。

Lazy load系のプラグインはいくつかあるのですが、
今回は代表的なLazyLoadの導入手順を解説していきます。

プラグインの追加は
Wordpress管理画面→プラグインの追加から「Lazy Load」と検索すればインストールすることが可能です。

＊必ずバックアップを取ってからインストール⇒有効化してください。

赤枠で囲ったプラグインをインストールして有効化すればOKです。

使っているテーマによって画像が表示されないなどの不具合が起こる可能性もありますので事前に調べてから自己責任で進めて下さいね。

LazyLoad系プラグインはいくつか種類があって、
使っているテーマによって適応度が変わってきます。

どちらを使うにせよバックアップはお忘れなく。

有効化したら画像を読み込むまでの数値を変更して、
余裕を持って画像が表示されるように調整しましょう。

ワードプレス管理画面⇒プラグイン編集でLazyloadを選択。

js⇒lazy-load.js内にある
distance:200という数値を400にしましょう。

画像だと6行目ですね。
数値だけを変えて更新すればOKです。

この変更は「画像を400pxまで近づいたら読み込む」ように設定しています。

初期設定の200のままだと、
急なスクロールについてこれなくなり、
画像が遅れて表示される可能性があります。

400にすることで「余裕を持って画像を読み込むようにする」という変更となります。

読み込み調整をした結果は？

パソコン表示が90ポイントで合格ラインの緑色に。

モバイル表示は約20ポイントの上昇ですね。
改善項目もオフスクリーンに関する項目が消えました。

画像の圧縮を行おう。

これに関しては私のブログでは既に行っているので先ほどの画像にある改善点には現れていません。

画像1枚1枚の容量が多ければそれだけ読み込みに時間がかかりますので、
圧縮出来るのならしておきましょう。

簡単な方法としては、
「EWWW Image Optimizer」というプラグインを入れる事です。

EWWW Image Optimizerの導入

これは画像を自動で圧縮してくれるプラグインです。

これも先ほどと同様に管理画面⇒プラグインの追加で「EWWW Image Optimizer」と打てば出てきます。

画像左ですね。

インストールしたら有効化します。
＊必ずバックアップを取って下さいね。

設定変更は数点のみで大丈夫です。

一つ目は基本(Basic)項目のMetadataという項目がチェックされているかどうかの確認。
確認ですのでチェックが入っていたらOKです。

不要なテキストデータなどを削除してくれるようになり、
画像をより圧縮してくれます。

二つ目はConvertの「コンバージョンリンクを非表示」
にチェックが入っているか確認します。
チェックが入っていればOKです。

こちらは画像の質を下げないためのチェックとなります。

基本的にはこの二つの設定が確認出来ればOKですが、
より詳しく設定したい方は使い方を検索してみて下さい。

設定が確認出来たら、
ワードプレス管理画面のメディア⇒一括最適化という項目をクリックしてください。

「最適化されていない画像をスキャンする」ボタンを押して、
スタートします。

スタートしたら圧縮の完了を待ちましょう。

これで画像の圧縮は完了です。

今回私のブログではすでに圧縮は完了しているので、
最初のPageSpeed insightのポイント画像は圧縮後のポイントです。

サーバー応答時間の短縮をしよう

続いては2つ目の「サーバー応答時間の短縮」という項目をやっていきます。

こちらは言葉の通り、
「アクセスがあった時点からサーバーが応答するまでの時間を短くして下さいね。」
という事になります。

主に出来る事は
✅ハイスペックレンタルサーバーに乗り換える
✅レンタルサーバーでPHPバージョンをアップさせる
✅キャッシュを持たせてページ表示速度を改善する

の3つです。

レンタルサーバーを乗り換えるに関しては
変えるか変えないかの話だけなので割愛します。

私も使っているエックスサーバーは
かなりハイスペック＆コスパ◎なサーバーなのでおすすめです。

今回は二つ目三つ目に挙げた改善点を紹介していきます。

1.PHPのバージョンをアップさせる。

サーバーに関する事項は使っているサーバーに依存するものですので、
今回は私が使っているエックスサーバーに関する情報となります。

サーバーの応答時間を短縮するのに一番手っ取り早い方法が
「PHPのバージョンをアップさせること」
です。

私のサイトのPHPのバージョンを確認してみると
PHP7.1.18となっていて、最新はPHP7.2.6となっています。

バージョンアップさせることで純粋にパフォーマンスが強化されるとのこと。

PHPの動作が強化されればページの表示速度も速くなりますので、早速最新版に変更してみます。

＊お使いのテーマが変更後(今回はPHP7系)に対応しているかどうかあらかじめ確認してくださいね。不具合が出ることもありますので自己責任で確認してから変更推奨です。

変更は「変更後のバージョン」部分を最新版にして「変更」ボタンを押すだけ。

変更後、現在のバージョンが最新のものに変わっていればOKです。

現在PHPが7系じゃない方は変更することで速度が急上昇することもあるようなので、
一度サーバーで確認してみて下さい。

キャッシュ系プラグインで高速化を目指す。

サイトはブラウザからのアクセスがあった時点で1からPHPなどを呼び出してページを生成しています。

キャッシュ系プラグインは導入することでページを1から読み込むのではなく、
「事前に保存していたキャッシュを元に動かす」のでページ表示スピードが速くなるというイメージです。

インターホンがなってからお店を開けるのではなく、
あらかじめお客さんがくる事を想定してお店を開けておく
みたいな感じですね。

今回そのために導入するのが「WP Super Cache」というプラグインです。

私が使っているWordpressテーマ「JIN」のマニュアルでも便利なプラグインとして紹介されています。

ただし、キャッシュ系プラグインの注意点として、
✅CSSが反映されない
✅ユーザーからのコメントが反映されない
✅サイトの修正や記事内容の修正が反映されない

などの不具合もあるようです。

＊導入する前にあなたが使っているテーマで問題がないのか、
あなたのサイトにとって不具合が起きないのかを事前に調べてから自己責任で導入するようにして下さい。

追加方法は例によってWordpressの管理画面からプラグインの追加。

有効インストール数100万以上でこれだけの高評価を持っているのはすごいですよね。

インストールが完了したら有効化の前に「.htaccess」ファイルのバックアップを取っておきましょう。

バックアップはFTPサーバーに入って別の場所にコピーしておけばOKです。

問題なければ有効化していくつかの設定をしましょう。

WP Super Cacheの設定画面に飛び、
キャッシング利用にチェックを入れてステータスを更新します。

これでキャッシングの利用が開始されるようになります。

結果は？

パソコン表示が93ポイントに。
モバイル表示が68ポイントになりました。

改善項目もだいぶ短縮されました。↓

ビフォー

アフター

WordPressはプラグインを入れて有効化したりちょっとした修正を加えるだけでとても簡単に対応できますね。

レンダリングを妨げるリソースの除外について。

これに関しては指摘されているファイル次第となります。

クリックしてみると上記画像のように
「何が遅くなっている原因なのか」を表示してくれます。

1つ目は「dashicons.min.css」Wordpressの管理画面に使われているようなアイコン。
２つ目は「swiper.min.css」スライダー機能のCSS。
３つ目は「wpp-4.2.0.min.js」wordpress-popular-postsのJS。
４つ目は「custom-css」カスタムCSS。
５つ目は「css?family」GoogleフォントのCSS。

これらの内、改善できる部分を改善していきます。

まず３つ目のjsファイルですが、
記事の人気順を表示してくれるプラグイン
「wordpress-popular-posts」のファイルでした。

使っていないのにも関わらず有効化していたので早速停止しました。

これで一つは解消ですね。

ここからはおすすめの最適化プラグイン
「Autoptimize」を使う方法を解説していきます。

Autoptimizeを追加する。

「Autoptimize」はHTML・JavaScript・CSSを最適化してくれるプラグインです。

チェックをいれるだけで簡単に圧縮してくれるのでおすすめです。
例えばCSSなどのファイルは編集する際改行が入っています。

Autoptimizeを使うことで
改行を消してCSSの無駄を省き、
同じ種類のファイルを結合するなどの最適化をしてくれます。

「改行を消したら文字の羅列だけになって見にくくなってしまうじゃん！」
と思うかもしれませんが元々のファイルを変えてしまう訳ではないので安心してください。

追加は例によってプラグインの追加から「Autoptimize」と打てば出てきます。

有効化したら何を最適化するのかをチェックしていきましょう。

WordPress管理画面⇒設定からAutoptimizeを選択します。

今回はCSSが主な要因でしたので、CSSに関する項目を確認していきます。

チェックするのは
✅CSSコードを最適化
✅Aggregate CSS-files?
✅インラインのCSSを凍結
✅すべてのCSSをインライン化

この４つです。

画像下にある「AutoptimizeからCSSを除外」はデフォルトのままにしています。
この欄にある「dashicons.min.css」は改善項目にもあったWordpressの管理画面アイコンのCSSファイルですね。

Autoptimizeがデフォルトで設定しているという事はあまりいじらない方が良いかなくらいの感覚でそのままにしています。

チェック出来たら「変更してキャッシュを削除」を押せば完了です。

続いて追加項目のチェック。

追加項目ではGoogle Fontsという項目のみ変更しています。

改善ポイントの５つ目にあった
「css?family」というファイルに関する変更です。

「そのままにする」というのがデフォルトになっていると思いますが、
項目一番下の「webfont.jsで非同期にフォントを結合して読み込む」に設定しました。

Google FontsとはGoogleが提供している無料のフォントサービスのことで、
どのブラウザから見ても設定したフォントで表示させることが出来る優れものです。

一番下の項目の「webfont.js」を使うことで
「Google Fontsを使っていてもレンダリングせずに読み込むことが出来るようにするよー」
という意味となります。

こちらもチェックを入れて「変更してキャッシュを削除」で完了です。

変更した結果は？

ビフォー

アフター

最初に停止したプラグイン「wordpress-popular-posts」によって
「wpp-4.2.0」が無くなっています。

そしてGoogle Fontsを非同期にしたことで
「css?family」が無くなりました。

読み込み時間も0.96から0.78に短縮できましたね。

残っている3つの項目については無視します。

というのも私はそこまでプログラミングの深い知識を持っているわけではないので、直接コードを書き換える必要がありそうなものや細かい調整をするのは時間がかかる。

そして私が使っているテーマ「JIN」は定期的にアップデードしてくれるので、仮に直接コードを書き換えてもアプデが来たら書き換えた部分は戻ってしまいます。

指摘されているもの全てを改善しなければいけないと言う事はありませんので、出来る範囲で改善すればOKです。

PageSpeed insightのスコアは・・

モバイル表示が72ポイントに。

パソコン表示が93ポイント。
これは変わらずですね。

まとめ

今回の調整は以上となります。

だいぶ長い記事になってしまいましたが、
今回はサイト表示スピードに関する記事でした。

結果的に
モバイル表示ポイントが40⇒72ポイントと大幅改善。

パソコン表示は83⇒93になりました。

やったことは主に
✅プラグインの追加＋有効化＋調整
⇒画像の読み込みをスクロール時にするように変更
⇒画像の圧縮
⇒CSS・JSの最適化
✅レンタルサーバーでPHPバージョンアップ
⇒PHPの動作速度改善

ですね。

今回は私のブログを例に挙げながらやりましたが、
使っているレンタルサーバー・テーマ・プラグインなどによって指摘される項目は人それぞれです。

Page Speed insightは改善できる項目を教えてくれるので何をすれば良いかが分かりやすいです。

あなたも自分のサイトを測ってみて、
改善出来るポイントは修正してみて下さいね。

ということで今回はかなり長い記事となりましたが、
何か一つでも参考になれば幸いです。

それではこの辺で失礼します。