Core Web Vitals を改善する Next.js の機能群

1. Core Web Vitals を改善するNext.js 機能群 2
2. 3 Core Web Vital と ？
3. 4 Core Web Vitalと ？ Googleが提唱するエンドユーザー WEB体験を計測し向上させるため 指標であるWeb Vital うち最も重要とされる３つ 指標 • Largest Contentful Paint (LCP) 主要コンテンツが表示され るまで 時間 • First Input Delay (FID) 最初 操作後 待ち時間 • Cumulative Layout Shift (CLS) レイアウト ずれ • Time To First Byte(TTFB) 最初 バイト到着時間 • First Contentful Paint(FCP) 最初 コンテンツ表示 • Total Blocking Time(TBT) 入力ブロッキング時間
4. 5 Core Web Vitalと ？ 測定可能でユーザー中心 体験 向上を実現するため 指標 今 技術で現実的に測定が不可能だったり ユーザー体験を改善しない指標 採択されない 全て 指標に75%タイル以上 推奨値がある モバイルとデスクトップで別々に測る必要がある
5. 6 Core Web Vitalがなぜ必要？ WEBページ ユーザー体験を改善していくために 計測と指標が必要 また、Google検索 ランキングアルゴリズム 評価対象にもなっておりSEO 対策 一つとして必要 Google コア ランキング システム 、優れたページ エクスペリエンスを提供するコンテンツを 高く評価するように設計されています https://developers.google.com/search/docs/appearance/page-experience?hl=ja
6. 7 Largest Contentful Paint (LCP) ビューポート（ブラウザ 表示領域）に表示される 最も表示面積が大きい、画像また テキストブロック コンテンツが表示されるまで 時間 ユーザーがページにアクセスしてから、そ ページが 表示され、コンテンツを認識できるまで 時間が 短けれ 短いほど体験として良い 2.5秒以下が推奨値 https://web.dev/articles/lcp?hl=ja#examples
7. 8 First Input Delay(FID) ユーザーが最初に操作（リンク、ボタン）してから ブラウザが処理を開始するまで 時間 WEBページ 第一印象になる 第一印象が悪いと体験が悪くなり離脱に繋がりやすい 100ミリ秒以下が推奨値 https://web.dev/articles/fid?hl=ja
8. 9 Cumulative Layout Shift(CLS) コンテンツが元々表示されていた位置から 移動しずれた(レイアウトシフト)距離 指標 レイアウトシフト 発生 ユーザーにとって煩わしく 誤クリックを招きやすくなる 「影響 割合」* 「移動距離」で計算された数値が 0.1以下になる が推奨値 https://web.dev/articles/cls?hl=ja
9. ビューポートに対して コンテンツがシフトした前後で占める面積(75%=0.75) 移動距離(25%=0.25) をかけた数 75% x 25% = 18.75% = 0.1875 10 Cumulative Layout Shift(CLS) 計算式
10. 11 Core Web Vital を悪くする原因
11. 12 Largest Contentful Paint(LCP) を悪くする原因 LCP 主に４つ サブパートにわかれそれぞれ悪化させる原 因がある
12. 13 LCPを改善する SSR、SSG SPAだと初回アクセス時に全て ページで使用するJavaScript ファイルをダウンロードしハイドレーションを行い、そこから ページ レンダリングをする必要がある。SSR、SSGだと最初 からHTMLをダウンロードさせることができる
13. 14 ページ単位で ファイルを分割 Next.js JS等 ファイルを分割、配信することによって ユーザー アクセス あったページに必要なファイルだけを ダウンロードさせることできる ユーザーがアクセスしたページに必要なコンポーネント みをダウンロードする
14. 15 サイズや形式が最適でない画像 端末毎に異なるビューポートに対してサイズが大きすぎる画 像を配信したり 最適な形式でない画像を配信することで初期表示を遅くさせ てしまう
15. 16 <Image> コンポーネント On-demand Optimization ビューポート 幅に適切なサイズ 画像を作成、表示 画像URLにビューポート 幅をクエリパラメータで渡し Next.jsが幅に応じた適切なサイズ 画像を生成 それをディスクに書き出しキャッシュする
16. 17 <Image> コンポーネント On-demand Optimization 現状webp ような軽量かつ高画質なフォーマットが 存在しているが、未サポート ブラウザもあり、JPEG、PNGも 用意しておかないといけない webp以外 サイズ 大きい画像をwebp対応ずみ ブラウ ザに対してダウンロードさせる 無駄が多い Next.js Accept ヘッダからブラウザがwebpに対応してるか 判断し、対応してる場合 webpを作成しクライアントに返す
17. 18 <Image> コンポーネント On-demand Optimization クライアントから送信された Accept HTTPヘッダから ブラウザが使用できる最適な画像形式 画像を生成して それを返却する
18. 19 画像 lazyロード ビューポート外 画像をダウンロードする 無駄になる可能性があります Next.js Imageコンポーネントを使うと出力される <img>タグ loading属性に自動で lazy が設定される
19. 20 Image コンポーネント Priority設定 ビューポート コンテンツ 大部分を占める、 例え ヒーロー画像 ようなコンテンツ 優先的に ダウンロードし表示してほしい場合がある Next.js Imageコンポーネント Priorityプロパティをtrue に設定すると、極力画像がプリロードされるように配慮され、 loading=”lazy” が設定されないようになります
20. 21 Loading UI と Streaming Rendering Next.js Suspenseを使用しHTMLを段階的に配信できる。 サーバーで全て 処理 完了をHTMLを配信できるため TTFB 向上が期待できる import { Suspense } from 'react' import { Recommend } from './Components' export default function Posts() { return ( <section> <Image src=”/image.png” /> </section> <section> <Suspense fallback={<p>Loading feed...</p>}> <Recommend /> </Suspense> </section> ) }
21. 22 First Input Delay(FID) を悪くする原因 • 初期表示時 JS メインスレッド 実行時間が長い ◦ 大きなライブラリ 読み込み ◦ 時間 かかるタスクをメインスレッドで実行する
22. 23 Dynamic Import 必要になるまでライブラリ 読み込みを遅らせることで FIDを改善できる可能性がある Next.js SSRでもES2022 Dynamic Import が使える クライアントで処理するハンドラ内で import することで初期 JS ロードがオフロードされユーザー 入力からハンドラ が開始されるまで 時間が改善する onChange={async (e) => { const Fuse = (await import('fuse.js')).default; const _ = (await import('lodash')).default; }
23. 24 Content Layout Shift (CLS) を悪くする原因 初期表示位置からコンテンツがズレる原因 • 画像 レンダリング • フォント フォールバック
24. 25 <Image> コンポーネント Avoid CLS 画像がレンダリングされるサイズをあらかじめ指定し コンテンツが初期位置からズレる を防ぎます <Image src="/large-image.jpg" alt="Large Image" width={3048} height={2024} /> import largeImage from "../public/large-image.jpg"; <Image src={largeImage} alt="Large Image" /> サイズを直接指定 ローカルファイルならビルド時に画像ファイルよりサイズを取得
25. 26 next-font Font Optimization フォントファイルをセルフホスティングすることで レイアウトシフトが起きる可能性を防ぎます
26. 27 フォントがレイアウトシフトを起こす原因 フォント アスペクト比がフォント フォールバックによって変 わってしまうことでレイアウトシフトが発生 フォント アスペクト比と 、英語 小文字に対する 大文字 高さ 比率 通常フォント アスペクト比 font-family 最初 フォントに 最適化されるが、そ フォントから他 フォントにフォール バックされるとレイアウトシフトが起る
27. 28 next-font ビルド時にフォントファイルをダウンロードしておき 画像ファイル等と共に静的ファイルとして Next.js からダウン ロードできるようしている クライアントからフォント 配布先にアクセスする 必要がなくなり、パフォーマンス 向上、安定性が向上し、 CLSが起きる可能性がなくなる
28. 29 Core Web Vital を計測方法
29. 30 PageSpeed Insights Googleが提供しているWEBページに関する計測できるWEB サービス。ページにアクセスし計測したいURLを入力するだ けで計測ができる。実際に使ってるユーザー 計測結果も 確認でき、WEB Vitalも計測できる
30. 31 Lighthouse Google Chrome DEVツール タブから実行可能 計測に少し時間かかるが、パフォーマンスから アクセシビリティまで幅広く計測でき、 問題点と解決方法 提示を受けることができる
31. 32 Next.js 14 で追加された新機能
32. 33 Partial Pre Rendering Next 14 で導入されたエクスペリメンタルな機能 1つ ページ 静的部分と動的部分を別々にレンダリングす る手法 ページ内に静的な箇所と動的な箇所に分かれてて、 静的な箇所 み高速にレンダリングしたい場合に有効 今後 デフォルト レンダリングになるらしい
33. 34 まとめ　 • Core Web Vital UXを向上させるため 指標 ◦ Core Web Vital が良いとSEO的に有利 • Next.js コンポーネントを使うと Core Web Vital が自然と 改善する • Core Web Vital 簡単に計測できる で継続して改善を 続けていくことができる