2021年6月以降のSEO対応
現在Googleは「Web Vitals」という新しい取り組みを発表しています。
これは”UXを向上させるために新しいガイダンスを提供するので、ユーザーをより満足させましょう”というもので、それを具体的に数値化している「Core Web Vitals」という３つの指標が重要になっています。
LCP（Largest Contentful Paint）
読み込み時間
LCPはページ内のメインコンテンツ(最も大きなコンテンツ)が読み込まれるまでの時間を指します。
ページ読み込みから2.5秒以内を目指しましょう。
FID（First Input Delay）
インタラクティブ性
FIDとは、ユーザーがページ内で最初に行ったアクション(ボタンを押すなど）に対して、ブラウザが応答するまでに要した時間を指します。
0.1秒以内の反応を目指しましょう。
CLS（Cumulative Layout Shift
レイアウトのずれ
CLSは意図せぬレイアウトの”ズレ”がどれぐらい発生したかを指します。
基本的に、ファーストビューはすぐ表示させる、画像は早くずれずに表示させることに注力すると良いと思います。
実際のサイトのWeb Vitalsの点数はPageSpeed Insightsやlighthouseで確認できます。
具体的な施策
画像について
- ■Webpも一緒に記述する
- ■lazyload.jsとloading=”lazy”で遅延読み込みをする
- ■imgタグ内にwidthとheightを明記する
記述例
<picture><source srcset=”画像名.webp” type=”image/webp” />
<img src=”画像名.jpg” alt=”画像の名前” width=”750″ height=”584″ class=”lazyload” loading=”lazy” />
</picture>
head内について
- ■第三者コードの影響を抑える
記述例
<meta http-equiv=”x-dns-prefetch-control” content=”on”>
<link rel=”preconnect dns-prefetch” href=”https://www.google.com/maps”>
<link rel=”preconnect dns-prefetch” href=”https://www.google.com/analytics/analytics/”>
<link rel=”preconnect dns-prefetch” href=”https://www.tiktok.com/en/”>
<link rel=”preconnect dns-prefetch” href=”https://marketingplatform.google.com/about/tag-manager/”>
<link rel=”preconnect dns-prefetch” href=”https://developers.google.com/speed/libraries/”>
<link rel=”preconnect dns-prefetch” href=”https://fonts.google.com/”>
<link rel=”preconnect dns-prefetch” href=”https://www.doubleclickbygoogle.com/”>
<link rel=”preconnect dns-prefetch” href=”https://developers.google.com/apis-explorer/#p/”>
<link rel=”preconnect dns-prefetch” href=”https://www.yahoo.com/”>
スクリプトの記述の方法と場所
スクリプトの記述にdeferを追加し＜/body＞近くに配置する
記述例
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”></script>
<script defer src=”/js/lazyload.js”></script>
※defer属性を追加することでscriptは非同期でダウンロードされますが、HTMLパースは継続します。
その他、css、jsはなるべく一つにまとめて圧縮した方が良いです。
RYO
UX/UI デザイナー
岐阜大学 非常勤講師/日本工学院専門学校 非常勤講師
2006年POLS JAPAN入社。
心理学・認知バイアスを基にデータドリブンでマーケティングからUX/UI設計、マークアップまで幅広く手掛けております。
