「Repro Tech Meetup: Webパフォーマンス」に参加してきました

勉強会メモ

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に引っかかってることもあるので問い合わせ前に見ること
    • 問い合わせる時はしっかり体裁を

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

  • nagaikazufumiさん