フロントエンドのパフォーマンス。 パート1-連結、圧縮、キャッシング（MozillaによるNode.jsに関する12の記事のうち4つ）

翻訳者から：これは、 ペルソナプロジェクトに関係する、Mozilla IdentityチームによるNode.jsシリーズの 4番目の記事です。 この記事では、この目的のためにMozillaで作成されたサイトリソースとconnect-cachifyモジュールの読み込み速度を上げる方法について説明します。

---

この記事では、フロントエンドのパフォーマンスについて説明し、ペルソナWebサイトを可能な限り高速にするためにMozillaによって作成されたツールを紹介します。 フロントエンドのパフォーマンスを保証する最も重要な側面の一部を自動化するモジュールであるconnect-cachifyの使用について説明します。



しかし、最初に、パフォーマンスを改善する最も一般的な方法を見てみましょう。 フロントエンドの最適化の経験がある場合は、これらのセクションをスキップして、connect-cachifyを使用して手動で行っていた作業を自動的に行う方法を説明する記事の最後に移動できます。

3つの「K」クライアントパフォーマンス

ネットワークには、高いパフォーマンスを実現する方法に関する情報が満載です。 あちこちで1、2ミリ秒を節約するための多くのトリックがありますが、最適化の基礎は常に3つのテクニック（連結、圧縮、キャッシング）で構成されています。

連結

連結の目的は、サーバー要求の数を最小限にすることです。 お問い合わせは高価です。 多くの場合、HTTP接続を開く時間は、データ自体を転送する時間よりも長くなります。 特にモバイルデバイスでは、ネットワークレイテンシが非常に大きくなる可能性があるため、余分な要求があるたびにサイトの速度が低下します。 携帯端末からEDGE経由でオンラインストアにアクセスし、多くの画像が順次ダウンロードされるのを辛く待つ必要がありましたか？



HTTP 2.0プロトコルの新しいバージョンの仕様の基礎をすでに形成している新しいSPDYプロトコルは、複数のリソースに対する要求を1つのHTTP接続に結合できます。 残念ながら、これまでのところ、そのサポートはChrome、Firefox、Operaの最新バージョンのみです。



以前のように、手動モードで複数のリソースを1つに結合すると、どこでも機能し、SPDYが広く配布された後でも機能します。 JavaScrit、CSS、および画像-リソースの基本的な種類を組み合わせるための多くのツールがあります。

JavaScriptとCSS

サイトが複数の外部JavaScriptファイルを使用している場合、これらすべてのファイルを1つに結合することを検討する必要があります。 ブラウザは、スクリプトの読み込み中にページのレンダリングを一時停止します。 各リクエストにはオーバーヘッドが必要なため、次の例の動作はそれよりも遅くなります。

<script src="jquery.min.js"></script> <script src="main.js"></script> <script src="image-carousel.js"></script> <script src="widget.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

複数のリクエストを1つにまとめることで、ロード時間を大幅に短縮できます。

  <script src="main.production.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードを記述してデバッグしながら結合ファイルを操作するのは非常に不便なので、通常、連結は完成したサイトに対してのみ行われます。 CSSファイルは、JavaScriptとまったく同じ方法でマージされます。

画像

画像の読み込み時にリクエストの数を減らすための2つの主な手法は、URLとスプライトにデータを埋め込むことです。

データ：URI

data：URIは特別な形式のURLで、小さな画像をURLとしてHTMLまたはCSSドキュメントのテキストに直接埋め込むことができます。 データURIは、 img,



タグのsrc



属性とCSSの背景画像のURLの両方で使用できます。 埋め込み画像はbase64でエンコードされるため、より多くのスペースを必要としますが、通常の画像よりも1回の要求が少なくて済みます。 画像が十分に小さい場合、リクエスト数の減少によるゲインは、サイズの損失よりも大きくなります。 IE6およびIE7はデータをサポートしていません：URI、これに留意してください。

スプライト

スプライトはデータの優れた代替手段です：URI。 スプライトは、1つの大きな画像に結合された画像のコレクションです。 CSSを使用して、そこから小さな画像を切り取ることができます。 スプライトの欠点は、メンテナンスと変更の不便さです。 スプライトで画像を追加または変更するには、CSSを適切に変更する必要があります。



個々の画像のセットからスプライトを作成するための多くのツールがあります。 それらの1つは、読み込まれた画像に基づいてスプライトのCSSコードを生成するSprite Cow Webサイトです。

