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

by sutetotanuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

3 Core Web Vital と？

Slide 3

Slide 3 text

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) 入力ブロッキング時間

Slide 4

Slide 4 text

5 Core Web Vitalと？測定可能でユーザー中心体験向上を実現するため指標今技術で現実的に測定が不可能だったりユーザー体験を改善しない指標採択されない全て指標に75%タイル以上推奨値があるモバイルとデスクトップで別々に測る必要がある

Slide 5

Slide 5 text

6 Core Web Vitalがなぜ必要？ WEBページユーザー体験を改善していくために計測と指標が必要また、Google検索ランキングアルゴリズム評価対象にもなっておりSEO 対策一つとして必要 Google コアランキングシステム、優れたページエクスペリエンスを提供するコンテンツを高く評価するように設計されています https://developers.google.com/search/docs/appearance/page-experience?hl=ja

Slide 6

Slide 6 text

7 Largest Contentful Paint (LCP) ビューポート（ブラウザ表示領域）に表示される最も表示面積が大きい、画像またテキストブロックコンテンツが表示されるまで時間ユーザーがページにアクセスしてから、そページが表示され、コンテンツを認識できるまで時間が短けれ短いほど体験として良い 2.5秒以下が推奨値 https://web.dev/articles/lcp?hl=ja#examples

Slide 7

Slide 7 text

8 First Input Delay(FID) ユーザーが最初に操作（リンク、ボタン）してからブラウザが処理を開始するまで時間 WEBページ第一印象になる第一印象が悪いと体験が悪くなり離脱に繋がりやすい 100ミリ秒以下が推奨値 https://web.dev/articles/fid?hl=ja

Slide 8

Slide 8 text

9 Cumulative Layout Shift(CLS) コンテンツが元々表示されていた位置から移動しずれた(レイアウトシフト)距離指標レイアウトシフト発生ユーザーにとって煩わしく誤クリックを招きやすくなる「影響割合」* 「移動距離」で計算された数値が 0.1以下になるが推奨値 https://web.dev/articles/cls?hl=ja

Slide 9

Slide 9 text

ビューポートに対してコンテンツがシフトした前後で占める面積(75%=0.75) 移動距離(25%=0.25) をかけた数 75% x 25% = 18.75% = 0.1875 10 Cumulative Layout Shift(CLS) 計算式

Slide 10

Slide 10 text

11 Core Web Vital を悪くする原因

Slide 11

Slide 11 text

12 Largest Contentful Paint(LCP) を悪くする原因 LCP 主に４つサブパートにわかれそれぞれ悪化させる原因がある

Slide 12

Slide 12 text

13 LCPを改善する SSR、SSG SPAだと初回アクセス時に全てページで使用するJavaScript ファイルをダウンロードしハイドレーションを行い、そこからページレンダリングをする必要がある。SSR、SSGだと最初からHTMLをダウンロードさせることができる

Slide 13

Slide 13 text

14 ページ単位でファイルを分割 Next.js JS等ファイルを分割、配信することによってユーザーアクセスあったページに必要なファイルだけをダウンロードさせることできるユーザーがアクセスしたページに必要なコンポーネントみをダウンロードする

Slide 14

Slide 14 text

15 サイズや形式が最適でない画像端末毎に異なるビューポートに対してサイズが大きすぎる画像を配信したり最適な形式でない画像を配信することで初期表示を遅くさせてしまう

Slide 15

Slide 15 text

16 コンポーネント On-demand Optimization ビューポート幅に適切なサイズ画像を作成、表示画像URLにビューポート幅をクエリパラメータで渡し Next.jsが幅に応じた適切なサイズ画像を生成それをディスクに書き出しキャッシュする

Slide 16

Slide 16 text

17 コンポーネント On-demand Optimization 現状webp ような軽量かつ高画質なフォーマットが存在しているが、未サポートブラウザもあり、JPEG、PNGも用意しておかないといけない webp以外サイズ大きい画像をwebp対応ずみブラウザに対してダウンロードさせる無駄が多い Next.js Accept ヘッダからブラウザがwebpに対応してるか判断し、対応してる場合 webpを作成しクライアントに返す

Slide 17

Slide 17 text

