スポンサーリンク
calculator confirm

Google公式ツールで、ページ表示速度をチェック・改善する!

PageSpeed Insights

以下の通り、2018/7 よりページの読み込み速度、つまり、表示速度が、モバイル検索のランキング要素に追加されます。

2018/7/9 に導入されました。

また、Google では、表示速度と直帰率に関する、以下の様な情報を公開しています。(英語なので、簡単に日本語訳しています)

表示速度が 1 秒から 3 秒に落ちると、直帰率は 32% 上昇

表示速度が 1 秒から 5 秒に落ちると、直帰率は 90% 上昇

表示速度が 1 秒から 6 秒に落ちると、直帰率は 106% 上昇

表示速度が 1 秒から 10 秒に落ちると、直帰率は 123% 上昇

引用:Find out how you stack up to new industry benchmarks for mobile page speed – Think with Google

つまり、今後は、SEO 対策としても、直帰率を下げるためにも、より一層モバイルでの表示速度が重要になってきます。

ここでは、Google 公式のページ表示速度をチェックし、その最適化を提案するツールである「PageSpeed Insights」。

その使い方・指摘された改善方法について、解説したいと思います。

スポンサーリンク

PageSpeed Insights とは?

モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。

引用:PageSpeed Insights について – Google PageSpeed Tools

と、説明がある通り、ページの統計情報や、問題となっている点を分かりやすく教えてくれます。

PageSpeed Insights を使ってできる事

  • PC・モバイルでの表示速度を計測
  • 速度向上のための改善案を提案してくれる
  • CSS・JS、画像など、Google が最適なサイズに圧縮してくれたものをダウンロードできる

無料で使える、とても便利な Google 公式のツールです。

PageSpeed Insights の使い方

PageSpeed Insights

以下のサイトにアクセスして、入力欄にチェックしたい URL を入力し、分析ボタンを押す、これだけです。

PageSpeed Insights

チェックには、30 秒 ~ 1 分ほどかかります。

「origin:」を URL の先頭に付ければ、サイト全体の速度データを集計してくれるようです。

当サイトで試してみましたが、上手く取得できませんでした。

Google PageSpeed Insightsのoriginコマンドでサイト全体のスピードを計測 | 海外SEO情報ブログ
ウェブページの表示スピードを計測するツールの PageSpeed Insights で、サイト全体を集計した速度データを調べられるようになった。origin: コマンドで集計データをレポートできる。

PageSpeed Insights のチェック項目と改善方法

PageSpeed Insights - Result

これは、当サイトのチェック結果です。

モバイル・PC で、個別にチェック結果が表示されます。

ページの速度・最適化は、ただ単に点数が表示しているだけで、改善策は、ページの統計情報・最適化についての提案に表示される項目です。

ページの速度

上記画像では、「Unavailable」となっています。

本来ならここに、「速い」「平均」「遅い」のどれか(速いなら緑、平均ならオレンジ、遅いなら赤色)と、点数が表示されます。

「Unavailable」となっているのは、2018/1 から、速度スコアに Chrome ユーザー エクスペリエンス レポート(CrUX)というデーターを利用している為です。

Chrome ユーザー エクスペリエンス レポートは、アクセスが多い、人気のあるページしかデータを取得しません。

なので、ほとんどの方が、「Unavailable」と表示されると思います。

もし、点数が表示されているなら、そのサイトは Google から人気があると評価されているという事です。

羨ましい・・・

PageSpeed Insights にリアルワールドデータを導入しました
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

「Unavailable」と表示されてしまうけど、ちゃんと点数を知りたいと思う方もいらっしゃるでしょう。

Lighthouse という Google が公式で出している Chrome の拡張機能を使えば、調べる事ができます。

Googleが、SEO対策をチェックくれるツール紹介!
Google が、提供している Lighthouse という Chrome 拡張機能をご存知でしょうか? このツール、様々な事を調べてくれるのですが、そのチェック項目の中に、何と SEO という項目があるんです! ...

最適化

該当ページが、パフォーマンスに関する一般的なおすすめの方法に、どの程度あっているかチェックし、ページのパフォーマンスを 0 ~ 100 の値で評価。

80 以上なら Good(緑)、60 ~ 79 なら Medium(オレンジ)、それ以下なら Low(赤)で表示されます。

ページの統計情報

この項目は、ちょっとテクニカルな内容になるので、分からない方は読み飛ばしてください。

具体的に何をチェックするかというと、CSS・JavaScript などのレンダリングブロックリソースを読み込むために必要なラウンドトリップの回数。

また、ページで使用されている合計バイト数、データセットのラウンドトリップ回数などが表示されます。

最適化についての提案

以下の様なチェックと、それに対する改善案を教えてくれます。

チェック項目

  • サーバーの応答時間を短縮する
  • ブラウザのキャッシュを活用する
  • 圧縮を有効にする
  • CSS を縮小する
  • HTML を縮小する
  • JavaScript を縮小する
  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  • リンク先ページのリダイレクトを使用しない
  • 画像を最適化する
  • 表示可能コンテンツの優先順位を決定する

修正提案の詳細を知りたい場合、「修正方法を表示」という部分をクリックします。

具体的な改善方法は、Google が分かりやすく説明してくれていますので、以下のページを参考に対応してください。

PageSpeed Insights のルール  |  PageSpeed Insights  |  Google Developers

最適化された画像・JS・CSS のダウンロード

PageSpeed Insights - Result - Optimize Image

「画像、JavaScript、CSS リソース」というリンクをクリックすれば、ZIP 圧縮されたファイルをダウンロードできます。

まとめ

始めに書きましたが、今後は、SEO 対策としても、直帰率を下げるためにも、より一層モバイルでの表示速度が重要になってきます。

なので、PageSpeed Insights や、Lighthouse などのツールを上手に使いながら、より検索上位に表示されるように改善していきましょう。

Googleが、SEO対策をチェックくれるツール紹介!
Google が、提供している Lighthouse という Chrome 拡張機能をご存知でしょうか? このツール、様々な事を調べてくれるのですが、そのチェック項目の中に、何と SEO という項目があるんです! ...

コメント