余分なバイトを削除-縮小、最適化、圧縮

複数のリソースを1つにまとめてHTTPリクエストの数を最小限に抑えることは、サイトの高速化に向けた大きな一歩ですが、さらに多くを達成できます。 連結後、ネットワーク経由で送信される合計バイト数を減らす必要があります。 これは通常、縮小、最適化、圧縮の形で行われます。

JavaScriptとCSS

JavaScriptとCSSは、効率的にマイニングされるテキストリソースです。 縮小とは、ブラウザが無視するすべての文字を削除することです。 JavaScriptとCSSの両方を変換するには、余分なスペース、改行、コメントを削除することから始めます。 JavaScriptの場合、さらに先へ進むことができます。 一部のミニフィケータは、複数文字の変数名を単一文字の変数名に置き換え、不要な言語構成要素を削除し、同等の短いものに置き換えます。



人気のあるJavaScript縮小ツールには、 UglifyJS 、 YUICompressor、およびGoogle Colsure Compilerが含まれます。 CSSの場合、YUICompressorとUglifyCSSがよく使用されます。

画像

画像には多くの場合、視覚的な品質を損なうことなく削除できる冗長データが含まれています。 これは難しくありませんが、特別なツールを使用する必要があります。 私たちのチームのFrancois Marieuxは、 PNGおよびGIFの操作に関する記事でこのトピックについてより詳細に書いています。



Yahoo! オンラインツールSmush.itを提供しています。 ImageOptimは、OSX用の同様のオフラインプログラムです。 完全自動モードで動作します。必要なファイルをドラッグアンドドロップするだけで、大幅に重量を減らすことができます。



視覚的な品質のわずかな低下が許容できる場合、さらに高い圧縮率で画像を圧縮できます。

サーバーも役立ちます

連結と縮小の後でも、節約できるものがあります。 ほとんどすべてのサーバーとブラウザーは、HTTPトラフィックの圧縮をサポートしています。 最も一般的な2つの圧縮スキームは、deflateとgzipです。 どちらも非常に効率的な圧縮アルゴリズムを使用して、サーバーを離れる前にデータのサイズを縮小します。

キャッシング

連結と圧縮は、最初にサイトにアクセスしたユーザーを支援します。 3番目の「K」-キャッシングは、通常の訪問者を支援します。 すでにサイトにアクセスしているユーザーは、すべてのリソースをリロードしないでください。 HTTPは、これを実現する2つのメカニズムを提供します-キャッシュされたヘッダーとETag、またはエンティティタグ。



静的リソースのキャッシングに関連するHTTPヘッダーには2種類あり、それらは変更されることはありません。 これらは、2つのHTTP応答ヘッダーフィールド— Expires



およびCache-Control: max-age



です。 Expires



フィールドには、リソースを更新する必要がある日付が格納されます。 max-age



リソースの寿命（秒単位）。 ヘッダーのこれらのフィールドが設定されている場合、ブラウザは指定された時間後にのみ既存のリソースを要求します。



ETagはリソースのバージョンのラベルであり、リソースのローカルバージョンがサーバー上の現在のバージョンと一致することを確認するのに役立ちます。 Etagは、いつでも変更できる動的コンテンツに適しています。 ETagがリソースにインストールされると、バージョンを確認するようにブラウザーに指示し、バージョンが変更されていない場合、リソースをダウンロードできません。 ETagを使用するリソースでは、毎回サーバーから少量の情報を送信する必要があるため、ライフタイムを示すリソースほど効果的ではありません。

強制キャッシュ消去

EtagよりもExpires



およびmax-age



フィールドを使用する利点は、ブラウザが期限切れの場合にのみリソースを要求することです。 これも主な欠点です。 リソースが突然変更された場合はどうなりますか？ キャッシュを強制的にクリアする必要がある場合があります。



これは通常、URLにリソースのバージョン番号を追加することによって行われます。 URLを変更すると、リソースの新しいバージョンがダウンロードされます。



たとえば、寿命が example.com/logo.png



example.com/logo.png



は1年ですが、ロゴは変更されており、古いバージョンを既にダウンロードしている人は誰でも1年後に新しいバージョンが表示されます。 これに対処するには、URLにバージョン識別子を追加します。

 http://example.com/v8125/logo.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または

 http://example.com/logo.png?v8125
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ロゴが変更されると、URLも変更されます。つまり、すべてのユーザーが新しいバージョンをダウンロードします。

