RAILモデルを使用したWebパフォーマンスの最適化

概要
RAILモデルは、ユーザー中心のパフォーマンスモデルです.最終的な目標は、Webサイトをどのデバイスでも迅速に動作させることではなく、ユーザーを満足させることです.RAILは4つの指標を表します.

Response応答:100 ms以内で

応答

アニメーション:10 msで1フレーム

を生成

Idleアイドル:遅延した作業を50 msのブロックに分け、アイドル時間で

を完了する

Loadロード:1000 ms以内にコンテンツを表示する

ロードの最適化
Lighthouse PageSpeed WebPageTest Pingdomなどのツールでロード時間を検出できます.ロードされる主な内容は次のとおりです.
テキストの内容

テキストの内容は圧縮する必要があります.コード機能に影響を与えない場合は、スペースインデントと不要な文字を削除することで圧縮します.Minifer、HTML Miniferなど、多くの圧縮ツールを使用することができます.

サービス側にGzip圧縮を設定し、Gzipはテキスト圧縮が得意で、70%以上の体積を減らすことができますが、非テキストの圧縮効果はよくありません.例えば、画像です.apacheサーバを例に、設定.htaccessファイルは次の

です.

    # Enable compression for the following file types
    AddOutputFilterByType           \
     DEFLATE                        \
      application/javascript        \
      text/css                      \
      text/html                     \
      text/javascript               \
      text/plain                    \
      text/xml

サードパーティ製ライブラリのボリュームを削減します.たとえば、jQueryのほとんどの機能が使用されていない場合、単一の機能のみが使用されている場合は、ライブラリ全体を導入するのではなく、他の方法で置き換えることができます.

グラフィックコンテンツ

不要なピクチャを除去するか、またはそのロードを遅らせる

.

適切なピクチャフォーマットを選択し、透明な背景が必要な場合はpngを選択し、通常の写真はjpgを選択し、アニメーションはgifを選択する.pngの品質はjpgより明らかに優れていないが,pngではなくjpgを適切に選択することで画像の体積を大幅に減少させることができる.

は、カメラのハードウェア情報、タイムスタンプ、ソフトウェア情報、ファイルフォーマット、地理情報など、画像のmeta情報を削除します.多くのサイトでは、これらの情報は重要ではありません.ツール(VerExif)を使用すると、これらの情報を削除できます.圧縮効果は約10%です.

ピクチャサイズを小さくするか、ピクチャを切り取る:デバイスによって適切なピクチャを使用する.画像を切り取って、肝心な画像の内容だけを残します;

圧縮ピクチャ:オンラインツールtinypngを使用すると、ピクチャを大幅に圧縮でき、約50%~70%圧縮できます.

HTTPリクエスト
すべてのリソースはサーバから要求され、最適化を要求する方法は次のとおりです.

テキストファイル

をマージ

画像リソースを統合し、スプライト

HTTP 2を使用すると、HTTP 2は多重要求が可能となり、HTTPの要求速度

を大幅に向上する.

重要なscriptをインラインスクリプトとして抽出し、他のscriptとすべてを外部ファイルに配置するのではなく、優先的に実行します.
HTTPキャッシュ
ブラウザが最初にページをロードすると、ページリソースがhttp cacheにキャッシュされ、次にこのページにアクセスすると、前のキャッシュを利用してアクセスを高速化できます.

キャッシュを有効にし、Webサイトlogo

など、長い間変更されていないリソースをキャッシュします.

キャッシュヘッダ、cache-control(no-cache no-store public private max-age)、expires

を設定
リファレンス
Measure Performance with the RAIL Model