Webフロントエンドのパフォーマンス周り
#フロントエンド
#メンタルモデル
推測するな計測せよ
Do it once. Do it right. And, you'll never have to do it again.(一度だけやれ。正しくやれ。そうすれば二度とやらずに済む。)
性能に関する考え方
性能の戦術
RAILモデル
視覚体験
「機敏なユーザー体験」を実現するUIに求められる応答時間
【翻訳】リッチなWebアプリケーションのための7つの原則
キャンベル(グッドハート)の法則
#ネットワーク
WEBアプリケーションネットワークの基礎
通信制限かかってる学生
にも届ける
画像圧縮
パフォーマンス
の指標
Core Web Vitals
Interaction to Next Paint (INP)
Lighthouse
Performance Insights
パフォーマンスバジェットのご紹介 - ウェブパフォーマンスのための予算管理
#ブラウザ
ブラウザレンダリングの仕組み
CSSパフォーマンスに関する計測結果
Webブラウザのもう一つのパーサ: Preload Scanner | PerfData
雑多まとめ
Code Splitting, minify
ハイドレーション
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
JavaScript Start-up Optimization
Webアプリのパフォーマンス改善にも使える！Deopt Explorer について解説
Optimize your loading sequence
kintone フロントエンド刷新においての Web パフォーマンス方針
フロントエンドのパフォーマンス改善のとっかかりとしてLighthouseとWebpack Bundle Analyzerで現状を調査してみた
Webフロントエンドパフォーマンスチューニング80選
JSを減らすためにできる10のこと
コーダーができるサイトの高速化10選
モダンWEBサイトにおける画像最適化について
実例
フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜
SmartHRのパフォーマンス改善が 総力戦だった話
ショップサイト、広告から遷移するLPサイトのパフォーマンス改善
/nota-private-sample/100万ページの巨大projectでリンク記法を編集すると、入力毎に0.5秒ぐらい画面がフリーズする
#ブロッキング
Web Worker
Indexed DB
長いタスクを分割するscheduler.yieldという提案
#React
Reactパフォーマンスチューニングの流れ
Reactでメモ化する前に考えるべきことがある
JotaiでReactのレンダリングを最適化するテクニック
How React 18 Improves Application Performance
Performance optimisations for React applications
Dragging React performance forward
How to write performant React apps with Context
https://www.notion.so/koushisa/React-db98ec2bdc7144b4824b9b822b793ded?pvs=4
#Web_GL
React at 60fps: improving scrolling comments in Figma
#Web_Assembly
なぜGoogle Meetの背景ぼかしが最強なのか（一般公開版）
FigmaのコアはWebGLとWASMで動いている