イメージCDNによる許可方針(特徴方針)に同意してください

それはすでに高速燃えているウェブサイトを作成するのに十分な挑戦、すべての最新のベストプラクティスに付着し、様々なネットワーク条件やデバイスの種類の最適な経験を提供しています.
ウェブサイトとそのコードベースは時間とともに進化するので、時間をかけて希望のユーザーエクスペリエンスを維持するのはさらに難しくなる.UXの劣化を防ぐために、画像のような重要なウェブサイトの要素が特定の基準に保持されることを保証するガードレールを置くことはしばしば良い考えです.この記事では、我々は正しい方向にあなたのウェブサイトを操縦するのに役立つ堅牢なメカニズムを見るつもりですFeature Policies .
注意:機能ポリシーはすぐに名前を変更するPermission Policies 以下において、我々はこれがまだ野生でまだ実行されていることであるので、機能方針について話し続けます.

機能方針概要
機能方針は、あなたがあなたのウェブサイトのために望ましいベストプラクティスを実施するためにいろいろなブラウザー特徴とAPIに関連して選択的に定めることができる一連の規則を含みます.たとえば、小さなビューポートを持つデバイス上のユーザーが条件の下で、ユーザーが大きなサイズの、最適化されていないイメージを受け取ることを保証することができます-これは、効果的にレイアウトのスラッシングを防止し、ユーザーの帯域幅を無駄に回避します.
機能ポリシーは、コンテンツセキュリティポリシーを思い出させるかもしれません-あなたは、どの機能を使用するか、トップレベルのブラウジングコンテキストと任意の埋め込みフレームの両方で使用できるかを制御します.副最適機能の使用を防止することは、すべてが後方互換性を維持するためにデフォルトで許容されるので、機能を無効にする方針を明示的に指定することに注意しなければなりません.
それが最適なイメージ配信に来るとき、すべてのベースをカバーする方針の例は、ここにあります:

Feature-Policy: legacy-image-formats ‘none’; oversized-images ‘none’; unoptimized-images ‘none’; unsized-media

legacy-image-formatsブラウザがレガシー形式で任意の画像を表示するのを防ぐoversized-imagesコンテナのサイズよりも大きいサイズの画像の使用を無効にします.unoptimized-images検出し、任意の画像をブロックごとに大きなバイトあたりの大きなバイトをブロックします.unsized-media開発者にそのイメージ/ビデオ要素を明示的に与えることができます.
任意の画像が最初の3つのルールのいずれかに一致する場合、軽量プレースホルダーはそれの代わりにレンダリングされます.明確に定義された寸法のないイメージとビデオ要素に関しては、ブラウザは300 x 150のデフォルトサイズを設定します.
同様に、一つの文を複数のヘッダに分割することもできます.

Feature-Policy: legacy-image-formats ‘none’; Feature-Policy: oversized-images ‘none’; Feature-Policy: unoptimized-images ‘none’; Feature-Policy: unsized-media ‘none’; 

各ルールについては、許可の一覧を定義できます.none 上の例では、ルールがすべてのブラウジングコンテキストで実行されることを示すキーワードです.あなたのウェブサイトを追加する別のキーワードself , 他の起源を綴らなければなりません.

Feature-Policy: legacy-image-formats ‘self’ https://third-party-service.com

あなたが想像できるように、我々はイメージにアクセスすることからそれをブロックしたくないので、CDNS起源を許可された起源のリストに含める必要があります:
手当の起源を付け足して、実用的な例を見てみましょう.あなたのイメージ資産をImage CDN , あなたのマークアップのソースとして含まれる単一の高解像度のイメージがあります.イメージCDNはそれを拾って、最適化をオンザフライで適用します.上記のポリシーを導入した後に、このメカニズムがスムーズに機能し続けるようにするには、イメージのCDNの原点をAllowListに追加する必要があります.

Feature-Policy: legacy-image-formats https://img.cdn.imgeng.in;
Feature-Policy: oversized-images https://img.cdn.imgeng.in;
Feature-Policy: unoptimized-images https://img.cdn.imgeng.in;
Feature-Policy: unsized-media https://img.cdn.imgeng.in;

結論
機能ポリシーを使用すると、ブラウザの機能とAPIの様々な使用を制御することができます強力なツールです.
ポリシーは2つの幅広いカテゴリに分類されます.

良いユーザー体験のベストプラクティスを実施し、時代遅れのAPIを使用しないようにする

セキュリティとプライバシー含意による高感度特徴の粒状制御の提供

どのポリシーが適用され、どの程度まであなたの状況に依存するかを決定する.新しいコンテンツの場合は、すべての機能をオフになって開発を開始することができます.このアプローチは、不要な機能のどれもあなたのコードベースに忍び込むことを保証します.既存のコンテンツにポリシーを適用するときは、必要に応じて動作し続けることをテストし、確認する必要があります.これは特に埋め込まれたコンテンツにとって重要です:あなたがコントロールしないサードパーティのコンテンツに規則を拡張する前に、最初に自分のコンテンツにエフェクトを観察するのは良いアイデアです.
画像関連のポリシーについてはImage CDN 効率的にあなたのイメージ方針に従う最適化された、反応するイメージを届けることに関連したすべての重い持ち上げからあなたを解放して、かなりの時間の時間を節約します.すべてのシーンの背後に自動的に、コーナーをカットせずに処理されます:最も洗練された形式を選択し、サイズを変更し、洗練された洗練を適用することによってファイルサイズを減らす.あなたがしなければならない唯一のことは、許可されたホストのリストにイメージCDNの起源を追加することです-誰がわずか数分で競争以上の飛躍を取るしたくないですか?