18 コンポーネント On-demand Optimization クライアントから送信された Accept HTTPヘッダからブラウザが使用できる最適な画像形式画像を生成してそれを返却する

Slide 18

Slide 18 text

19 画像 lazyロードビューポート外画像をダウンロードする無駄になる可能性があります Next.js Imageコンポーネントを使うと出力されるタグ loading属性に自動で lazy が設定される

Slide 19

Slide 19 text

20 Image コンポーネント Priority設定ビューポートコンテンツ大部分を占める、例えヒーロー画像ようなコンテンツ優先的にダウンロードし表示してほしい場合がある Next.js Imageコンポーネント Priorityプロパティをtrue に設定すると、極力画像がプリロードされるように配慮され、 loading=”lazy” が設定されないようになります

Slide 20

Slide 20 text

21 Loading UI と Streaming Rendering Next.js Suspenseを使用しHTMLを段階的に配信できる。サーバーで全て処理完了をHTMLを配信できるため TTFB 向上が期待できる import { Suspense } from 'react' import { Recommend } from './Components' export default function Posts() { return ( Loading feed...}> ) }

Slide 21

Slide 21 text

22 First Input Delay(FID) を悪くする原因 ● 初期表示時 JS メインスレッド実行時間が長い ○ 大きなライブラリ読み込み ○ 時間かかるタスクをメインスレッドで実行する

Slide 22

Slide 22 text

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; }

Slide 23

Slide 23 text

24 Content Layout Shift (CLS) を悪くする原因初期表示位置からコンテンツがズレる原因 ● 画像レンダリング ● フォントフォールバック

Slide 24

Slide 24 text

25 コンポーネント Avoid CLS 画像がレンダリングされるサイズをあらかじめ指定しコンテンツが初期位置からズレるを防ぎます import largeImage from "../public/large-image.jpg"; サイズを直接指定ローカルファイルならビルド時に画像ファイルよりサイズを取得

Slide 25

Slide 25 text

26 next-font Font Optimization フォントファイルをセルフホスティングすることでレイアウトシフトが起きる可能性を防ぎます

Slide 26

Slide 26 text

27 フォントがレイアウトシフトを起こす原因フォントアスペクト比がフォントフォールバックによって変わってしまうことでレイアウトシフトが発生フォントアスペクト比と、英語小文字に対する大文字高さ比率通常フォントアスペクト比 font-family 最初フォントに最適化されるが、そフォントから他フォントにフォールバックされるとレイアウトシフトが起る

Slide 27

Slide 27 text

28 next-font ビルド時にフォントファイルをダウンロードしておき画像ファイル等と共に静的ファイルとして Next.js からダウンロードできるようしているクライアントからフォント配布先にアクセスする必要がなくなり、パフォーマンス向上、安定性が向上し、 CLSが起きる可能性がなくなる

Slide 28

Slide 28 text

29 Core Web Vital を計測方法

Slide 29

Slide 29 text

30 PageSpeed Insights Googleが提供しているWEBページに関する計測できるWEB サービス。ページにアクセスし計測したいURLを入力するだけで計測ができる。実際に使ってるユーザー計測結果も確認でき、WEB Vitalも計測できる

Slide 30

Slide 30 text

31 Lighthouse Google Chrome DEVツールタブから実行可能計測に少し時間かかるが、パフォーマンスからアクセシビリティまで幅広く計測でき、問題点と解決方法提示を受けることができる

Slide 31

Slide 31 text

32 Next.js 14 で追加された新機能

Slide 32

Slide 32 text

33 Partial Pre Rendering Next 14 で導入されたエクスペリメンタルな機能 1つページ静的部分と動的部分を別々にレンダリングする手法ページ内に静的な箇所と動的な箇所に分かれてて、静的な箇所み高速にレンダリングしたい場合に有効今後デフォルトレンダリングになるらしい

Slide 33

Slide 33 text

34 まとめ　 ● Core Web Vital UXを向上させるため指標 ○ Core Web Vital が良いとSEO的に有利 ● Next.js コンポーネントを使うと Core Web Vital が自然と改善する ● Core Web Vital 簡単に計測できるで継続して改善を続けていくことができる