BP_006_ja.md

No.6 モバイルファーストのアプローチで、アダプティブローディングを採用

識別子

GreenIT	V2	V3	V4
6	7	6

カテゴリ

ライフサイクル	サードパーティ	担当者
2. 設計	ユーザ/端末	PO/AMOA

効果

優先度	実装難易度	エコロジーへの影響度
4	4	5

リソース
プロセッサ / ネットワーク

説明

コンテキストが許す場合、まずモバイル端末向けにオンラインサイト/サービスを設計する「モバイルファースト」のアプローチを優先し、機能的/人間工学的に正当な利益がある場合にのみ、より大きな画面での機能カバーを拡大します。この場合、適応的な読み込みを選びます。 このアプローチでは、画面/ウインドウサイズ、ピクセル密度、ネットワークの品質、RAMの量など、使用状況の文脈に最も適したリソース（JSとCSSを含む）を選ぶことができます。できればサーバー側で。 これにより、必要以上に帯域幅を消費したり、プロセッサや端末のメモリを無駄に処理したりすることがないようにします。

例

サーバー側では、_client hints_を使用するか、またはブラウザの識別子とブラウザの機能表（user agent sniffing、その制限も含めて）を組み合わせることができます。

クライアント側では、CSSスタイルシートの選択に<link>のmedia属性などの_media queries_、<img>のsrcsetとsizes属性、<picture>、<video>、<audio>の<source>サブ要素などが役立つでしょう。また、_client hints_で利用可能な同じ情報をJavaScriptのAPIで取得し、必要に応じてコードや追加の動的コンテンツをロードすることもできます。

いずれの場合も、すべてのブラウザでそのすべての機能がサポートされていなくても、サイトへのアクセスを可能にするミニマリストなデフォルトモードを優先してください（もちろん、ユーザー体験をあまり損なわないように！）。

#ソース

• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints
• https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints

検証原理

検証項目	次の値以下である
「モバイルファースト」のアプローチに依存しない設計	1