【pagespeed insights】サイトのレスポンシブとPCの表示速度を確認しよう

8/21/2019 更新:2023年11月10日

PC ブログ関連

t f B! P L
サーチコンソールでページの表示が遅いとか言われたことありませんか?
PCでは表示速度が速いのにレスポンシブ(スマホ)だと表示が遅くてイラっとした経験があります。
自分のブログの表示速度を調べたことはありますか?

ページが早く表示されないと、訪問者は離脱してしまいます。
自分のサイトの表示速度を知らない人は一度調べて見て下さい。

pagespeed insights


ページスピード インサイト(PageSpeed Insights)でわかること


Google PageSpeed Insights(ページスピード インサイト)は、Googleが提供するウェブページの読み込み速度とパフォーマンスを評価するためのツールです。このツールは、ウェブサイトの速度とパフォーマンスがユーザーエクスペリエンスやSEOに与える影響を理解し、改善するために役立ちます。

PageSpeed Insightsは、特定のウェブページの読み込み速度とその原因を分析し、改善策を提案するレポートを生成します。このレポートは、モバイルデバイスとデスクトップデバイスの両方のパフォーマンスについて評価されます。

コンテンツの圧縮と最適化。ページ内の画像やテキストなどのコンテンツを圧縮し、最適化することで読み込み速度を向上させる。

ブラウザーキャッシュの活用。ブラウザーキャッシュを利用して、再訪した際に必要なコンテンツを迅速に表示する。

リソースの遅延読み込み。ページ上の重要なコンテンツを優先的に読み込むことで、ユーザーが早くコンテンツにアクセスできるようにする。

サーバーの応答時間。ウェブサーバーの応答時間を短縮して、ユーザーが待たされる時間を減少させる。

レンダリングの最適化。 ページがブラウザで表示されるまでのプロセスを最適化して、コンテンツが素早く表示されるようにする。

モバイルフレンドリーなデザイン。 モバイルデバイスでも使いやすいデザインやレイアウトを採用することで、モバイルユーザーのエクスペリエンスを向上させる。

PageSpeed Insightsは、詳細な分析とアクションアイテムを提供することで、ウェブサイトの速度とパフォーマンスを向上させ、ユーザーエクスペリエンスを向上させる手助けをします。

ページスピード インサイトの使い方


自分のブログのURLを入れて分析ボタンを押すと、ページのパフォーマンススコアが表示されます。





グーグルは、「表示速度を平均以上にしましょう」とアナウンスしているので、最低でも80点以上にしましょう。


スピードのスコア



90点以上高速 グリーン
50〜90点平均 オレンジ
50点未満低速 レッド

ページスピード インサイトでは赤い表示は<改善したほうがいい>という項目です。

平均点の50点以上で、テンプレートや構造を自分でいじれる場合は、オレンジの表示も<できれば改善>したほうがいいでしょう。


PSI
テスト結果はこのように表示されます


ラボデータ


検査した結果はラボデータとして表示されます。

ラボデータも速度結果と同じように高速なら緑色、平均はオレンジ、低速は赤い三角形で警告表示されます。


PSI
ラボデータで問題があれば、オレンジ、黄色で表示される項目も出てきます


改善できる項目と診断


ページの読み込み時間を短くできる改善項目が表示されます。

同じように診断結果でも、改善点と方法が表示され、指示に従い直していきましょう。


PSI
改善項目で修正点が確認できる


改善できない項目


はじめに知っておいてもらいたい点がひとつ

ページスピード インサイトで表示速度を確認すると、パソコンブラウザでは高得点が出やすく、モバイルブラウザではスコアが低く出ます

はっきり言ってしまうと、項目すべてを改善して100点にしようとするのは、素人ではかなり難しいです。

低い目標のように思うかもしれませんが、まず80点以上になるように心がけましょう。

少しでもスコアをあげる方法

CSSを自力で書き換えられないからといって、あきらめるのはまだ早いんです。

スピードテスト(特にモバイル)で引っかかってくる問題のひとつは、画像です。

サイトの速度はページのサイズに依存するので、画像の数とサイズを調節しましょう。

画像フォーマット


さらにグーグルは次世代画像フォーマットを使用するようにすすめています。

「JPEG 2000」「JPEG XR」「Webp」といった次世代画像フォーマットは、今まで主流だった「PNG」や「JPEG」より圧縮率が高いのです。

圧縮率が高い=ファイルのサイズが小さくなる

結果として読み込みが速くなるというのがグーグルが推奨する理由です。



テンプレートを変えてみる


どうしても表示速度が上がらなくて困った場合、テンプレートを変えたりするとスピードが上がることがあります。

僕は5つテンプレートを変えてみましたが、モバイル速度はいまいち改善せず。

サーチコンソールでモバイルフレンドリーになっていることと、pagespeed insightsで平均なので現状のテンプレートを使っています。

Bloggerならレイアウトをいじってガジェットを削除しても改善することがあります。

テンプレートやレイアウトを変更する前に、必ずバックアップはとっておきましょう

ページスピード インサイトまとめ


・まずページスピード インサイトでスピードを調べる
・平均以下のスピードなら改善する
・素人でも変更できる項目は直す


昔はみんなPCで検索していましたが今は誰もがスマホを持っているのでモバイルの速度が重要な人もいるでしょう。

まず自分のサイトの表示速度を知らないという人がいたので、ページスピード インサイトに焦点を当てて紹介しました。

アドセンスを申請する時も、表示速度が遅いと審査に引っかかる可能性があるし。

素人だと改善が大変ですが、僕ものんびりがんばるので皆さんもがんばって直していきましょう。


自己紹介

自分の写真
カリフォルニア在住の日本人健康マニアです。 家庭菜園に関する情報、私自身の経験、役に立つ貴重な情報をシェアします。 ご質問や調べてほしいことがあれば、お気軽にご連絡ください。 A Japanese health fanatic living in California. I'll be sharing information about home gardening, my own experiences, and useful, valuable information. Please feel free to contact me if you have any questions or want me to look into anything.

Translate

このブログを検索

連絡フォーム

名前

メール *

メッセージ *

Copyright© 2018 - 2025 ALL Rights Reserved.

QooQ