フロントエンドの最適化

最終公開日 : Sep 25, 2026
注： フロントエンドの最適化は、高度なライセンスまたはプレミアムCitrix ADCライセンスがあり、Citrix ADCリリース10.5以降を実行している場合に利用できます。
Webアプリケーションの基礎となるHTTPプロトコルは、元々、単純なWebページの送信とレンダリングをサポートするために開発されました。JavaScript やカスケードスタイルシート (CSS) などの新しいテクノロジや、Flash ビデオやグラフィックが豊富な画像などの新しいメディアタイプでは、フロントエンドのパフォーマンス、つまりブラウザーレベルでのパフォーマンスに多大な要求が課せられます。
Citrix ADCフロントエンド最適化（FEO）機能は、このような問題に対処し、次の方法でWebページの読み込み時間とレンダリング時間を短縮します。
  • 要求の数を減らす。
  • 各ページのレンダリングに必要です。
  • ページレスポンスのバイト数を減らす。
クライアントブラウザに提供されるコンテンツを簡素化し、最適化します。
FEO 構成をカスタマイズして、ユーザーに最適な結果を提供することができます。Citrix ADCは、デスクトップユーザーとモバイルユーザーの両方に対して、Webコンテンツの最適化を多数サポートしています。次の表では、FEO 機能によって提供されるフロントエンドの最適化と、さまざまな種類のファイルに対して実行される操作について説明します。
Related information

FEO 機能によって実行される最適化

ウェブ最適化 問題 Citrix ADC FEO機能の機能 長所
インライン化 クライアントブラウザは、多くの場合、Webページに関連付けられた外部CSS、画像、およびJavaScriptをロードするためにサーバーに複数の要求を送信します。 CSSインライン、JavaScriptインライン、CSSの組み合わせ 外部 CSS、画像、および JavaScript を HTML ファイルにインラインでロードすると、ページレンダリング時間が短縮されます。この最適化は、一度だけ表示されるコンテンツや、キャッシュサイズが制限されているモバイルデバイスに役立ちます。
ミニフィケーション サーバから取得したデータには、空白、コメント、改行文字などの重要でない文字が含まれます。ブラウザがそのようなデータの処理に費やす時間は、ウェブサイトのレイテンシーを生成します。 CSSの縮小、JavaScriptの縮小、HTMLコメントの削除 縮小されたファイルは、帯域幅を消費し、特殊な処理によるレイテンシーを回避します。
画像最適化 モバイルブラウザでは、接続速度が遅く、キャッシュメモリが限られていることがよくあります。モバイルクライアントに画像をダウンロードすると、より多くの帯域幅、処理時間、およびキャッシュスペースが消費され、Webサイトの待ち時間が発生します。 JPEG 最適化, CSS 画像のインライン化, 画像の縮小属性, GIF から PNG への変換, HTML 画像のインライン化, WebP 画像変換, JPEG, GIF, PNG から JPEG-XR 画像変換 画像をCitrix ADCによって画像タグに示されているサイズに縮小し、クライアントブラウザが画像をより高速にロードできるようにします。
再配置 外部 CSS、画像、および JavaScript の非効率的な処理により、ページの読み込み時間が長くなります。 画像の遅延読み込み、CSSのヘッドへの移動、JavaScriptの終了への移動 HTML要素を再配置して、Webページのレンダリング時間を短縮し、クライアントブラウザがオブジェクトをより高速にロードできるようにします。
接続管理 多くのブラウザでは、単一のドメインに対して確立できる同時接続の数に制限が設定されています。これにより、ブラウザーが Web ページのリソースを一度に 1 つずつダウンロードし、ブラウザーに時間がかかる可能性があります。 ドメインシャーディング 接続制限を克服します。これにより、クライアントブラウザがより多くのリソースを並行してダウンロードできるようになり、ページレンダリング時間が短縮されます。
さまざまなファイルタイプでのWeb最適化：
Citrix ADCは、CSS、画像、Javascript、およびHTML上でWeb最適化を実行できます。詳細については、 Web 最適化 PDF を参照してください。
注： フロントエンド最適化機能はASCII文字のみをサポートします。Unicode文字セットはサポートしていません。

