Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

sutetotanuki
February 02, 2024

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

sutetotanuki

February 02, 2024
Tweet

More Decks by sutetotanuki

Other Decks in Technology

Transcript

  1. 4 Core Web Vitalと ? Googleが提唱するエンドユーザー WEB体験を計測し向上させるため 指標であるWeb Vital うち最も重要とされる3つ

    指標 • 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) 入力ブロッキング時間
  2. 5 Core Web Vitalと ? 測定可能でユーザー中心 体験 向上を実現するため 指標 今

    技術で現実的に測定が不可能だったり ユーザー体験を改善しない指標 採択されない 全て 指標に75%タイル以上 推奨値がある モバイルとデスクトップで別々に測る必要がある
  3. 6 Core Web Vitalがなぜ必要? WEBページ ユーザー体験を改善していくために 計測と指標が必要 また、Google検索 ランキングアルゴリズム 評価対象にもなっておりSEO

    対策 一つとして必要 Google コア ランキング システム 、優れたページ エクスペリエンスを提供するコンテンツを 高く評価するように設計されています https://developers.google.com/search/docs/appearance/page-experience?hl=ja
  4. 7 Largest Contentful Paint (LCP) ビューポート(ブラウザ 表示領域)に表示される 最も表示面積が大きい、画像また テキストブロック コンテンツが表示されるまで

    時間 ユーザーがページにアクセスしてから、そ ページが 表示され、コンテンツを認識できるまで 時間が 短けれ 短いほど体験として良い 2.5秒以下が推奨値 https://web.dev/articles/lcp?hl=ja#examples
  5. 9 Cumulative Layout Shift(CLS) コンテンツが元々表示されていた位置から 移動しずれた(レイアウトシフト)距離 指標 レイアウトシフト 発生 ユーザーにとって煩わしく

    誤クリックを招きやすくなる 「影響 割合」* 「移動距離」で計算された数値が 0.1以下になる が推奨値 https://web.dev/articles/cls?hl=ja
  6. 17 <Image> コンポーネント On-demand Optimization 現状webp ような軽量かつ高画質なフォーマットが 存在しているが、未サポート ブラウザもあり、JPEG、PNGも 用意しておかないといけない

    webp以外 サイズ 大きい画像をwebp対応ずみ ブラウ ザに対してダウンロードさせる 無駄が多い Next.js Accept ヘッダからブラウザがwebpに対応してるか 判断し、対応してる場合 webpを作成しクライアントに返す
  7. 20 Image コンポーネント Priority設定 ビューポート コンテンツ 大部分を占める、 例え ヒーロー画像 ようなコンテンツ

    優先的に ダウンロードし表示してほしい場合がある Next.js Imageコンポーネント Priorityプロパティをtrue に設定すると、極力画像がプリロードされるように配慮され、 loading=”lazy” が設定されないようになります
  8. 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> ) }
  9. 22 First Input Delay(FID) を悪くする原因 • 初期表示時 JS メインスレッド 実行時間が長い

    ◦ 大きなライブラリ 読み込み ◦ 時間 かかるタスクをメインスレッドで実行する
  10. 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; }
  11. 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" /> サイズを直接指定 ローカルファイルならビルド時に画像ファイルよりサイズを取得
  12. 27 フォントがレイアウトシフトを起こす原因 フォント アスペクト比がフォント フォールバックによって変 わってしまうことでレイアウトシフトが発生 フォント アスペクト比と 、英語 小文字に対する

    大文字 高さ 比率 通常フォント アスペクト比 font-family 最初 フォントに 最適化されるが、そ フォントから他 フォントにフォール バックされるとレイアウトシフトが起る
  13. 33 Partial Pre Rendering Next 14 で導入されたエクスペリメンタルな機能 1つ ページ 静的部分と動的部分を別々にレンダリングす

    る手法 ページ内に静的な箇所と動的な箇所に分かれてて、 静的な箇所 み高速にレンダリングしたい場合に有効 今後 デフォルト レンダリングになるらしい
  14. 34 まとめ  • Core Web Vital UXを向上させるため 指標 ◦ Core

    Web Vital が良いとSEO的に有利 • Next.js コンポーネントを使うと Core Web Vital が自然と 改善する • Core Web Vital 簡単に計測できる で継続して改善を 続けていくことができる
  15. 35