ブログの「モバイル」表示速度を「Pagespeed Insights」で48点⇒93点にした方法とは

こんにちは♪しゅはりんです。

ブログの表示速度を計測したことはあるでしょうか？

おそらく当記事に興味を持っていただけたということは、「Pagespeed Insights」等のページ速度計測サイトで表示速度を計測したことがあるのではないでしょうか。

ブログを開設してからしばらく経ち、「Pagespeed Insights」の存在を知ったため計測してみました。

トラネコくん

さすがに「レッドゾーン」は焦ったよ！

ブログの表示速度の重要性についての記事を書いていたことや、たしかに体感的にもブログの表示速度がもっさりと感じていたため、本格的に対策してみようと考えました。

最初にインターネットで情報収集してみたところ、WordPressのファイルのコードを編集する方法も多く紹介されていたため、JavaScriptやCSSなど、コードをいじらないと90点台はとれないのか？と考えてました。

ただ、今回特に複雑にコードをいじらずに、あくまでインターネットの情報だけを参考にして、モバイルの表示速度を93点にできました。

もしコードをいじらないといけないのでは？と考えていましたら、その必要はありませんので安心してください♪

どのような流れで設定したのかや、どのようなサイトを参考にしたかを、一連の流れをご紹介します。

同じようにブログの表示速度対策（特に「モバイル」）をしている人に少しでも役に立てば幸いです♪

当ブログの構成

まずは当ブログの構成を記載します。

もし同じような構成でしたら当記事の内容は特に役に立つ部分が多いかと思います。

また、もしWordPressテーマやレンタルサーバーが違っていても、同じような機能や考え方があるかと思いますでの、ぜひインターネットで情報収集してみていただければと思います。

なぜブログの「モバイル」表示速度が大切なのか

Googleが「モバイルファースト」を重視しているため

2018年から、Googleはサイトの評価基準をPCではなくモバイルにするという方針としました。

それまでPCサイトでの表示速度や見やすさを重視していたところ、スマホやタブレットなどの「モバイル」の表示速度や見やすさを重視するようになりました。

シロネコくん

現在のスマホ普及率を考えると、たしかに理に適った判断だよね。

Googleの「モバイルファースト」関する情報は、下記サイトを参考にしました。

参考　モバイルファーストインデックスとは？影響と対応についてまとめ

Googleが「モバイルファースト」を重視するため、いくら「パソコン」の表示速度が高い数値を出していても、「モバイル」の表示速度の数値が低かったら、そのブログはGoogleから評価されないということになってしまいます。

もちろん表示速度以外にも、ブログの評価基準は様々あるとは思いますが、表示速度対策はだれでも定型的に対策できて効果がでやすいため、表示速度対策をしておくにこしたことはないですよね。

Googleがスピードを重要視していることは、「Googleが掲げる10の事実」でも示されています。

以下の記事でも、Googleがスピードを重要視していることについて紹介していますので、もしよければ読んでみてください。

これだけでGoogleアドセンスの合格率が段違い！？「表示速度」対策のすすめこんにちは♪しゅはりんです。 先日、Googleアドセンス審査に「ブログ運用期間17日、記事数６」で合格することができました。 ...

「モバイル」端末でインターネットを利用する人が多数派になっているため

Googleが「モバイルファースト」を重視していることとも関連しますが、現在インターネットを利用している人の多くは、スマホやタブレットなどの「モバイル」端末を利用しています。

私自身もブログを書く場合や、仕事の場面ではパソコンを使うことが多いですが、インターネットを見る場合はスマホやタブレットを使うことが多いです。

おそらく多くの人が同じような状況かと思います。

モバイル端末でブログを見る人が多いということは、いくら「パソコン」の表示が速くても、「モバイル」の表示がもっさいりしていたら、他のページに移動してしまうでしょう。

せっかく記事に興味をもってもらったのに、残念ですよね。。

ブログ記事の内容以外で離脱の原因となる要素は、取り除いておくのがよいでしょう。

そのために当記事の内容が少しでも役に立てば幸いです。

当記事の内容を試す前に実施・把握しておきたいこと

