Webフロントエンドパフォーマンスチューニング80選 - Qiita

こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン

[otchy210]

「チューニングを開始する前にパフォーマンスを測定してボトルネックを特定する。」が一番大事な気がする。有限の時間の中で最大の効果を上げるために。

[youhei_nak]

imgタグはCSSの読み込み、srcに指定された画像によって何度も表示サイズが変わっちゃうのであらかじめ“imgタグにはサイズを指定しておく”はしておいた方がいいですよ。

[tmatsuu]

わいわい

[yarumato]

“キー/バリューのペアを頻繁に追加や削除する場合はObjectよりもMapが最適。膨大な配列を検索ならキー/バリューに変換してから検索が速い。requireは同期的、importは非同期的にモジュールを読み込むので、importが良い”

[ducktoon]

“imgタグにはサイズを指定しておく” っていつの時代だ

[yoshikidz]

数がすごい。課題の洗い出しと打ち手をどれで行うか？を整理してアクションプラン作るとよさげ。フレームワークとかうまく使っておくとコンポーネント別でスコープ切って管理できて楽なやつ。

[stosto826]

“style属性”

[flirt774]

"JavaScriptはbodyタグの末尾" defer 指定だと HTML の解析を止めずにダウンロードし、解析後実行されるのでトータルで早くなった記憶

[door-s-dev]

一回こうゆうの整理してみようかな

[mayumayu_nimolove]

どれが効果的とかあると良いんだけど。

[remonoil]

多過ぎｗインパクト順に並べてほしい

[l-liroki]

👀

[tacamy]

まとまってていい☺️ Mapってそう使うのか

[ni_haru]

フロントエンド大変だなー。勉強せねば…

[sbtqe]

Core Web Vital

[natural90000]

“Promise.allSettled”

[ryunosinfx]

FirefoxのSpiderMonkey編がほしい・・・どんだけ速くなるかはベンチ取るしか無いやな。VueとかReactはだいぶV8オプティマイズされてる気がするし。

[mysql8]

阿部寛しか勝たん