Citrix ADC

フロントエンドの最適化

注: フロントエンドの最適化は、高度なライセンスまたはプレミアムCitrix ADCライセンスがあり、Citrix ADCリリース10.5以降を実行している場合に利用できます。

Webアプリケーションの基盤となるHTTPプロトコルは、もともと単純なWebページの送信とレンダリングをサポートするために開発されました。JavaScript やカスケードスタイルシート (CSS) などの新しいテクノロジや、Flash ビデオやグラフィックが豊富な画像などの新しいメディアタイプでは、フロントエンドのパフォーマンス、つまりブラウザーレベルでのパフォーマンスに多大な要求が課せられます。

Citrix ADCフロントエンド最適化(FEO)機能は、次のような問題に対処し、Webページの読み込み時間とレンダリング時間を短縮します。

  • 要求の数を減らす。
  • 各ページのレンダリングに必要です。
  • ページレスポンスのバイト数を減らす。

クライアントブラウザに提供されるコンテンツを簡素化し、最適化します。

FEO 構成をカスタマイズして、ユーザーに最適な結果を提供することができます。Citrix ADCは、デスクトップユーザーとモバイルユーザーの両方に対して、Webコンテンツの最適化を多数サポートしています。次の表では、FEO 機能によって提供されるフロントエンドの最適化と、さまざまな種類のファイルに対して実行される操作について説明します。

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最適化を実行できます。詳細については、ウェブの最適化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 と互換的に使用できます。機能の観点からは、両方の用語が同じ意味であることに注意してください。

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

コマンドプロンプトで、次の操作を行います。

  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 allact >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. フロントエンド最適化ポリシーマネージャー のページで、次のパラメーターを設定します。

      1. バインドポイント: フロントエンド最適化ポリシーを負荷分散またはコンテンツスイッチング仮想サーバーに接続するためのバインドポイント。
      2. [ 接続タイプ]。接続要求のタイプ。
      3. ポリシーバインディング。仮想サーバーにバインドするポリシーを選択します。
      4. バインディングの詳細。優先順位とgoto式の詳細を入力します。
  7. [バインド] をクリックします。

    フロントエンド最適化ポリシーマネージャ

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

ダッシュボード・ユーティリティは、サマリー統計と詳細統計を表形式およびグラフィック形式で表示します。FEO 統計情報を表示して、FEO 構成を評価できます。

オプションで、FEO ポリシーの統計情報を表示することもできます。これには、ポリシーベースの FEO 中にポリシーカウンタが増加するヒット数も含まれます。

注: 統計情報とグラフの詳細については、Citrix ADCアプライアンスのダッシュボードのヘルプを参照してください。

コマンドラインインターフェイスを使用して 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 を参照してください。

フロントエンドの最適化