WordPressのバックアップ

WordPressのファイルを操作する場合は、事前にバックアップを取っておくことをお勧めします。

ファイルを操作しなくても、何らかの理由でサーバーのデータが消える可能性はゼロではないため、せっかく書いた記事を守るためにも、定期的にバックアップを取得した方がよいと考えます。

下記記事がとてもわかりやすく参考になりました。

参考　WordPressでバックアップを取る4つの方法（初心者向け）

WordPressの子テーマの作成

WordPressのファイルを編集する際に、テーマ自体のファイルではなく、「子テーマ」を作成して編集することもお勧めです。

テーマ自体にアップデートが入った場合にも、子テーマで編集しておけば、変更箇所をそのまま活用できます。

また、子テーマのファイルを編集してブログがうまく表示されなくなってしまった場合も、テーマ自体には影響が出ないというメリットもあります。

「子テーマ」については、下記記事が参考になるかと思います。

参考　子テーマってなに？JINで子テーマをインストールしよう！

テーマファイルを編集時のエラーについて

WordPressのバージョン4.9以上を使用していると、WordPressのテーマファイルを編集しようとするとエラーがでるようになっています。

詳細は下記記事がわかりやすいので参考にしていただければと思います。

参考　【WordPress】テーマを保存できないエラー、致命的なエラーをチェックするためにサイトと通信できないため・・・を解決する方法

キャッシュ系プラグインを停止しておく

WP Super Cacheや、WP Fastest Cacheなど、キャッシュ系のプラグインは様々あります。

表示速度を向上させる上で一定の効果があるでしょう。

ただ、表示速度を向上する上で、キャッシュ系のプラグインは一旦停止しておくのがよいと感じます。

途中段階でキッシュ系プラグインを利用していると、表示速度の改善点が見えづらくなってしまうように感じます。

一通り表示速度対策が完了して、最後にキャッシュ系プラグインを有効化する流れがよいと感じます。

事前の注意点は把握いただけたでしょうか？

それでは、ブログの「モバイル」表示速度を「Pagespeed Insights」で48点⇒93点にした方法を時系列で記載します。

実施した対策を時系列で紹介しましたが、どれか一つ実施してみるだけでも効果があると思います。

どれか１つでも気軽に試しみてください♪

ブログの「モバイル」表示速度を48点⇒93点にするまでにしたこと（時系列）

①WordPressでレンダリングを妨げるjavascriptを削除・移動

「Pagespeed Insights」でスピードを計測すると、「改善できる項目」が表示されます。

「短縮できる時間（推定）」で最も時間がかかっていた「レンダリングを妨げるリソースの除外」から対策することにしました。

下記ページを参考に対策しました。

参考　WordPressでレンダリングを妨げるjavascriptを削除・移動

②gzip圧縮の有効化

「レンダリングを妨げるリソースの除外」の対策方法を参考にしたサイトで、「gzip圧縮の有効化」も対策しておくことが推奨されていたため、実施しました。

下記記事を参考に作業しました。

参考　gzip圧縮を有効にしてサイト表示速度を速める手順

①（WordPressでレンダリングを妨げるjavascriptを削除・移動）と②（gzip圧縮の有効化）の対策をした後に、スピードを計測してみると、多少スピードが上がりました。

③「ウェブフォント読み込み中のテキストの表示」対策

「Pagespeed Insights」でスピードを計測すると、「改善できる項目」と同様に、「診断  – アプリケーションのパフォーマンスに関する詳細。」が表示されます。

「改善できる項目」と同様、速度に影響があると考え、こちらも対策してみました。

赤字で表示されていた「ウェブフォント読み込み中のテキストの表示」を対策してみました。

下記記事を参考に作業しました。

参考　最速で解決！ウェブフォント読み込み中のテキストの表示

④必須ではない表示機能に関するプラグインを停止

「Pagespeed Insights」でスピードを計測後に表示される「改善できる項目」と「診断  – アプリケーションのパフォーマンスに関する詳細。」の赤字項目は対策できました。

次に、必須ではない表示機能に関するプラグインを停止しました。

