製品ドキュメント
Citrix ADC
当前版本 13.0 12.1 11.1
pdfを表示

フロントエンドの最適化

2021年8月23日
寄稿者:
C

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

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

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

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

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

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

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

ウェブ最適化 問題 思杰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つずつダウンロードし,ブラウザーに時間がかかる可能性があります。 ドメインシャーディング 接続制限を克服します。これにより,クライアントブラウザがより多くのリソースを並行してダウンロードできるようになり,ページレンダリング時間が短縮されます。

さまざまなファイルタイプでの网站最適化:

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と同じ意味で使用できます。機能の観点から，両方の用語は同じ意味であることに注意してください。

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

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

  1. フロントエンド最適化機能を有効にします。

enable ns feature FEO

  1. 1つ以上のフロントエンド最適化アクションを作成します。

添加feo动作 [- imgshrinktoattrb] [-imgGifToPng]…

例: GIF形式の画像をPNG形式に変換するためのフロントエンド最適化アクションを追加し,キャッシュの有効期限を延長するには:

添加feo动作allact -imgGifToPng -pageExtendCache

  1. [オプション:]フロントエンド最適化のグローバル設定にデフォルト以外の値を指定します。

设置feo参数[-cacheMaxage ] [-JpegQualityPercent ] [-cssInlineThresSize ] [-inlineJsThresSize [-inlineImgThresSize ]

例:キャッシュの最大有効期限を指定するには:

设置feo参数-cacheMaxage 10

  1. 1つ以上のフロントエンド最適化ポリシーを作成します。

添加feo策略

例:フロントエンド最適化ポリシーを追加し,上記で指定したallactアクションに関連付けるには,次の手順を実行します。

>add feo policy pol1 "(HTTP.REQ.URL.CONTAINS("testsite"))" allact1
  1. ポリシーを負荷分散またはコンテンツスイッチング仮想サーバーにバインドするか,グローバルにバインドします。

bind lb vserver -policyName -priority

绑定cs vserver -policyName -priority

bind feo global -type

例:“abc”という名前の仮想サーバーにフロントエンド最適化ポリシーを適用するには,次のようにします。

> bind lb vserver abc -policyName pol1 -priority 1 -type NONE

例:ADCに到達するすべてのトラフィックに対してフロントエンドの最適化ポリシーを適用するには,次のようにします。

>绑定feo global pol1 100 -type REQ_DEFAULT

  1. 構成を保存します。構成を保存します。

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

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

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

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

オプションで,ポリシーベースのFEO说中にポリシーカウンターが増分する選択の数など,FEO说ポリシーの統計を表示することもできます。

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

cliを使用してfeo統計を表示する

コマンドプロンプトで次のコマンドを入力して,FEO说統計の概要,FEO说ポリシーの選択と詳細,および詳細なFEO说統計をそれぞれ表示します。

  • stat feo说注:统计feo说政策コマンドは,高度なfeo说ポリシーの統計情報のみを表示します。
  • 显示feo策略名称
  • stat feo说细节

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

ダッシュボードGUIでは，次の操作を実行できます。

  • FEO说統計の要約を表示するには，[フロントエンドの最適化]を選択します。
  • “グラフィカルビュー”(图形化视图)タブをクリックして，feo機能によって処理されたリクエストのレートを表示します。

サンプルの最適化:

HTMLコンテンツおよびHTMLコンテンツ内の埋め込みオブジェクトに適用されるコンテンツ最適化アクションの例については,サンプルPDFを参照してください。

フロントエンドの最適化
2021年8月23日
寄稿者:
C
2021年8月23日
寄稿者:
C

この記事の概要

サイトに関するフィードバック | プライバシーと法令 | Cookieの設定 | 同意設定
©1999 -思杰系统有限公司。保留所有权利。