UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Web高速化】front-end performance 2021 ~ 開発環境

Web高速化

こちらの記事で2021年におけるfront-end のパフォーマスに関するチェックリストを紹介している www.smashingmagazine.com

かなり詳しく、大量のチェックリストになっているため、一読の価値ありと思われる

そんな中で、個人的に覚えておきたいと思ったものをメモしておく

開発環境

  • ビルドツールの選定は流行にながされずにいこう
  • SplitChunksPluginでコードを分割すると無駄なコードの取得が減り、ロード時間が改善する（Next.jsやGatsbyの事例）
  • プログレッシブエンハンスメントを使用する
    • コアとなるコンテンツを最重要視するウェブデザイン戦略
    • コアとなるコンテンツがきちんと表示されていれば、ブラウザ間において見え方が変わってもいい（ブラウザごとの使える新機能は使う）という戦略
  • 強力なパフォーマンスベースラインを選択
    • フレームワークを選ぶときの調査観点はたくさんある
    • 最新のフレームワークは低スペックなデバイスを優先していないため、携帯とPCではパフォーマンスの点で劇的に異なることがよくある
    • ReactやAngularに乗り換えるのはよいがCPU時間コストがかかる
  • Ankur Sethiの調査「Reactアプリケーションは最適化しても、インドの平均的な携帯で約1.1秒より速く読み込まれることはありません。Angularアプリの起動には常に少なくとも2.7秒かかります。 Vueアプリのユーザーは、使用を開始する前に少なくとも1秒待つ必要があります。」
  • どのようにフレームワークを選択するのか
    • 少なくともサイズの合計コスト+初期実行時間を検討する
    • Perf Trackはフレームワークのパフォーマンスを追跡している
    • 良い出発点は、アプリケーションに適したデフォルトのスタックを選択すること
  • SSRを使用して、FCPをすばやく取得する。そのとき必要最小限のJavaScriptを含めて対話までの時間をなくす
  • 関数の実行を常に個別の非同期タスクに分割
  • 最新のフロントエンドアーキテクチャの記事

f:id:uggds:20210509154649p:plain