モバイル表示が遅い…PageSpeed Insights改善のヒント集【20点代→90点】

PageSpeed Insightsで、じぶんのWEBサイトの表示速度を測ってみたら遅すぎた… とくにモバイルは衝撃の 20点代。

というわけで、PageSpeed Insights 改善のヒントについてお話をしていきます。

なぜにモバイル表示だけが遅いのか。

当ブログでは長らく使っていたテーマ「STORK（ストーク）」。そのニューバージョンである「STORK19」に乗り換えてみました。

そのついでに、と。久しぶりに当ブログの表示速度を「PageSpeed Insights」で測ってみたところ… モバイルのほうは、衝撃の 20点代。100点満点の 20点代ですからね。ヤバいでしょう、これは。

と落胆しつつ、パソコンのほうを見てみると。こちらは 60点代。モバイルほどではないとはいえ、あまり喜べるような点数ではありません。

近年、WEB検索はモバイル利用が多く、「モバイルファースト（＝モバイル利用者が快適にWEBサイトを利用できるようにすること）」なる言葉もあるほどです。

にもかかわらず、表示速度が遅ければ。記事を読んでもらう以前に離脱されてしまうでしょう。

おまけに、表示速度は検索順位にも影響すると言われています。表示速度が遅すぎる、ということになれば。じぶんの記事が、だれの目にも触れない…（検索にかからない） という事態もないとは言えない。

怖いな〜、怖いな〜。とブルブル震えていてもしかたがないので。ひたすらググりにググって、ほぼ丸１日格闘した結果、表示速度を改善できたポイントについてお話をしていきます。こちらです ↓

これらが、「じぶんのWEBサイトの表示速度を測ってみたら遅すぎた… 」という方にとって改善のヒントになれば幸いです。

WEBサイトの状況（Wordpressであれば、使っているテーマやプラグインなど）は人それぞれ。必ずしも、結果を出せるかどうかはわかりませんが、試してみる価値はあります。

ちなみに、当ブログサイトの表示速度は以下のように改善できました ↓

• モバイル ･･･ 20点代 → 80点代後半（最高で 90点）
• パソコン ･･･ 60点代 → 90点代後半（最高で 99点）

それではこのあと、前述のヒントについて順番にお話をしていきます。

モバイル表示が遅い…PageSpeed Insights改善のヒント集

《ヒント１》Google AdSenseの自動広告をやめる

今回の改善で、実はもっとも大きな効果（30点前後の点数アップ）があったのはこれ。Google Adsenseの自動広告をやめることでした。

じぶんのWEBサイトに、Adsense広告を配置する際。手動で配置はメンドーなので「自動広告」の設定をしている。あるいは、Googleの人工知能による最適な広告配置にメリットを感じて「自動広告」の設定をしている人もいるでしょう。

が、どういうわけか、その自動広告がモバイルの表示速度を遅くしているらしい。理屈はよくわからないが（←問題）、どうやらそうらしい、というのがググっていてわかったことです。

そこで、自動広告を停止してみたところ、PageSpeed Insightsの点数が大幅アップ。代わりに手動で、functions.phpやウィジェットを使って広告を設定しました。

なお、手動により設定した広告でも、読み込みに問題が起きるようなので。別途、「AdSense広告の遅延読み込み」の設定をするのがよさそうです。

この点で下記の記事がとても参考になりましたので、ご紹介をさせていただきます。感謝！

《ヒント２》WEBフォント利用のスタイルシート記述をやめる

じぶんのブログサイトのフォント（書体）は、じぶん好みのものを使いたいよねぇ。ということで、当ブログでは「さわらびゴシック」なるフォントを採用しています。

それはそれとして。いままでは、「スタイルシート（style.css）」に記述をすることで、フォントの変更をおこなっていました。

ところが、このたび PageSpeed Insightsの結果として表示される「改善できる項目」や「診断」を見ていると。WEBフォントにもなにかしら問題があるのではないか？ と、思えてきたのです。

