https://ozaki25.hatenadiary.jp/entry/2024/12/13/214501

2024/12/13
https://repro-tech.connpass.com/event/336456/

103 Early Hints

Tatsuki Sugiuraさん

1xxのstatus code

100番台はリクエストとレスポンスが1:1じゃない
仕様は昔からある
- 100 Continueとか101 Switching ProtocolsとかはHttp1.1の1997年
- 103 Early Hintsは2017年
103はserver pushで実現できなかったクライアント手動の先読み
- server pushはすでに持ってるのを送ったりとかなってた
- linkのpreloadやpreconnectの対象を返す
SPAではないHTMLを返すようなケースではリクエストしてからHTMLを受け取るまでクライアントは暇
- その間にEarly Hintsを返してそれをもとに必要なリソースをとる
- レスポンスが多段になる
  - 先に返す103と本体の内容
使うために
- 103は誰が返すか
  - クライアントから多段に中継されてサーバに届く
  - オリジンが返すのが分かりやすい?
    - フレームワークが対応してるか
    - 中継されるところ全部通して返してくれるか
  - そもそもクライアントは対応してるか
    - モダンブラウザは対応してる
  - 一番手前のCDNで返すなら途中は気にしなくてもいい
    - 返すものを道知るか
    - 対応してるのはCloudFlareくらい?
- 何をhintsとして返すか
  - LCP画像も送りたいが判断するのは難しい
    - 処理が終わらないと何になるかわからないがそのタイミングでは遅い
  - 決まった最低限のアセットは返す?
  - 機械学習でも使って判断する?
  - 実データ集めて判断する?

CLSの基本のき

Ryoma Shindoさん

CLS

ユーザが予期しないタイミングでレイアウトシフトする量をスコア化した指標
CoreWebVitalsの1つでSEOにも影響あり
- Lighthouseのスコアだと25%を占める
スコア
- シフトした画面内に占める割合と移動距離でスコアが決まる
計測方法
- PageSpeedInsight
  - フィールドデータとラボデータを確認できる
- Layout Instability API
  - PerformanceObserverでデータが見える
  - 割り込んできた要素ではなく動いた要素が取れる
要因
- 画像に高さや幅がない
  - 固定値指定できないならmin-width/min-heightでも影響を小さくできる
    - メディアクエリを組み合わせるとかも
  - width:100%/height:autoのような時はaspect-ratioで比率を指定するといい
    - うまくいかない時はmin-heightでも
- jsで要素が後から追加される時
  - 画像のようにwidthなどで高さを確保
  - 差し込まずに重ねて浮かせるとか
  - FVに入らないようにするとか
  - サイズがわからない時は最大最小を確保して影響を小さく
- Webフォント
  - 使わなくていいなら使わない
  - CLSへの影響は小さいから気にしないとか
  - preloadではやくロード
- BFCacheをなるべく使う
- 初期表示を作るまでスプラッシュスクリーンで隠してしまうとか・・?

ウェブフォントとパフォーマンス

Masataka Yakuraさん

ウェブフォントは遅い?

遅いと言われる
- 日本語だと特に
どの辺りが遅いのか
- フォントファイル
  - ファイルを読み込むからその分遅くなる
  - 複雑な字形をど大きくなる
  - グリフ数が多い言語だと大きくなる
- ダウンロードされるまで
  - CSSに指定する
  - 読み込んですぐダウンロードされるわけじゃない
  - htmlの中にマッチした文字があると始まる
    - ウエイトやスタイルもまっちしないといけない
  - preconnectで事前にコネクションを作る
    - GoogleFontsのレスポンスヘッダーにLinkヘッダーで自動で入ってる
  - preloadで事前によみこむ
    - as="font"で読み込まないとフォントとして使われない
    - crossoriginがないと
    - preloadは強制だから使われない可能性もある
- ダウンロード
  - fetchpriorityはフォントはもともと高め
- ダウンロードされた後
  - ブラウザはフォントがダウンロードされるまで少し待ってくれる
  - 待ちきれなくてその後に完了したりすると動きが目立ってしまう

CDNとうまく付き合う

Shohei Tanakaさん

CDN

なぜCDN
- アセットの配信効率よく
- キャッシュして効率よく
- セキュリティ対策
よくある運用
- 導入度にあまりメトリクスを見てない
- アラートslack通知してるけど見ない
- キャッシュのパージ作業はする
- CDNの障害なんてめったに踏まない
CDNのパージ
- パージは負荷が高い処理
- ratelimitがある
- 正規表現でファイルの指定はできないものが多い
- invalidateで期限切れ状態に
  - 次回再検証が走る
- deleteでキャッシュを消す
- 一気にパージしてしまうとオリジンが耐えられなくなるので注意
  - 複数回に分割するとかできるといい
  - キャッシュタグ対応してればで分割パージできる
  - キャッシュタグでグループ化できる
CDN障害
- 小さい障害は割と起きている
- いろいろなquotaに引っかかってることもあるので問い合わせ前に見ること
- 問い合わせる時はしっかり体裁を
  - AWSの問い合わせガイドラインを見ると良い

パフォーマンスを上げる「UXライティング」

nagaikazufumiさん