具体的には、「Cool Tag Cloud」というプラグインを停止しました。

このプラグインは、上記のようにタグのイラストでカテゴリーを表示できるプラグインです。

当初は、カテゴリーがおしゃれに表示できるので導入してみたのですが、停止したところスピードが多少上がったので、停止することにしました。

当プラグインに限らず、「表示」に関するプラグインは表示速度に影響がでるため、必須でない場合は、停止を検討してみるのもひとつかと思います。

ここまでの対策をした後に、再度「Pagespeed Insights」でスピードを計測してみたところ、60点以上までスピードが向上しました。

⑤FontAwesomeをOFFにする

続いて、「FontAwesomeをOFFにする」という対策をしました。

この対策はWordPressのテーマで「JIN」を使用している人限定になってしまいますが、アイコンのイメージを外部から読み込む機能をOFFにする設定です。

※WordPressのテーマ「JIN」以外にも、アイコンのイメージを外部から読み込む機能をOFFにする設定があるかと思いますので、インターネットで調べてみていただければと思います。

下記記事を参考に作業しました。

参考　JINの高速化方法を全まとめ！表示速度が遅い時の対処法は？

この対策をした後、速度が一気に80点越えまで向上しました！

外部からデータを読み込む処理は、表示速度に大きく影響が出るようですね。

アイコンデータ以外にも、外部とデータをやりとりしている部分がないかに着目して対策するのも効果的かと感じます。

ここまでの対策をした後に、「Pagespeed Insights」でスピードを計測すると、「改善できる項目」と「診断  – アプリケーションのパフォーマンスに関する詳細。」は以下の状況になりました。

残りの項目についてインターネットで調べてみると、テーマファイルに大幅に手を入れる方法が多く紹介されていました。

しかし記事を優先して書きたいと考えていたため、そこに労力をさくのは現実的ではないと考え、一旦表示速度はここまでか、と感じ始めました。。

⑥スマホサイトの記事の表示形式を「1列」に変更＋「Lazy Load by WP Rocket」を導入

ここまで色々対策をしてきましたが、次に実施した対策が、

・スマホサイトの記事の表示形式を「1列」に変更

・「Lazy Load by WP Rocket」を導入

の２つです。

当初、当ブログのスマホの表示形式は、以下のように「2列」で表示していました。

これを「1列」表示に変更しました。

最初に読み込む画像の量が減るので表示速度が向上しました。

WordPressのテーマ「JIN」のスマホ表示のデフォルトが「2列」だったためそうしていたのですが、読者の方にとっても1列表示の方が読みやすいかと思いました。

この設定をした後に、「オフスクリーン画像での遅延読み込み」が「改善できる項目」に挙がってきました。

最初に表示される画面以外の部分の画像を遅延して読み込ませることで、表示速度を向上できるという指摘ですね。

下記記事を参考に、「Lazy Load by WP Rocket」という画像遅延読み込みのプラグインを導入しました。

参考　画像の読み込みを遅延することでサイト表示速度を最適化するWordPressプラグイン「Lazy Load by WP Rocket」

この対策をしたところ、91点まで表示速度が向上しました！

テーマファイルの編集やプラグイン以外にも、そもそもブログの構成自体を変更することでも表示速度は向上できることを実感しました。

⑦キャッシュ系プラグイン（WP Super Cache）の活用

最後にキャッシュ系プラグインの「WP Super　Cache」を有効化しました。

この対策をしたところ、93点まで表示速度が向上しました！

その他の設定や参考情報について

「JavaScriptの実行にかかる時間の低減」対策について

「Pagespeed Insights」でスピードを計測すると、「診断  – アプリケーションのパフォーマンスに関する詳細。」に「JavaScriptの実行にかかる時間の低減」が出る場合があると思います。

キャッシュ系プラグインを導入していると、この指摘はクリアされると思います。

ただ、根本的にこの指摘を対策しようとした場合、ファイルを設定したり、プラグインを活用してJavaScriptを非同期で実行するように設定することで対策が可能です。

もしこの指摘を解消したい場合は下記記事が参考になるかと思います。