フロントエンドの最適化の仕組み

Citrix ADCがサーバーから応答を受信した後、次の手順を実行します。
  1. ページの内容を解析し、キャッシュにエントリを作成し (該当する場合)、FEO ポリシーを適用します。
    たとえば、Citrix ADCは次の最適化ルールを適用できます。
    • CSSまたはJavaScript内の空白やコメントを削除します。
    • 1つまたは複数のCSSファイルを1つのファイルに結合します。
    • PNG形式にGIF画像形式を変換します.
  2. 埋め込みオブジェクトを書き換え、最適化されたコンテンツをキャッシュに保存します。初期キャッシュエントリに使用されたものとは異なる署名を使用します。
  3. 後続の要求では、サーバからではなく、キャッシュから最適化されたオブジェクトをフェッチし、応答をクライアントに転送します。
** 空白やコメントなどの無関係な情報を削除します。
サーバー上で新しいコンテンツが利用可能かどうかをチェックせずに、ブラウザがキャッシュされたリソースを使用できる期間。

フロントエンド最適化の構成

オプションで、フロントエンド最適化のグローバル設定の値を変更できます。それ以外の場合は、まず、埋め込みオブジェクトに適用される最適化ルールを指定するアクションを作成します。
アクションを設定したら、ポリシーを作成し、それぞれにレスポンスを最適化するリクエストのタイプを指定するルールを指定し、アクションをポリシーに関連付けます。
注： Citrix ADCは、リクエスト時にのみフロントエンド最適化ポリシーを評価し、応答時間ではなく評価します。
ポリシーを有効にするには、ポリシーをバインドポイントにバインドします。ポリシーをグローバルにバインドして、Citrix ADCを通過するすべてのトラフィックに適用することも、HTTPまたはSSLタイプの負荷分散仮想サーバーまたはコンテンツスイッチング仮想サーバーにポリシーをバインドすることもできます。ポリシーをバインドするときは、プライオリティを割り当てます。プライオリティ番号が小さいほど、値が大きいことを示します。Citrix ADCは、優先度の順にポリシーを適用します。

前提条件

フロントエンドの最適化では、Citrix ADC統合キャッシュ機能を有効にする必要があります。また、次の統合キャッシュ構成を実行する必要があります。
  • キャッシュ・メモリを割り当てます。
  • デフォルトのキャッシュコンテンツグループの最大応答サイズとメモリ制限を設定します。
統合キャッシュの構成の詳細については、 統合キャッシュを参照してください。
注： 統合キャッシュという用語は、AppCacheと同じ意味で使用できます。機能の観点から、両方の用語は同じ意味であることに注意してください。

Citrix ADCコマンドインターフェイスを使用してフロントエンドの最適化を構成する

コマンドプロンプトで、次の操作を行います。
  1. フロントエンド最適化機能を有効にします。
enable ns feature FEO
  1. 1 つ以上のフロントエンド最適化アクションを作成します。
add feo action <name> [-imgShrinkToAttrib] [-imgGifToPng] ...
例: GIF形式の画像をPNG形式に変換するためのフロントエンド最適化アクションを追加し、キャッシュの有効期限を延長するには：
add feo action allact -imgGifToPng -pageExtendCache
  1. フロントエンド最適化のグローバル設定にデフォルト以外の値を指定します。