そこで、ひとまずWEBフォントをやめてみよう！ とスタイルシートの記述を削除したところ。点数が上がりました、10点弱。ほうら、やっぱりね。あいかわらず理屈はよくわからないけど。

それでもやっぱり、デフォルト（初期設定）のフォントはいやだなぁ。と、STORK19の「追加CSS」に書き込んでみたところ、フォントは変更できる。でも、PageSpeed Insightsの点数は落ちませんでした。

この方法が正しいのかどうかはわかりませんが、いまのところそうしています（間違っていたらだれか教えて…）。いちばん良いのは、WEBフォントを使わないことなのかしれない、とは思いつつ。

《ヒント３》画像の最適化に取り組む

画像関連の改善によっても、点数が大幅に上がりました。いろいろやって、わたしの場合には 20点分くらいの効果です。

PageSpeed Insightsでは、いまの点数をただ表示するだけではなく、「改善できる項目」も示してくれます。画像関連としては、このあたりです ↓

• オフスクリーン画像の遅延読み込み
• 次世代フォーマットでの画像の配信
• 効率的な画像フォーマット
• 適切なサイズの画像

結論としては、各種のプラグインを利用することで対応しました。具体的には、ひとつは EWWW Image Optimizer。もうひとつは、a3 Lazy Load。この２つです。

まず、「オフスクリーン画像の遅延読み込み」については、a3 Lazy Loadをインストール・有効化します。

これによって、画面の下のほうにある画像を読み込むタイミングを遅らせることができます。結果、最初に見える画面の表示を早くできる。

次に、「次世代フォーマットでの画像の配信」。これには「WebP」なる画像フォーマットが推奨されているようですが、時期尚早とのハナシも散見されました（ググった結果）。

それでもこの際、やっておくか。ということで、とても参考になったのが下記の記事です。感謝！

続いて、「効率的な画像フォーマット」。こちらも、前述のEWWW Image Optimizer で対応できます。サイト上の画像をできるだけ圧縮する、ということです。

さいごに、「適切なサイズの画像」について。PageSpeed Insightsでは、問題がある画像を具体的に教えてくれるので、それを削除。もっと圧縮した画像を代わりに使うことで解決しました。

《ヒント４》CSS・Javascriptの読み込みを遅らせる

これが正直いちばん意味不明です。あまりくわしいしくみもわからずにブログを運営しているわたしにとって、CSSがどうこう、Javascriptがどうこう言われてもよくわかりません。

それでも、けっこう影響はありそうだよなぁ… とあきらめきれずにググった結果。プラグインを使って、できるだけのことはやる。それ以上はあきらめる、という結論に達しました。

それでも、結果として 10点前後は上がったようです。

具体的には、Autoptimizeというプラグインと、WP Fastest Cacheというプラグインを使います。ただ、この２つ。設定項目がいろいろあるうえに、前述したとおり、しくみがわからないわたしには設定が難儀です。

なので、いろいろググったのですが、いろいろなページを見れば見るほど「みんなそれぞれじゃないか…」と混乱をする始末。設定の具合が、人によって違うみたいなんですね。

最終的には、下記の記事がとても参考になりました。感謝！

上記の記事にも書いてありますが、Autoptimizeの「追加」項目で「Google Fonts」の設定をするだけで点数が上がりました。わからぬものからすると、奥が深すぎる世界ではあります。

まとめ

じぶんのWEBサイトについて、表示速度は気になるもの。というか、利用者のことを考えれば「気にしなければならない」ものです。

PageSpeed Insightsなどのツールを使って、まずは定期的に計測をしてみる。そのうえで、必要な改善・できる改善に取り組んでみる。

ということに、今回ひさびさに表示速度を測ってみて再認識をしました、いまさら。本記事の改善ヒント集が、同じような悩み（モバイル遅すぎっ！）を抱える方のご参考になれば幸いです。