JQueryなどを活用している場合は、表示に不備が出ていないか確認しながら作業することをお勧めします。

・function.phpの設定を変更して対策する場合

参考　WordPressでscript要素をまるっとサクッと非同期化する方法

・プラグインで対策する場合

参考　Javascriptファイルに「非同期」か「延期」属性を追加できる：Async JavaScript

PHPのバージョンについて

Xサーバーを利用している場合、PHPのバージョンが最新版になっているかという点も、表示速度に影響があります。

下記記事を参考に、PHPのバージョンを確認してみてください。

参考　WordPressを高速化する12の方法 – 表示速度を上げるテクニック

Xアクセラレータの利用について

Xサーバーを利用している場合、Xアクセラレータを利用することも表示速度の向上に大きな効果があると思います。

下記の記事を参考に設定してみてください。

参考　【2019年版】誰でも今すぐ改善できる！WordPressを簡単に高速化させる方法

上記サイト内でもある通り、おそらく2019年からXサーバーの利用を開始した場合は、自動でXアクセラレータの設定がされていると思います。

現在XアクセラレータにはVer1とVer.2があるようです。

Xアクセラレータ Ver.1　静的ファイルの高速化と同時アクセス数の拡張が行われます。Xアクセラレータ Ver.2　「Ver.1」の特徴に加えて、PHPプログラムが高速化されます。

XSERVERサイトより引用

ただ、2019年7月現在、Xアクセラレータ　Ver２はパフォーマンスチューニングの影響で設定できないようです。

Xアクセラレータ　Ver２を設定してみた際の、表示速度の違いは改めて紹介します♪

余計なリビジョンの削除について

記事を書いていると途中で保存すると、毎回リビジョンとして記録されます。

知らず知らずのうちにリビジョンが膨大な数になってしまい、サーバーの処理速度に影響が出る可能性もあります。

余計なリビジョンは削除しておいた方がサーバーの処理速度が上がり、表示速度にも良い影響があるでしょう。

不要なリビジョンを削除するプラグインがありますので、下記サイトを参考に設定いただければと思います。

参考　【わかりやすい】WordPressでリビジョンを削除・設定・管理する方法（Optimize Database after Deleting Revisionsの使い方）

Googleアドセンス利用時の表示速度の最大値について

おそらくモバイルで90点台を出させている状態であれば、パソコンでは「99点」まで到達しているかと思います。

自分自身もインターネットで情報収集している時に知ったことですが、

Googleアドセンスを利用している状態で「Pagespeed Insights」でスピードを計測した場合、表示速度の最大値は「99点」になるようです。

100点が出ないからといって悩む必要はありませんので、ご安心ください(笑)

まとめ

今回「Pagespeed Insights」の「モバイル」の表示速度を高める上でのポイントを時系列に紹介しましたが、どれか一つでも試してみていただければと思います。

ひとつひとつ対策をしていけば、確実に表示速度が向上していきますので、気軽に取り入れてみていただければと思います。

ミケネコくん

「効果」が確実に見えるからうれしいよ～

ブログ構成が違っていても、「外部とやりとりしている機能を減らす」「表示速度を上げるブログの表示形式にできないか」等の考え方は応用できる部分があるかと思いますので、ぜひご自身の構成に関する情報をインターネットで調べてみていただければと思います。

当記事が、ブログの表示速度を向上するひとつのヒントになれば幸いです♪

また、「モバイル」の表示速度の「満点」を目指すこともできるかとは思いますが、記事を書くことの方が重要度が高いと感じるため、一旦この点数で様子を見てみようと考えています。

今後表示速度向上に役立つ情報や考え方を発見しましたら、改めてご紹介します。

ちなみに今回はブログの表示速度についての記事ですが、2割の要素が8割の成果を出すという「ニハチの法則」という考え方があります。

下記記事で「ニハチの法則」について紹介していますので、もしよければ読んでみてください♪

内向型こそ大切にしたい「ニハチの法則」とは こんにちは♪しゅはりんです。 当ブログでは、「内向型」にとって有益な情報を「マインドマップ」の形で整理して、お届けすること...

最後まで読んでいただき、ありがとうございました！