自社サイトのPCとスマホでの表示速度を測定してくれるのがページスピードインサイトです。無料で利用できるため、使ったことがある人は多いでしょう。ページスピードインサイトのスコアの見方、改善ポイントの見方についてわかりやすく解説します。
▼目次
「Google PageSpeed Insights(ページスピードインサイト)」とは、ウェブページの読み込み速度をGoogleのスコアで表示するウェブツールです。
Google社が提供しており、URLを入力するだけでウェブサイトのページ読み込み速度や改善ポイントが分析されます。
調査では「Eコマースのユーザーが表示に待てる時間は2秒まで(※)」とも言われており、Googleも検索ランキングの順位付け要素にページスピードを組み込んでいると公式に発表しています。
※引用元::こちら
それでは実際の画面を見ながら、特徴や使い方を見ていきましょう!
PageSpeed Insightsのウェブサイトにアクセスすると、すぐに「ウェブページのURLを入力」と書かれている入力欄があります。
URLを入力して「分析」ボタンをクリックするだけで、個人・法人問わず、無料でウェブサイトの分析が可能です。
今回は例としてニュートラルワークスのブログメディアをページスピードインサイトで分析しました。スコアはパソコンでは100点中62点です。点数の下には改善ポイントも数値と共に細かく表示されています。
ページスピードインサイトはURLだけで分析ができるので、自社サイトだけでなく競合など他社のウェブサイトの分析も可能です。またサイト全体の分析ではなくページ単位での分析なので、気になるページだけでも確認ができます。
サイトの表示速度は「ユーザー体験(UX)」と「SEO」に影響を及ぼします。
表示速度が1秒から3秒まで遅くなると、直帰率は32%増加する
表示速度が1秒から5秒まで遅くなると、直帰率は90%増加する
表示速度が1秒から6秒まで遅くなると、直帰率は106%増加する
表示速度が1秒から10秒まで遅くなると、直帰率は123%増加する
表示に3秒以上かかるモバイルページからは53%のユーザーが離脱している引用元:こちら
上記はGoogleが発表した、ページの表示速度とユーザー行動の関係性です。
3秒以上かかるサイトでは約半数が離脱してしまうなど、ユーザーはより早く表示されるサイトを求めていることがわかります。
ページの読み込み速度は検索順位が決まる重要な要素になりつつあります。あまりにページ表示の遅いサイトに関しては、クローラーに影響が出てインデックスされにくい可能性があります。
GoogleのJohn Mueller氏は、2018年のライブ配信にて「Googleのクローラーは1000ms(1秒)以上掛かるとクローリングに制限が掛かる(※)」という旨の発言をしています。
※引用:こちら
自社のサイトが重い場合は、課題を把握するためにもぜひページスピードインサイトで分析してみましょう。
ページスピードを分析した際には、一体どのくらいのスコアが出れば良いのでしょうか?ページスピードインサイトは100点満点のスコアと改善点が表示されます。
ページスピードインサイトのスコアは海外から測定されるため、そもそも日本のウェブサイトのスコアは低くなりやすく、読み込むコンテンツや機能の多いECサイトやメディアサイト等のモバイル版であれば、40点を取れれば良い方とも言われています。
他にもモバイルサイトの分析では4G通信を前提にしているため、パソコンサイトの表示スコアより低くなりやすく、上の画像のように大手Webサイトであっても20~30点台となることも珍しくありません。
まずはモバイルサイトでは平均的な40点台を目標にするのが良いでしょう。
それではページスピードインサイトの使用方法を見ていきましょう。
使用方法はとても簡単です。
PageSpeed Insightsにアクセスし、「ウェブページのURLを入力」と書かれた欄に、分析したいページのURLを入力します。ページ単位で分析できるので、トップページでなくても大丈夫です。
「分析」ボタンをクリックするとウェブページの分析が始まります。
分析が終わると、このようなモバイルサイトのテスト結果が表示されます。
上記画像はGoogleの検索トップページ(https://www.google.com/)の分析ですが、さすがの表示速度で「77点」です。
URL入力欄の下に、モバイルとパソコンを切り替えるタブがあります。
パソコンの分析結果に切り替えると、こちらは100点でした。
このようにモバイルのスコアは低くなりやすく、パソコンのスコアは80点以上も出やすいです。
もしパソコン表示でのみ高いスコアが出た場合は要注意です。Googleではモバイルファーストなサイトを高く評価しているので、パソコンでのサイト表示よりもモバイルでのスコアがどうなっているのかが重要となります。
モバイルでは40点台を目指せるよう、改善案を参考にしましょう。
ページスピードインサイトでは、同じURLであっても結果のスコアが変動することがあります。
公式ガイドにも変動についての項目があり、原因はネットワークやハードウェアの利用状況、リソースの競合などによるものとの事です。
“
実行するたびにパフォーマンス スコアが変わるのはなぜですか?ページは何も変更していません。
パフォーマンス測定の変動は、複数のチャネルでのさまざまな影響の度合いによって発生します。指標の変動の一般的な原因としては、ローカル ネットワークの利用状況、クライアント ハードウェアの利用状況、クライアント リソースの競合状態があります。
※引用:PageSpeed Insights API について
正確な結果を求める際は、同じURLであっても2〜3回分析を行いましょう。
ページスピードインサイトで診断できる項目は6種類あります。それぞれ詳しく見て行きましょう。
ページスピードインサイトの「フィールドデータ」とは、Googleがページスピードの分析に使用している、Chromeユーザーのデータを使ったレポート(CrUX)です。
スコアのすぐ下に表示されます。
ページスピードインサイトのスコアを上げたい場合、ページ全てでなくても、最初に表示されるコンテンツの読み込みが早くなればスコアの改善に繋がります。
フィールドデータで表示される「First Contentful Paint(FCP)」は、「コンテンツまたは画像が初めて表示されるまでの時間」の分析結果ですので、改善の参考にしたいポイントです。
フィールドデータの下部にある「提供元の概要を表示」(画像赤枠部分)をクリックすると、データが入手できる場合は、コンテンツの初回ペイント(First Contentful Paint=FCP)と初回入力遅延(First Input Delay=FID)の指標データも追加で表示されます。
ページスピードインサイトの「ラボデータ」では、Lighthouse(※)という分析ツールを使ったウェブページの分析結果を、数値と色でわかりやすく表示しています。
※Lighthouseとは…「Lighthouse」はGoogleが提供しているウェブサイトの品質分析ツールです。SEOの観点などからサイトのチェックができます。
First Contentful Paint | First Contentful Paint は、テキストまたは画像が初めてペイントされるまでにかかった時間 |
---|---|
Speed Index | 速度インデックスは、ページのコンテンツが取り込まれて表示される速さ |
Largest Contentful Paint | 最大コンテンツの描画は、最も大きなテキストまたは画像が描画されるまでにかかった時間 |
Time to Interactive | 操作可能になるまでの時間とは、ページが完全に操作可能になるのに要する時間 |
Total Blocking Time | タスクの処理時間が 50 ミリ秒を上回った場合の、コンテンツの初回描画から操作可能になるまでの合計時間(ミリ秒) |
Cumulative Layout Shift | Cumulative Layout Shift はビューポート内の視覚要素がどのくらい移動しているかを測定する指標 |
測定される項目は上記の6項目です。
これらの項目の分析結果を、色と数値で表示します。
画像の赤枠にあるスイッチボタンをクリックすると、測定項目の説明も見れます。
ページスピードインサイトの「改善できる項目」では、ページの表示速度を速くするための改善案が推定短縮時間を使って表示されます。
短縮できる時間が記載されていることで、対応するかどうかの判断の参考にもなります。
改善案は色でもわかりやすく表記されます。
ページスピードインサイトの「診断」では、ページがウェブ開発のおすすめの設定に沿っているかの診断結果が表示されます。改善案は色でもわかりやすく表記されます。
また、各項目をクリックすると、下の画像のように改善に関する詳細も表示されます。
ページスピードインサイトの「合格した監査」 には、そのページが合格した監査が表示されます。
画像の赤枠部分をクリックすると、改善不要な項目の一覧が表示されます。
ページスピードを改善するためには、どのような対応を行えば良いでしょうか?
4つのポイントをお伝えいたします。
画像の最適化
CSS、JavaScriptの最小化
ブラウザのキャッシュを活用する
サーバー応答時間を短くする
ページスピードインサイトで画像サイズに関する警告が出た場合は、画像の最適化を検討しましょう。
サイズの大きな画像や、画質の良い写真などはデータ量が多くなります。データ量の多い画像をそのままウェブサイトに使用して、ページの表示速度を遅くしてしまう事例は少なくありません。
ウェブサイトの読み込み速度を上げるために、画像を圧縮してサイズを下げることを「画像の最適化」と言います。
画像の最適化には、画質は落とさず無駄なデータを省く「ロスレス圧縮」という圧縮方法がおすすめです。
下記のような、画像の圧縮が簡単にできる無料サイトもあります。
外部リンク:TinyPNG
PNG、JPEGに対応
外部リンク:Optimizilla
JPEG、PNGに対応
外部リンク:Compressor.io
JPG・PNG・GIF・SVGに対応
画像の使用量にもよりますが、ロスレス圧縮を行った画像に差し替えることでページスピードの改善も見込めます。
ページスピードインサイトでは、CSSやJavaScriptに関する提案も表示されます。
ウェブサイトはHTML、CSS、JavaScriptなどのプログラミング言語から成り立っており、CSSやJavaScriptのコード量を少なくすることで、データ容量を減らし読み込みが速くなります。
データ量を減らす方法としては、コードを圧縮する方法があります。
改行やスペースを極力省く事でデータ量の削減が出来ますが、この方法はコードの可読性が下がるため、今後のサイト修正が難しくなってしまうかもしれません。
もし行う際はバックアップを取っておくなどの対策をおすすめします。
CSS、Javascriptのコードの圧縮は、無料のオンラインツールで行うこともできます。
外部リンク:CSS Minifier
外部リンク:JavaScript / Css 圧縮・軽量化(Minify)
「ブラウザのキャッシュを活用する」という項目が表示された時は、下記のような要因が考えられます。
キャッシュの保存設定は、サイト上の.htaccessと呼ばれるファイルにコードを記入することで設定出来ます。
許可すると再訪問の際の読み込み時間が短縮できるものの、キャッシュの保存期間を長くすると修正が反映されにくくなることもあります。
コードの修正が必要となるため、サーバーサイドの知識がある方が対応する事が好ましいで
しょう。
ウェブページをサーバーから読み込む速度に問題がある場合に表示されます。
サーバー応答時間が長くなる原因としては、サーバーのスペック、PHPのバージョン、フレームワーク、ライブラリの問題などが考えられます。
要因が様々ですので、知見のあるエンジニアが原因を調査して、対処方法を考えた方が良い部分となります。
ページ表示速度の改善は1つずつ丁寧にやっていけば確実に効果がでます。
ただ、取り組むべき項目が多い場合は優先順位を決めなければいけませんし、社内にエンジニアがいなくて着手できない内容もあるでしょう。
ほとんどの企業様はWebサイトに構築する時間と専門知識がありません。ニュートラルワークスは、トレンドを抑えたデザインで徹底的に「成果」にこだわったサイトを構築いたします。そのため、あなたは競合と差をつけることができ、それが更なる顧客獲得・売上増加に繋がります。Zoomなどのオンライン相談(無料)をやっておりますので、まずはこちらのお問い合わせページよりお気軽にお問い合わせください。ご連絡心よりお待ちしております。
2020.07.06
ホームページ作成で使える補助金・助成金まとめ【2020年度】IT導入補助金でHP制作
#補助金・助成金
2020.09.14
ディレクトリマップって何?Web制作では絶対に必要?メリットや誰が作成すべきかを解説
#Webデザイン
2020.07.30
Shopify導入時にインストールしたいShopifyアプリ14選!
#ECサイト
2020.09.29
ワイヤーフレームとは?何のために必要?作り込み過ぎはダメ?おすすめツールも紹介!
#Webデザイン
2020.07.27
ShopifyでのSEO対策は何をすればいい?SEOに効果的な、おすすめアプリは?
#ECサイト