製品ドキュメント
ADC
14.1 - Current Release 13.1 13.0 12.1
PDFを表示

フロントエンドの最適化

April 15, 2024
寄稿者: 
C

注：

フロントエンド最適化は、アドバンスドまたはプレミアムのNetScalerライセンスをお持ちで、NetScalerリリース12.1以降を実行している場合に利用できます。

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

NetScalerのフロントエンド最適化（FEO）機能はこのような問題を解決し、次の方法でWebページの読み込み時間とレンダリング時間を短縮します：

  • リクエスト数を減らす。
  • 各ページのレンダリングに必要です。
  • ページ応答のバイト数を減らします。

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

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

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

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

さまざまなファイルタイプでのウェブ最適化:

NetScaler ADCは、CSS、画像、Javascript、およびHTML上でWeb最適化を実行できます。詳細については、 Web 最適化 PDF を参照してください。

注：

フロントエンド最適化機能は ASCII 文字のみをサポートします。Unicode 文字セットはサポートしていません。

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

NetScalerがサーバーからの応答を受信したら、

  1. ページの内容を解析し、キャッシュにエントリを作成し (該当する場合)、FEO ポリシーを適用します。

    たとえば、NetScalerは次の最適化ルールを適用できます。

    • CSS または JavaScript 内に存在する空白やコメントを削除します。
    • 1 つ以上の CSS ファイルを 1 つのファイルに結合します。
    • GIF 画像形式を PNG 形式に変換します。
  2. 埋め込まれたオブジェクトを書き換え、最適化されたコンテンツを、最初のキャッシュエントリに使用されたものとは異なる署名でキャッシュに保存します。
  3. 後続のリクエストでは、最適化されたオブジェクトをサーバーからではなくキャッシュから取得し、その応答をクライアントに転送します。

** 空白やコメントなどの無関係な情報を削除します。

ブラウザがサーバー上に新しいコンテンツがあるかどうかを確認せずに、キャッシュされたリソースを使用できる期間。

フロントエンド最適化の設定

オプションで、フロントエンド最適化のグローバル設定の値を変更できます。それ以外の場合は、埋め込みオブジェクトに適用する最適化ルールを指定するアクションを作成することから始めてください。

アクションを設定したら、レスポンスを最適化するリクエストのタイプを指定するルールを含むポリシーを作成し、アクションをポリシーに関連付けます。

注：

NetScalerは、応答時ではなく、要求時にのみフロントエンド最適化ポリシーを評価します。

ポリシーを有効にするには、ポリシーをバインドポイントにバインドします。ポリシーをグローバルにバインドしてNetScalerを通過するすべてのトラフィックに適用することも、HTTPまたはSSLタイプの負荷分散またはコンテンツスイッチング仮想サーバーにポリシーをバインドすることもできます。ポリシーをバインドするときは、そのポリシーに優先度を割り当てます。優先度の数値が小さいほど、値が高いことを示します。NetScalerはポリシーを優先順位に従って適用します。

NetScalerでフロントエンド最適化を構成する方法について詳しくは、次のビデオを参照してください：

前提条件

フロントエンドを最適化するには、NetScaler統合キャッシュ機能を有効にする必要があります。また、次の統合キャッシュ構成を実行する必要があります。

  • キャッシュメモリを割り当てます。
  • デフォルトのキャッシュコンテンツグループの最大応答サイズとメモリ制限を設定します。

統合キャッシュの構成の詳細については、 統合キャッシュを参照してください。

注：

統合キャッシュという用語は、AppCacheと同じ意味で使用できます。機能の観点から、両方の用語は同じ意味であることに注意してください。

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

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

  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
<!--NeedCopy-->
  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. 構成を保存します。ns構成を保存

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

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

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

ダッシュボードユーティリティは、要約と詳細な統計を表形式とグラフィック形式で表示します。FEO 統計を表示して FEO 構成を評価できます。

オプションで、ポリシーベースの FEO 中にポリシーカウンタがインクリメントするセレクトの数など、FEO ポリシーの統計を表示することもできます。

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

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

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

  • stat feo 注:stat feo policy コマンドは、高度な FEO ポリシーの統計情報のみを表示します。
  • show feo policy name
  • stat feo -detail

NetScalerダッシュボードでFEOの統計情報を表示する

ダッシュボード GUI では、次のことができます。

  • 「フロントエンドの最適化」を選択すると、 FEO 統計の概要が表示されます。
  • 「 グラフィカルビュー 」タブをクリックすると、FEO 機能によって処理されたリクエストの割合が表示されます。

サンプルの最適化：

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

フロントエンドの最適化
April 15, 2024
寄稿者: 
C
April 15, 2024
寄稿者: 
C

この記事の概要

サイトに関するフィードバック | プライバシーと法令 | Cookieの設定 | 同意設定 | docs.cloud.com
© 1999- Cloud Software Group, Inc. All rights reserved.