PageSpeed Insightsのスコアが0とか1。
何をやっても改善しない！
という人に読んで欲しい記事なんだよ。
PageSpeed Insightsでスコアが0や1で、いろいろ対策を講じても改善しないという方に向けた記事です。
もしGoogle Fontsを利用していたら、まずはWebフォントの遅延読み込みを検討してみてください。
その他にもやっておくべき対策も記載しています。
何をやっても改善しないからといって
せっかくのパーティーを楽しむことすら嫌になってしまわないように。
GoogleのPageSpeed Insightsでモバイルのスコアが0や1の時に試した方法
実際に僕が運営していたサイトで、GoogleのPageSpeed Insightsでモバイルのスコアが0や1という状況でした。
実際に試して大きく改善した方法をご紹介します。
Web Font LoaderでGoogle Fontsの読み込みを遅らせる
表示速度に影響するポイントはたくさんありますが、何をやっても改善しないという方は試してみてください。
Webサイトのページ表示速度を計測するツールです。モバイル、パソコンそれぞれのページで表示される速度を分かりやすくスコアとして出してくれます。
ユーザーがWebサイトを表示する時、ページが表示される時間が遅いと直帰してしまう確率が高くなるという報告もあるので、SEOにおいてページ表示速度は重要なんですね。
計測はこちら。
https://developers.google.com/speed/pagespeed/insights/?hl=JA
表示速度と直帰率の関係は、下記のサイトが参考になります。
「表示速度が1秒から3秒に落ちると、直帰率は32%上昇」という予測がされています。
https://www.suzukikenichi.com/blog/speed-matters-for-mobile-sites/
Web Font LoaderでGoogle Fontsの読み込みを遅らせる
僕が運営しているサイトをPageSpeed Insightsで計測したところ、モバイルのスコアが0や1。致命的な状況でした。
いくつかのページを確認したところ、原因は色々考えられますが、僕の場合、ボトルネックはWebフォントでした。
そこで試したのがWebフォントの読み込みを遅らせる「Web Font Loader」。
下記のサイトの記事を参考に、フォントの読み込みを遅らせたところ
1や2でうろうろしていたスコアが一気に20前後まで回復しました。
Web Font Loaderについては下記の記事がとても分かりやすいので参考になります。
この記事には本当に救われました。
もうダメかなと諦めかけていた時に、たまたま発見した記事でしたが、分かりやすくて、まさに僕の悩みを解決してくれるだけでなく、おしゃれでスマートなデザインというところが、プロフェッショナルですよね。
文章も読みやすく、端的で理解しやすかったですし、デザインも素敵で細かな部分までこだわりも感じました。
しかもコメントに対するリアクションも速い！見習いたいです。
様々な対策をやってもなかなか改善せず、スコアが1から変わらないという方は、ぜひWebフォントの遅延読み込みを試してみてください。
その他やっておくべきスコア改善対策
僕の場合はGoogle Fontsの遅延読み込みで一気にスコアが改善しましたが、そこに至るまで試行錯誤がありました。
やっておくべきスコア改善対策としては、例えばこういったものがあります。
- 画像の圧縮
- 画像、埋め込みYouTubeの遅延ロード
- YouTubeのiframeをvideoタグに変更
- ヒートマップなどのタグ除外
他にもたくさんありますが、大きく影響しそうなのは画像、外部スクリプトのようです。
外部スクリプトについては、変更による影響はわからないので自己責任でお願いします。
この記事では「1.画像の圧縮」「画像、埋め込みYouTubeの遅延ロード」について参考サイトを含めて紹介しますね。
画像の圧縮
現代はやはりスマホファーストですから、モバイルを意識したサイト作りが大事です。
Googleの理念にもあることですが、環境によってユーザー自身に不便を与えないことが最優先事項ですから、スコアうんぬんの前にやるべきですね。
個人的にはこちらのサイトが形式を意識しないで簡単に圧縮できるのでおすすめです。
サイト名は「TinyPNG」ですが、もちろんJpegも対応しています。
画像、埋め込みYouTubeの遅延ロード
2020年2月現在ではGoogle Chromeの限定機能のようですが、imgやiframeにloading=”lazy”という属性を付け加えるだけで、遅延ロードが可能です。
他のブラウザでも標準サポートしてくれることを祈るばかり。
PageSpeed Insightsでスコアが0でも諦める前にGoogle Fontsの遅延ロードを
GoogleのPageSpeed Insightsでモバイルのスコアが0や1の時に試した方法をご紹介しました。
僕の場合は画像圧縮、遅延ロード、スクリプト除外など様々な対策を実施しても、正直にいうとスコアがほとんど変わりませんでした。
しかし諦めかけていた時に試したGoogle Fontsの遅延読み込みで、一気に16までアップ。
その他にも試すべきことは、実際にPageSpeed Insightsで指摘されるので、諦めずに試してみてください。
コメント