set feo parameter [-cacheMaxage <integer>] [-JpegQualityPercent <integer>] [-cssInlineThresSize <integer>] [-inlineJsThresSize <integer> [-inlineImgThresSize <integer>]
例:キャッシュの最大有効期限を指定するには:
set feo parameter -cacheMaxage 10
  1. 1つ以上のフロントエンド最適化ポリシーを作成します。
add feo policy <name> <rule> <action>
例:フロントエンド最適化ポリシーを追加し、上記で指定した allact アクションに関連付けるには、次の手順を実行します。
>add feo policy pol1 TRUE all act
>add feo policy pol1 "(HTTP.REQ.URL.CONTAINS("testsite"))" allact1
  1. ポリシーを負荷分散またはコンテンツスイッチング仮想サーバーにバインドするか、グローバルにバインドします。
bind lb vserver <name> -policyName <string> -priority <num>
bind cs vserver <name> -policyName <string> -priority <num>
bind feo global <policyName> <priority> -type <type> <gotoPriorityExpression>
例：「abc」という名前の仮想サーバーにフロントエンド最適化ポリシーを適用するには、次のようにします。
> bind lb vserver abc -policyName pol1 -priority 1 -type NONE
例：ADC に到達するすべてのトラフィックに対してフロントエンドの最適化ポリシーを適用するには、次のようにします。
> bind feo global pol1 100 -type REQ_DEFAULT
  1. 構成を保存します。構成を保存します。

GUI を使用したフロントエンドの最適化の構成

  1. \[ 最適化 \] > \[ フロントエンド最適化 \] > \[ アクション\] に移動し、\[ 追加 \] をクリックし、関連する詳細を指定してフロントエンド最適化アクションを作成します。
  2. フロントエンド最適化のグローバル設定を指定します。
  3. \[最適化\] > \[フロントエンド最適化\] に移動し、右側のペインの \[設定\] で \[フロントエンド最適化設定の変更\] をクリックし、フロントエンド最適化のグローバル設定を指定します。
  4. フロントエンド最適化ポリシーを作成します。
  5. \[最適化\] > \[フロントエンド最適化\] > \[ポリシー\] に移動し、\[追加\] をクリックし、関連する詳細を指定してフロントエンド最適化ポリシーを作成します。
  6. 負荷分散またはコンテンツスイッチング仮想サーバーにポリシーをバインドします。
    1. \[ 最適化 \] > \[ フロントエンド最適化 \] > \[ ポリシー\] に移動します。
    2. フロントエンド最適化ポリシーを選択し、\[Policy Manager\] をクリックします。
    3. フロントエンド最適化ポリシーマネージャーで、フロントエンド最適化ポリシーを負荷分散またはコンテンツスイッチング仮想サーバーにバインドします。

フロントエンド最適化構成の確認

ダッシュボード・ユーティリティは、サマリー統計と詳細統計を表形式およびグラフィック形式で表示します。FEO 統計情報を表示して、FEO 構成を評価できます。
オプションで、ポリシーベースのFEO中にポリシーカウンターが増分する選択の数など、FEOポリシーの統計を表示することもできます。
注： 統計とグラフの詳細については、Citrix ADCアプライアンスのダッシュボードヘルプを参照してください。

CLIを使用してFEO統計を表示する

コマンドプロンプトで次のコマンドを入力して、FEO統計の概要、FEOポリシーの選択と詳細、および詳細なFEO統計をそれぞれ表示します。
  • stat feo 注:stat feo policy コマンドは、高度な FEO ポリシーの統計情報のみを表示します。
  • show feo policy name
  • stat feo -detail

Citrix ADCダッシュボードでFEO統計を表示する

ダッシュボード GUI では、次の操作を実行できます。
  • FEO 統計の要約を表示するには、\[フロントエンドの最適化\]を選択します。
  • 「グラフィカルビュー」 (Graphical View ) タブをクリックして、FEO 機能によって処理されたリクエストのレートを表示します。
サンプルの最適化：
HTML コンテンツおよび HTML コンテンツ内の埋め込みオブジェクトに適用されるコンテンツ最適化アクションの例については、 サンプル PDF を参照してください。