web speed hackathon2023で遊んでいる

全然関係ないけど何かを書くときにWYSIWYGとしてnotionがすごい使いやすい。
気軽さ重視で notion は公開用に使いたくないんだけど、はてなに移すときにファイル周りが面倒で難しい。

リンク貼る。

tested-talos-429.notion.site

基本的にはLighthouseで最大の問題になっているところから潰していく方針で進めた。

主にやったこと

やったときに参考にした資料はNotionの方に作業内容と一緒に記載している。

• 画像の圧縮
  • JPEGから圧縮率のいいWebPに変換する
  • メインビジュアル用とその他小さく表示する用に複数の画質で非可逆圧縮をかける
  • 巨大ロゴSVGを圧縮
• JavaScriptバンドルサイズの削減
  • productionビルドを指定
  • bundle analyzerの導入
  • ビルドターゲットを見直して必要ないポリフィルの削除
  • クライアントで処理している大きなデータ（zipcode-ja）をAPIに委譲
  • （react-iconなどを）Treeshakeの効く形でimportする
  • バンドル時にterserとgzipのプラグインを差し込む
• FCS向けの対応
  • ファーストビュー以外の画像を遅延読み込みさせる
• よく分からない重たい処理を簡単にする
• サーバー側
  • キャッシュ制御の指定
  • gzipでレスポンスを圧縮する
    • 画像やGraphQLレスポンス、JavaScriptサイズに効く

できそうなこと

• 動画ファイルの圧縮
• GraphQLでレスポンスに1秒かかってるところ多分N+1
• recoil外す
• apollo-clientの圧縮（treeshaking）がビルド設定の問題かうまくいってない