ウェブとフロントエンド · 上級
ブラウザのパフォーマンス:実際にサイトを遅くするもの
一行でいうと: ほとんどの遅いサイトで犯人はコードではなく重さだ——大きな画像、フォント、サードパーティスクリプト。
三つのよくある容疑者
画像。400ピクセルで表示される3メガバイトのファイルはウェブで最も一般的な無駄だ。適切なサイズで、モダンな形式で提供し、折り目より下のすべてに遅延ローディングを使う。
フォント。二つのファミリーに四つのウェイトは待ち時間とテキストのちらつきを追加する。ほとんどの場合、二つで十分だ。
サードパーティスクリプト。アナリティクス、チャット、マーケティングピクセル。各々は小さく見える;合わせるとランタイムのほとんどになることが多い。四半期に一度数えて、誰も見ていないものを削除する。
ユーザーが感じるものを測る
ユーザーにとって重要な三つのこと:メインコンテンツがいつ現れたか、最初のタップにページがどれほど速く応答したか、ロード中にレイアウトがどれだけずれたか。最初の二つはよく知られている;三つ目はチープに感じるサイトの第一の原因だ。
ファイバー接続の開発マシンではなく、中級機器と携帯ネットワークで測定する。
リターン降順の改善
圧縮とネットワークからの配信;シフトを防ぐための画像の明示的なサイズ;最初の描画に必要でないスクリプトの延期;各ページが必要なものだけロードするようなコードの分割。
さらに深く
パフォーマンス予算——最大ページウェイトとリクエスト数——を設定し、ビルドで強制する。予算なしに、サイトは数ヶ月で静かに重くなり、各単独の追加はいつも取るに足らないように見える。