ウェブとフロントエンド · 上級

ブラウザのパフォーマンス:実際にサイトを遅くするもの

一行でいうと: ほとんどの遅いサイトで犯人はコードではなく重さだ——大きな画像、フォント、サードパーティスクリプト。

三つのよくある容疑者

画像。400ピクセルで表示される3メガバイトのファイルはウェブで最も一般的な無駄だ。適切なサイズで、モダンな形式で提供し、折り目より下のすべてに遅延ローディングを使う。

フォント。二つのファミリーに四つのウェイトは待ち時間とテキストのちらつきを追加する。ほとんどの場合、二つで十分だ。

サードパーティスクリプト。アナリティクス、チャット、マーケティングピクセル。各々は小さく見える;合わせるとランタイムのほとんどになることが多い。四半期に一度数えて、誰も見ていないものを削除する。

ユーザーが感じるものを測る

ユーザーにとって重要な三つのこと:メインコンテンツがいつ現れたか、最初のタップにページがどれほど速く応答したか、ロード中にレイアウトがどれだけずれたか。最初の二つはよく知られている;三つ目はチープに感じるサイトの第一の原因だ。

ファイバー接続の開発マシンではなく、中級機器と携帯ネットワークで測定する。

リターン降順の改善

圧縮とネットワークからの配信;シフトを防ぐための画像の明示的なサイズ;最初の描画に必要でないスクリプトの延期;各ページが必要なものだけロードするようなコードの分割。

さらに深く

パフォーマンス予算——最大ページウェイトとリクエスト数——を設定し、ビルドで強制する。予算なしに、サイトは数ヶ月で静かに重くなり、各単独の追加はいつも取るに足らないように見える。