【100点です】PageSpeed Insightsとは?使い方と高得点のコツ

どうしてもPageSpeed Insightsで高スコアが取れない場合の改善方法TECH

『PageSpeed Insightsとは?Googleの速度計測ツールとはわかるけど、どうやったらスコア100点が取れるの?使い方や高得点のコツが知りたい』といった疑問を解決します。

 

この記事を読むと以下の疑問が解決します。

 

  • PageSpeed Insightsとは?
  • PageSpeed Insightsの使い方と高得点【100点】のコツ
  • どうしてもPageSpeed Insightsで高スコアが取れない場合の改善方法

 

それでは見ていきましょう。

スポンサーリンク

PageSpeed Insightsとは?

ウェブページの読み込み時間を計測するGoogle公式のツールです。

 

PageSpeed Insights

 

URLを入力して、[分析]をクリックするだけで計測できます。

 

スコアは「Good」「Medium」「Low」に分類されています。

 

  • 90–100「Good」
  • 50–89「Medium」
  • 0–49「Low」

 

詳細は以下のヘルプ記事で確認できます。

 

About PageSpeed Insights  |  Google Developers

 

ちなみに、この「からくちコメント」はパソコン表示で100点です。

 

 

モバイルだけ遅いけど、スコアは高くグリーンだから気にしていません。

 

PageSpeed Insightsの使い方と高得点【100点】のコツ

PageSpeed Insightsの高得点【100点】のコツ

結論から言うと、PageSpeed Insightsの点数を上げたいなら、通常のウェブサイトの場合、まずは最低でも以下の3点をクリアすることです。

 

  • ワードプレスなら良いテーマを使う
  • 通常のサイトなら軽いテンプレートを使う
  • 高速なレンタルサーバーを使う

 

ワードプレスなら良いテーマを使う

まずは100点が取れるワードプレスのテーマを使うことです。

 

デフォルトの状態でPageSpeed Insightsの100点を取れないテーマでは、いくら他の設定で頑張っても100点を取ることはできません。

 

ではどうすればいいのでしょうか?

 

具体的には、わたしのブログで使っているCocoonを使うといいでしょう。

 

無料なのに更新も素早く、SEO対策もバッチリです。

 

特にアフィリエイトサイトに特化しているので、これからアフィリエイトを始める人にもおすすめです。

 

【図解】アフィリエイトの始め方【初心者が5万円稼ぐ保証付き】
『アフィリエイトに興味はあるけど、どうすればいいのか、アフィリエイトの始め方が分からない。初期投資はなるべく少なめで稼ぎたい。初心者なので、まずは5万円でいいから稼ぎたい。』といった疑問を解決します。

 

通常のサイトなら軽いテンプレートを使う

軽いテンプレートとは具体的には以下です。

 

無料ホームページテンプレート Template Party
WEB制作業者様も無料で使えるレスポンシブタイプのホームページテンプレートを1,000点以上無料配布中。完全無料でサイトを公開する為の使い方マニュアルや、サポート掲示板もあります。

 

無料で使えるのに最低限のSEO対策もされているためおすすめです。

 

現在、お客さんのウェブサイトを開発しているエンジニアの方もソースを見てみてください。

 

これだけ軽くすれば、PageSpeed Insightsで100点を取ることができます。

 

高速なレンタルサーバーを使う

どんなに軽いテンプレートやテーマを利用しても、使っているサーバーの反応が遅ければどうにもなりません。

 

PageSpeed Insightsで100点を出したいなら、レンタルサーバーは以下がおすすめです。

 

» エックスサーバー

 

わたしも長い間ブログやアフィリエイトサイトを運営していて、コアサーバーロリポップも使ってみましたが、一番高速なサーバーは間違えなくエックスサーバーです。

 

アフィリエイトOKでおすすめのブログサイト比較【2020年】にも書いていますが、有名アフィリエイターや有名ブロガーはみんなエックスサーバーを利用しています。

 

試しに検索上位に来ているアフィリエイトサイトやブログを以下のSEOツールで確認してみてください。

 

SEOチェキ!無料で使えるSEOツール
無料SEOツール「SEOチェキ!」(せおちぇき!)はSEOに役立つさまざまな情報を、調査することのできるツールです

 

ほらね。

 

PageSpeed Insightsの使い方や見方

PageSpeed InsightsはURLをコピペして、[分析]をクリックするだけで利用できます。

 

分析が終わったら「改善できる項目」を確認してください。

 

以下の3つは画像についてです。

 

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

 

PageSpeed Insightsは画像を極限まで圧縮するか、極端に言えば画像を使わなければ100点を取ることができます。

 

次世代フォーマットでの画像の配信

JPEG 2000、JPEG XR、およびWebPは、これまでのJPEGおよびPNGの同等の画像と比較して、優れた圧縮および品質特性を備えた画像フォーマットです。

 

画像をJPEGやPNGではなく、上記の形式でエンコードすると、読み込みが速くなり、消費するスマホのギガも少なくなります。

 

WebPはChromeとOperaでサポートされています。

 

何が言いたいのかいというと、画像はすべてWebPに最適化しなさいということです。

 

変換は以下でできます。

 

WEBP変換ツール (jpg、pngとwebpを相互変換)
WEBPコンバーターは、お手持ちのJPEGやPNG画像をWEBPに変換するウェブサービスです。現在、Chromeのみサポートしています。

 

オフスクリーン画像を延期する

lazysizesスクリプトをページに追加するとこのメッセージが出なくなります。

 

lazysizesの詳しい使い方は以下が分かりやすいと思います。

 

背景画像も遅延読み込み可能。万能Lazyloader、lazysizesの使い方 | WEMO
画像の遅延読み込みをしたいとき、何を使用しますか?私は「lazysizes」を発見してからというもの、ずっとこいつにお世話になっています。個人的に、画像をimgタグではなくbackgroundに指定するのが好きなのですが、lazysizesだと背景画像も簡単に遅延読み込み可能ということで愛用するようになりました。また、...

 

ただし、Cocoonを利用している場合は、lazysizesをテーマ側で有効にして最適化できます。

 

画像を効率的にエンコード

このメッセージも画像をすべてWebPに変換することで解消するでしょう。

 

もし、初心者でよく分からない!難しい!ということでしたら、とりあえずすべての画像サイズは、横が1280pxを越えないサイズに変更してみてください。

 

これだけでもかなり効果があります。

 

どうしてもPageSpeed Insightsで高スコアが取れない場合の改善方法

最後に、これらの手順を試してもPageSpeed Insightsで計測して明らかに0–49「Low」になる場合は、サイトに異常やエラーが出ている可能性が高いです。

 

ワードプレスなら一度テーマを変更して、1から作り直してみたり、htmlならテンプレートを完全に変更してみたりすると改善することが多いので試してみてください。

 

それにしても、超有名ブロガーのマナブログのサイトは明らかに0–49「Low」だけど、上位に表示されているから、ぶっちゃけると、SEO対策としてはあまり気にしなくてもいいのかもね。バッサリ

 

人気記事 ブログの作り方が世界一簡単に【初心者向けの方法を3分で解説】

人気記事 【図解】アフィリエイトの始め方【初心者が5万円稼ぐ保証付き】