【Search Console】数値改善のためにやったこと
こんにちは！
新卒フロントエンジニアのひなこです🐥
今回は私が7月末から行なっている
「Search Console対応」についてまとめていこうと思います。
フロントエンジニアがどのようなことを毎日行っているか
気になる方がいらっしゃいましたら、ぜひご覧くださいませ！
Search Consoleとは
まずSearch Consoleについて、軽く説明いたします。
Search Consoleとは
「サイトの検索トラフィックや掲載順位を測定できるほか、
問題を修正」する箇所を指摘してくれ、
「Google検索結果でのサイトの注目度を高める」
ことができるツールです！
Google Search Console公式サイトより引用
（https://search.google.com/search-console/about?hl=ja）
PLISMでは毎朝朝会でSearch Consoleの
「サイトのインデックス登録」
「ウェブに関する主な指標」を確認しています。
4月に入社した時はいでさん（大先輩スーパーエンジニア）が
発表してくださるものを、“ただ“聞いていただけだったのですが….
（入社して初めてSearch Consoleというものの存在を知りました…！
サイトの問題を指摘してくれる優秀なツールがあるのか！と
ビックリしました！！）
エンジニアとしてSearch Consoleの意味とサイトを
どう良くしていけるかを知っておくべきだと思い、
先輩エンジニア（いでさん、たかぎさん）に伺ったり、
自分でネットで調べたりしながら知識を付けている最中です！
Search Consoleについて全く知らなかった時よりも、
理解度が増して、朝Search Consoleの数値を確認するのが
楽しくなりました！
（やっぱり何事も知っている範囲が増えると理解でき、
自分でも考えることができて面白いなと感じますね！）
LCPとは
いでさんと相談しながら、7月末からLCPの数値を改善するために
対策を行っています！
LCPとはLargest Contentful Paintの略称で、
「ユーザーが URL をリクエストしてから、
ビューポートに表示される最大のコンテンツ要素が
レンダリングされるまでの時間」のことです。
Google Search Console公式サイトより引用
（https://support.google.com/webmasters/answer/9205520?hl=ja）
「最大のコンテンツ要素」とは
・画像
・背景画像
・テキストブロック
などで、そのページの中で
最も大きな容量を持つ要素のことを指します。
「最大のコンテンツ要素」が表示されるまでの時間が
短ければユーザーは嬉しいですよね！
なぜなら、画像がなかなか表示されなくて、
10秒も待っていたとしたら、
「このサイトは重いな」と感じ、
サイトから離れてしまう可能性もあるからです。
「最大のコンテンツ要素」が表示されるまでの秒数に応じて
〜2.5秒未満 →🟢良好
2.5秒〜4秒以下→🟡改善が必要
4秒以上 →🔴不良
と判断されます。
LCP数値改善のためにやったこと
では具体的に何をやったかについてですが、
何をやればいいかは「Page Speed Insights」という
サイトを使って見ることができます。
Page Speed Insightsとは
「モバイル端末向けとパソコン向けの
両方のページにおけるパフォーマンスに関するレポートと、
そのページを改善する最適化案を提供」してくれるツールです。
Page Speed Insights公式サイトから引用
（https://developers.google.com/speed/docs/insights/v5/about?hl=ja）
＜Page Speed Insightsで改善箇所を探す方法＞
①Search Consoleから「LCPの問題」のページを開く
②URLグループを選択
③「・・・」を押す
④「ディベロッパー向けリソース」を押す
→Page Speed Insightsに飛ぶ
⑤診断に1-2分待つ
⑥「改善できる項目」から今改善できそうな箇所を見つける
私は今回
🔺Largest Contentful Paintの画像のプリロード
🔺適切なサイズの画像
🔺画像要素で width と height が明示的に指定されていない
を対応しました！
対応した結果
結果としては、対応したページのLCPが
約3週間で24%良化しました！！
お客様により使いやすく、便利なサイトを提供するため、
ページをリニューアルしたり、
微修正（画像の位置を変えたり、デザインを少し修正したり）を
日々行なっているのですが、その改修をした後も、
Search Conosoleで該当ページの「ウェブに関する主な指標」を確認し、
その改修がSearch Consoleの観点からも良いものになったかを
確認するようにしていきたいと思います！
まとめ
今回はSearch Consoleの数値改善のためにやっていることに
ついてまとめました！
入社前は個人で勉強のためにサイトを作ったり、
友人とアプリを作ってみたりと、
実際にコードを書いてみることしかできていませんでしたが、
入社後にSearch ConsoleやPage Speed Insightsといった
サイト保守のためのツールも知ることができ、
エンジニアとして成長できていて、とても楽しいです！！
今後の目標としては、
引き続きSearch Consoleの数値改善のためにコツコツ対策を
進めていきたいと思います！
最後までご覧いただき、ありがとうございました！
参考サイト
コアウェブバイタル（Core Web Vitals）とは？「LCP」「FID」「CLS」3つの指標を解説｜24年3月からは「INP」が導入
（https://www.hit-mall.jp/blog/words/column-039.html#:~:text=LCP%EF%BC%88Largest%20Contentful%20Paint%EF%BC%89,%E3%81%8B%E3%82%92%E8%A1%A8%E3%81%99%E6%8C%87%E6%A8%99%E3%81%A7%E3%81%99%E3%80%82）