ウェブサイトのパフォーマンスはコンテンツから始まります。
ローンチ前にアセットおよび公開に関する決定を行います。
すべての視点 · · 1 min read
アセットルールを早期に設定します。
コンテンツライブラリが拡大する前に、画像サイズ、フォーマット、品質目標を定義します。写真、商品画像、編集イラストを含めます。ページに追加する前にアセットを最適化し、オリジナルマスターファイルは一般配信パスの外側に保持します。
目標は、実際に表示されるサイズでの鮮明な画像です。大きなオリジナルファイルをすべての訪問者に送信すると、目に見える結果が必ずしも改善されないまま、ネットワークに負担をかけます。
モバイルには独自の構図を与えます。
小さいファイルが常に使用可能なモバイル画像であるとは限りません。狭いクロップ内で被写体、テキストの余白、焦点位置を確認してください。デスクトップ用アートワークが広い負空間に依存している場合は、専用の構図が必要になることがあります。
レスポンシブ画像候補により、ブラウザはディスプレイに適したリソースを選択できます。web.devは、これが配信される画像次元とデバイス間の整合性をどのように改善するかを説明しています。
ページを一連の流れとして確認します。
ヒーロー要素を優先し、遠方のアセットは必要になるまで遅延読み込みします。動画、インタラクティブギャラリー、アニメーションのコストを確認し、訪問者がモーション低減を希望する場合の挙動もチェックします。
複数のビューポートで実際のコンテンツを使用してテストします。画像デコーディング、レイアウトシフト、破損アセット、インタラクションをまとめて確認します。小さなファイルであっても、ページが明確に伝達できなくなれば、それは成功した最適化ではありません。