Connect-cachify：リソースを連結およびキャッシュするためのNode.jsライブラリ

Connect-cachifyは、リソースの連結とキャッシュを容易にするためにMozillaによって開発されたNode.jsのミドルウェアです。



実動モードでは、connect-cachifyは結合および縮小されたリソースを提供し、デフォルトでそれらの有効期間を1年に設定します。 開発モードでは、代わりにリソースが1つずつ割り当てられるため、デバッグが容易になります。 Connect-cachifyは連結と縮小に関与せず、ビルドスクリプトの良心に任せます。



connect-cachifyは、 setup()



関数の呼び出しによって構成されます。 assets



とoptions



2つの引数を取りoptions



。 assets



は、プロダクションモードと開発モードのリソース間の対応を確立する辞書です。 結合および縮小された各リソースは、開発モードのいくつかの個別のリソースに対応します。



options



オプションのパラメーター。

• prefix-リンク内のハッシュをリダイレクトする行（デフォルト-空）;
• production
  
  
  
  -本番モードと開発モードを切り替えるフラグ（デフォルトではtrue
  
  
  
  ）。
• root
  
  
  
  静的リソースを含むディレクトリへのフルパス（デフォルト- '.'
  
  
  
  ）。

接続キャッシュの例

3つのCSSファイルと3つの個別のスクリプトを参照する単純なHTMLがあるとします。

 ... <head> <title>Dashboard: Hamsters of North America</title> <link rel="stylesheet" type="text/css" href="/css/reset.css" /> <link rel="stylesheet" type="text/css" href="/css/common.css" /> <link rel="stylesheet" type="text/css" href="/css/dashboard.css" /> </head> <body> ... <script type="text/javascript" src="/js/lib/jquery.js"></script> <script type="text/javascript" src="/js/magick.js"></script> <script type="text/javascript" src="/js/laughter.js"></script> </body> ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

connect-cachifyをサーバーに接続し、運用リソースと開発リソースの対応を設定し、モジュールを構成します。

 // Include connect-cachify const cachify = require('connect-cachify'); // Create a map of production to development resources var assets = { "/js/main.min.js": [ '/js/lib/jquery.js', '/js/magick.js', '/js/laughter.js' ], "/css/dashboard.min.css": [ '/css/reset.css', '/css/common.css', '/css/dashboard.css' ] }; // Hook up the connect-cachify middleware app.use(cachify.setup(assets, { root: __dirname, production: your_config['use_minified_assets'], })); ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

DRYの原則に違反しないように、リソース対応マップは、connect-cachifyとビルドスクリプトの両方で使用される別のファイルに保存できます。



次に、テンプレートを更新して、CSSとJavaScriptを含める場所を示します。 CSSは、それぞれcachify_css



ヘルパー、JavaScript、 cachify_css



を使用して接続されます。

 ... <head> <title>Dashboard: Hamsters of North America</title> <%- cachify_css('/css/dashboard.min.css') %> </head> <body> ... <%- cachify_js('/js/main.min.js') %> </body> ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

接続キャッシュ出力

productionフラグがfalse



に設定されてfalse



場合、connect-cachifyは上記の元のHTMLと同様に、3つのCSSリンクと3つのJSリンクを生成します。 ただし、 true



に設定されているtrue



、作成されるタグは1つだけです。 各タグのURLには、リソースのMD5ハッシュが含まれます。 これは、リソースが変更された場合に強制的に更新するために行われます。 以上です。

 ... <head> <title>Dashboard: Hamsters of North America</title> <link rel="stylesheet" type="text/css" href="/v/2abdd020a6/css/dashboard.min.css" /> </head> <body> ... <script type="text/javascript" src="/v/acdd2ab372/js/main.min.js"></script> </body> ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

サイトを高速化するためにできることの多くは非常に簡単です。 最も基本的なものである、連結、圧縮、キャッシングの3つのKでも、ページの読み込み時間を大幅に短縮し、ユーザーエクスペリエンスを向上させることができます。 Connect-cachifyは、アプリケーションの連結とキャッシングの自動化に役立ちますが、他にも多くの改善点があります。 フロントエンドアクセラレーションに関する次の記事では、ETagを使用して動的コンテンツをキャッシュする方法を示します。

---