Press Enter/Return to start Search

Page Speed Insightsの基礎

hinako0
開発ブログ
目次

こんにちは！冒険社プラコレの新卒エンジニアのひなこです！

今回はPage Speed Insightsの基礎についてまとめてみました📓

・　Page Speed Insightsについて知りたい方

・　Page Speed Insightsの改善策の調べ方について知りたい方

・　Page Speed InsightsのSEOのスコアを高めたい方

是非ご覧くださいませ！

■目次

  • Page Speed Insightsとは？

  • 使い方

  • 改善項目の探し方と対応方法

■Page Speed Insightsとは？

まず、Page Speed Insightsとは
「モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、
そうしたページの改善方法を確認」できる、Googleが提供している分析ツールです。

簡単に言えば...
ユーザーが見やすい！使いやすい！と思うサイトにするために、
そのサイトはどれくらい使いやすいのかスコアを出してくれ、
加えて改善案までも丁寧に教えてくれる、凄いツールなのです🥳

分析してくれる項目は、以下の4つです。

  • パフォーマンス
  • ユーザー補助
  • おすすめの方法
  • SEO

エンジニアは、サイトのユーザビリティを高めるために、
PageSpeed Insightsを使い、サイトの改善を行っていきます。

サイトが使いやすくなると、ユーザーは不便なくサイトを回遊できるので、
サイトの滞在時間が長くなり、
結果としてユーザー側にとっても、運営する会社側にとってもWin-Winになります！

例えば、ECサイトを運営していているとします。

そのECサイトでは、ページの表示に10秒かかってしまっています。

ユーザーは「なんだこれ？全然表示されないじゃん😣別のサイトで探そう」と
サイトから離脱してしまいますね。

そこで、PageSpeed Insightsを活用し、サイトを使いやすく改善し、
0.1秒でページが表示されるようになりました。

すると、ユーザーはページが表示されるまでの待ち時間がないので、
ストレスなくスムーズにサイトを閲覧し、商品の購入までできるようになるということです👀✨

■使い方

使い方はとてもシンプルです！

①https://pagespeed.web.dev/にアクセスする

②分析したいサイトのURLを入力し、[分析]を押す

③分析中・・・（1~2分ほど待つ）

④分析が終わると

・ 「ウェブに関する主な指標」の評価
・ 「パフォーマンス」「ユーザー補助」「おすすめの方法」「SEO」の４項目のスコア
・ 改善できる項目

が表示される

■改善項目の探し方と対応方法

①　改善できる項目の🔺がついている項目の[v]を押す

②　改善項目の説明文の横にあるテキストリンクを押す

③ Chrome for Developersのサイトが開く（英語の場合は日本語にする　）

④ サイトの問題の原因と改善策が書いてあるため、読んでみる

⑤ PageSpeed Insightsの改善できる項目のテキストで、
　 　Google検索をかけ、関連記事を読む
（Chrome for Developersのドキュメントよりも理解しやすく、どのコードをどう改善すればいいのか詳しく書いてあるので👍）

⑥ ④⑤を参考にソースコードを修正

⑦ テストアップ→本番化し、改めてhttps://pagespeed.web.dev/で分析する

⑧ 対応した項目が消えていたら、対応完了💮

この作業を繰り返して、どんどんスコアを良くしていきましょう！

■改善するメリット

まずは、サイトのユーザビリティが高くなるので、多くのユーザーさんに使っていただけるようになる、
ストレスフリーに閲覧していただけることが、サイト改善の1番のメリットです😄

また、PageSpeedInsightsでの改善項目の対応をすると、
使いやすいサイトにするためのコードの書き方を知ることができるので、
次にサイトの新規機能を追加、改修する時にユーザビリティを意識したコードが書けるようになることも、
エンジニアとしての大きな学びになると感じています！

PageSpeedInsightsはエンジニアにとって仲良くしていきたい友達であり、基礎をしっかり教えてくれる先生ですね👩‍🏫

改善方法に従ってソースコードを修正し、もう一度分析した結果、
スコアが上がっていると、とても嬉しい気分になります！
対応した分だけ、数字として表れるので、対応していて楽しいです！

そして、退勤前の日報に、サイトを改善しました！、スコアが○点上がりました！と報告すると、
プラコレメンバーが「凄い！！」「改善ありがとう！」と温かいコメントをたくさんくださるので、
その言葉も嬉しいですし、優しいたくさんのメンバーのために、
次回も自分のできることを一生懸命やっていこうとモチベーションに繋がります🙌

今回は、PageSpeedInsightsについてまとめました！

最後まで読んでくださり、ありがとうございます🍀

▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽

冒険社プラコレが少しでも気になった方はこちら！

https://www.wantedly.com/companies/pla-cole

TikTokでプラコレのリアルな様子も毎日配信しています😉

https://www.tiktok.com/@placole_inc?is_from_webapp=1&sender_device=pc