NPM: マップ表示の高速化について

Version 3

    ■ はじめに

     

    NPM (ネットワーク・パフォーマンス・モニター) では、Network Atlas (ネットワーク・アトラス) ツールにてマップ作成が可能となります。

    本文章は、マップ表示の高速化するためのポイントについて記載致します。

     

     

    ■ 作成方法

     

    マップ作成については、Network Atlas ツールにて作成できます。

     

    NPM: マップの作成方法 クイックビュー

    全般: 階層マップの作成方法

     

     

    ■ ポイント事項

     

     

     1.  使用する地図の画像の最適化

     

    Webサイト作成(高速化)における最大の考慮点として、画像の最適化となります。 画像は極限まで最適化(最低限の画質担保とサイズ縮小)行うことより表示(読み込み)スピードの改善が行なえます。

    読み込まれる表示マップ(地図)の画像が小さくなれば小さくなるほど、スムーズなWebコンソール操作となります。

     

    画像の最適化  |  Web  |  Google Developers

    -------------------------------------------------------------------------------------------------------------

    画像を最適化することはウェブサイトの容量の大幅な削減とパフォーマンスの改善につながります。ブラウザでダウンロードする必要がある容量が少ないほど、クライアントの帯域幅の競合は減り、ブラウザが有効なコンテンツをダウンロードして画面に表示するまでの時間も短縮されます。

    -------------------------------------------------------------------------------------------------------------

     

    図のファイル サイズを縮小する - Office のサポート

    -------------------------------------------------------------------------------------------------------------

    ハード ディスクの空き領域を増やしたり、Web サイトでのダウンロード時間や読み込み時間を短縮したりするには、画像の解像度を下げる方法、見た目の品質を下げずに圧縮する方法、画像のトリミング部分やその他の画像編集情報などの不要な情報を除去する方法を使用できます。

    -------------------------------------------------------------------------------------------------------------

     

     

     2. 最新バージョンへのアップグレード

     

    NPM 12.0 にて Web パフォーマンスの改善が多く含まれております。

    メンテナンス計画を行っていただいた後、アップグレードすることをおすすめ致します。Orion: アップグレード方法

     

    NPM 12.0 Release Notes - SolarWinds Worldwide, LLC. Help and Support

    -------------------------------------------------------------------------------------------------------------

    Performance improvements

    SolarWinds NPM 12.0 includes the following performance improvements:

    • Larger environments should notice an improved load time for Summary pages.
    • List resources cache results to make selection faster.
    • Complex group structures load faster.

    -------------------------------------------------------------------------------------------------------------

     

     

     3. NPM アプリケーションサーバーのディスクI/O改善

     

    NPMが動作しているアプリケーションサーバーでは同時にIISが動作しています。また、NPMをインストールするとIIS初期設定にてコンテンツの静的/動的の両方に圧縮がかかっております。

    これら SolarWinds の WebSite を配置しているディスクI/Oの改善を行うことで表示スピードの改善が行なえます。 アプリケーションサーバー および データーベースサーバーともに SSD レベル

    までの IOPS まであれば表示速度は格段にあがります。 詳細については、Orion: アップグレード方法 に記載した「ハードウェアアップグレードの検討」をご参考ください。

     

     

     

    ■ Network Atlas 使用時の注意点と挙動

     

    上記1. でも記載した通り、極限まで最適化された地図画像を使用する必要があります。 もし、高画質なサイズが大きい背景を読み込んだ場合、以下のメッセージにて警告が表示されます。

     

     

    また、読み込んだ画像サイズがそのままWebコンソールで表示されることはありません。 内部で再作成されますので、背景画像を読み込んだデータサイズと異なります。

     

    これらの検証を行ってみます。以下の画面は、"Map-163kb" の jpg と "Maps-8.64MB" の bmp を読み込んだ状態となります。

     

    状況確認には、google chrome ブラウザに搭載されているデベロッパーツール Network にて確認しました。

    Measure Resource Loading Times  |  Web  |  Google Developers

     

    これらをマップ表示すると、いずれも512KB のサイズとなりました。 また、bmp は jpg に変換されております。

     

    <Map-163kb>

    <Maps-8.64MB>

     

     

     

    ■ パフォーマンス問題の検証

     

    背景画像のサイズが大きければ大きいほど、表示には著しく時間が掛かります。また、白地のマップと比べて多色がある高画質な画像(マップ)は jpg サイズ肥大化します。

    検証には以下のサンプル画像を使用しました。これら結果から分かることから色が少なく最適化されたサイズが少ないマップ(画像)を使用することでWeb表示の高速化が行なえます。

     

    National Optical Astronomy Observatory: Cygnus Loop

     

    - 500 x 503 251 KB color JPG (on this page)    => 読み込み画像データサイズ 256 KB

    - 2000 x 2010 4.49 MB color JPG  => 読み込み画像データサイズ 8 MB

    - 5000 x 5025 14.38 MB color JPG  => 読み込み画像データサイズ 32 MB

    - 8152 x 8192 35.58 MB color JPG  => 読み込み画像データサイズ 78.2 MB over

     

     

     

     

    ■ 参考情報

     

    Select a background image - SolarWinds Worldwide, LLC. Help and Support