SPAはなぜCore Web Vitalsで不利になりやすいのか Core Web Vitalsとは何を測っているのか SPAの初期表示で何が起きているか 「SPAは速い」は間違いではない LCPが悪化する本当の原因はAPI通信 なぜSSRがSEOで有利になるのか CLSもSPAで悪化しやすい よくあ…

HTMLが早く出るほどレイアウトは揺れやすくなる CLSとは何を測っているのか SSRでなぜ発生しやすいのか フォントロードが最大の原因になる 画像も同じ問題を起こす なぜLCPとトレードオフになるのか 対策：フォント表示戦略 対策：画像のサイズ指定 もう一つ…

SPAは遅いのではなく「描画の開始が遅れる」 Critical Rendering Pathとは何か 通常のWebページの場合 SPAの場合に起きること なぜLCPが遅くなるのか CSSブロッキングとの組み合わせ よくある誤解：JSが重いから遅い？ 改善アプローチ 注意点：Skeleton UIの…

「SSRを速くした」のではなく「待たせ方を変えた」 従来のSSRの問題点 ストリーミングレンダリングの仕組み 何が高速化されているのか Suspenseとプレースホルダの役割 なぜSPAより速く感じるのか 注意点：万能ではない SSRの進化の方向性 「SSRを速くした」…

「SSRは速い」のではなく「先に始めている」 SSRの画面表示で実際に起きている通信 プリロードとは何をしているのか preloadの役割 SPAとの違い プリフェッチがページ遷移を速くする理由 なぜSPAは遅く見えるのか ネットワークウォーターフォールで見る違い …

SPAとSSRではキャッシュ戦略が根本から変わる まずHTTPキャッシュの基本 SPAでキャッシュするもの SSRでキャッシュするもの なぜ同じ設定が使えないのか APIキャッシュの扱いも変わる よくあるトラブル キャッシュ設計の考え方 実務での注意点 最後に SPAとS…

SSRでTTFBが遅くなるのはなぜか SPAとSSRの決定的な違い SSR内部で実際に起きている処理 データ取得の直列化** テンプレートレンダリング** 認証処理** DBアクセス** なぜユーザ体験が悪化するのか よくある誤った最適化 ボトルネックの特定方法 改善のため…

SPAはなぜ初回表示が遅くなりやすいのか ブラウザがページを表示するまでの流れ SPAで実際に起きている処理 1. JavaScriptのダウンロード** 2. JavaScriptのパース** 3. 実行（評価）** 4. API通信** 5. DOM生成** 「通信が遅い」のではない なぜSSRは早く見…

SPAとSSRの違いは「描画場所」では説明できない SPAの責務：クライアントがアプリケーションになる SSRの責務：サーバがアプリケーションの主体 なぜ「描画場所」で説明すると誤解が起きるのか 責務分割が変わると何が変わるのか キャッシュ戦略** エラーの…

画面の表示速度は「体感」ではなく売上に直結する 表示速度が遅いと実際に何が起きるのか まず広告が表示されない 次にSEOが下がる さらに読者の行動が変わる なぜ3秒が重要と言われるのか 速度を遅くしている本当の原因 画像のサイズ JavaScriptの読み込み …

WordPressが急に重くなるとき、サーバーが原因とは限らない WordPressの表示は2段階で行われている 「読み込みが終わらない」の正体 プラグインが増えるほど遅くなる理由 スマホだけ遅いのはなぜか 広告とアクセス解析が特に重い理由 テーマ変更で遅くなる理…