モバイルサイトの速度の最適化

モバイルインターネットの成長に伴い、モバイルサイトの速度を最適化する必要性が高まっています。 Android、iOS、WebOS、BlackBerry OSなどの最新のスマートフォンでさえ、1Ghz以下の周波数のプロセッサーを搭載しており、3Gの速度は非常に遅いと考えることができます（ダウンロード速度はDSLの3倍）。



モバイルデバイスは、「大きな」マシンの問題を継承しています。httpリクエストの数からJavaScriptのパフォーマンスまで。

モバイル機能

ポケットに収まることが多く、紛失しやすいという事実に加えて、モバイルデバイスとデスクトップにはいくつかの重要な違いがあります。

• 低画面解像度;
• 遅い接続;
• 制限されたキャッシュサイズ。
• 多くの異なるデバイスとフォームファクター。
• 低プロセッサ電力。
• 広範なHTML5サポート
• 比較的新しいブラウザー（この世界のIE6については知りません）。

一般的な推奨事項

「大規模サイト」のパフォーマンスの問題のほとんどはモバイルサイトに固有のものであるため、上記の手法の多くはデスクトップの最適化に由来しています。

• gzipを使用してテキストデータを圧縮します。
• HTMLドキュメントのヘッダーにCSSを配置し、ページの下部にJavaScriptを配置します。
• サイト全体で使用されるJavaScriptファイルとCSSファイルを組み合わせます。 これにより、モバイルサイトにとって非常に重要なHTTPリクエストの数が減ります。
• CSSおよびJavaScriptコードの最小化と難読化を使用します。
• サイトで1回だけ使用されるJSとCSS、および小さなJSとCSS（最大5 kB）は、ページに直接含めることをお勧めします。 別のファイルに入れないでください。
• 多くのモバイルブラウザ（AndroidやOpera Mobileなど）では、接続数に4〜6以下の一般的な制限があります。 このようなブラウザにドメインシャーディングを使用しても、サイトの速度に悪影響を与えるだけです。
• 同時に、AndroidブラウザーはHTTPパイプラインをサポートします。これにより、1つの接続で3つのリクエストをサーバーに一度に送信できます。 サーバーがHTTPパイプラインもサポートしていることを忘れないでください。
• （目に見える品質の低下なしに）ファイルを正しく圧縮することが非常に重要です。たとえば、Smush.itを使用します 。
• リダイレクトを避けるか、少なくともキャッシュします。
• iOSの場合、Quicktime Reference Moviesを使用すると、インターネット接続の機能に基づいて、訪問者にさまざまなビデオファイルを「与える」ことができます。
• 可能な限りWebSocketsを利用してください（完全なサポートは、iOS Safari 4.2-4.3でのみ利用可能で、Opera Mobile 11.1では部分的にサポートされます）。

HTMLおよびCSSの最適化

モバイルブラウザーでのHTML5およびCSS3の広範なサポートにより、Webサイトの最適化に最も近代的な手法を使用できます。

• HTMLコードは非常に単純でなければなりません。 HTML5セマンティック要素を使用し、<！DOCTYPE html>を指定し、オプションのxmlns属性を除外します。 また、divとクラスの数を減らしてください。
• 入力の使用頻度を減らし、使用する場合はHTML5形式で入力してください。
• 背景画像の代わりにCSSグラデーションを使用します-これにより、サーバーへの呼び出し回数が大幅に削減されます。
• CSSは他の多くの便利な機能を提供します。その使用は画像（影、丸い境界線、svgおよびキャンバスページに埋め込まれた複数の背景）よりも効果的です。

画像の最適化

サーバーへの不要な呼び出しとの戦いに加えて、ダウンロードしたファイルのサイズを最小限に抑えることが非常に重要です。 この観点では、画像の最適化が最も重要な要素です。

• CSSスプライトを使用して、ロゴとアイコンを最適化します。
• htmlおよびcssでは、base64で画像をエンコードします-非常に効率的な方法です。 ほとんどのモバイルブラウザでサポートされており、エンコードはサーバー側で行われます。 PHP-base64_encode（）に加えて、Canvas-toDataURL（）のHTML5テクノロジーを使用できます。
• 写真ではなくUnicodeで絵文字アイコンをエンコードします（iOS 2.2以降、および多くの日本の携帯電話でサポートされています）。

モバイルデバイスでは、画面の解像度はデスクトップ画面よりも大幅に低くなります。 CSSを使用すると、ユーザーの画面の現在の解像度を判断し、これに応じて、より適切な解像度を持つ画像のバージョンをユーザーに渡すことができます。

/* Screens bigger than 480px */ @media only screen and (min-device-width: 481px) { #header { background-image: url(header-full.png); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のコードは、ユーザーの画面の幅が480pxより大きいと判断し、ブラウザにheader-full.png画像をフル解像度でダウンロードするように指示します

しかし、画面の幅が480px未満であると判断した次のコードは、ブラウザに小さな画面に適した画像を提供します。

 /* Screens smaller than 480px */ @media only screen and (max-device-width: 480px) { #header { background-image: url(header-small.png); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このサイトとブラウザ間の理解の結果、モバイルデバイスにダウンロードされるデータのサイズは大幅に減少します。



ただし、まずユーザーの利便性に注意してください。 同じ原則（モバイルデバイスとデスクトップデバイス用の別個のコンテンツ）を使用して、高解像度の画面を持つユーザーがサイトを楽しめるようにし、同時に他の訪問者に害を与えないようにすることができます。

たとえば、iPhone 4ユーザーは、電話画面に高DPI画像（例：300）を表示することにすでに慣れています。 また、Retinaスクリーンでサイトの見栄えを良くしたい場合は、別の高解像度画像セットを用意し、 CSS Media Queriesを使用してアップロードする必要があります。

 /* High dpi */ @media only screen and (min-resolution: 300dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5) { #header { background-image: url(header-300dpi.png); } } /* Low dpi */ @media only screen and (max-resolution: 299dpi), only screen and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max--moz-device-pixel-ratio: 1.5) { #header { background-image: url(header-72dpi.png); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、ユーザーの利便性を優先してパフォーマンスを犠牲にする価値がある場合にまさに当てはまります。

接続速度の最適化

Android 2.2 Froyo以降、開発者はデバイスから現在の種類のインターネット接続に関するデータを受信する機会があります。 これは、navigator.connectionオブジェクトを使用して実装されます。



次に、3Gネットワ​​ークで実行されているデバイスから受信したデータの例を示します。



navigator = {

connection: {

"type": "4",

"UNKNOWN": "0",

"ETHERNET": "1",

"WIFI": "2",

"CELL_2G": "3",

"CELL_3G": "4"

}

};





接続タイプは「4」で、CELL_3Gに対応しています。 単純なスクリプトを使用して、接続のタイプを決定し、この情報をHTML要素のCSSクラスとして渡すことができます。

 // Initialize variables var connection, connectionSpeed, htmlNode, htmlClass; // Create a custom object fallback if navigator.connection isn't available connection = navigator.connection || {'type':'0'}; // Set connectionSpeed switch(connection.type) { case connection.CELL_3G: // 3G connectionSpeed = 'mediumbandwidth'; break; case connection.CELL_2G: // 2G connectionSpeed = 'lowbandwidth'; break; default: // WIFI, ETHERNET, UNKNOWN connectionSpeed = 'highbandwidth'; } // set the connection speed on the html element, ie <html class="lowbandwidth"> htmlNode = document.body.parentNode; htmlClass = htmlNode.getAttribute('class') || ''; htmlNode.setAttribute('class', htmlClass + ' ' + connectionSpeed);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、低速接続を定義するときに、CSSを使用して最適化された画像を訪問者のブラウザに渡します。

 .highbandwidth .logo { background-image:url('logo-high.jpg'); } .mediumbandwidth .logo { background-image:url('logo-medium.jpg'); } .lowbandwidth .logo { background-image:url('logo-low.jpg'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それでも、ユーザーの選択を奪わないでください（独裁者にはなりません）。 したがって、一般的な選択に加えて：

• desktop | mobile
  
  
  
  サイトバージョンdesktop | mobile



desktop | mobile
  
  
  
  

また、選択肢を与えます：

• 接続速度：高速High | Medium | Low



High | Medium | Low
  
  
  
  

単純なルールを使用します-「ピクセルが表示されていない場合、ダウンロードする必要はありません」が、同時に「ユーザーのために決定するべきではなく、推奨することができます」。

キャッシング

デスクトップの場合、ほとんどの場合、ソリューションが外部ファイルを優先するのであれば、モバイルの場合はおそらく反対です。 キャッシュのサイズが小さいため、大規模で長期的な節約について話す必要はありません。 ページの再読み込み速度を最適化するためのヒントがいくつかあります。

• キャッシュajax;
• 遠い将来のファイルの関連性のヘッダーを設定します（将来のキャッシュ有効期限ヘッダー）。
• Cookieを避け、代わりにlocalStorageを使用します（Cookieはhttp-requestsによって送信されるため、送信されるデータのサイズが大幅に増加します）。 LocalStorageとSessionStorageは、Cookieに代わるより効果的なHTML5テクノロジーです。 外部CSSとJavaScriptもそこに保存できます。

LocalStorageとSessionStorageの重要な制限は、String型のデータのみを保存できることです。 したがって、まずデータを文字列形式に変換し、その後JSON.stringify()



およびJSON.parse()



を使用して元のデータに復元する必要があります。

 var user = { firstName: 'Joe', lastName: 'Schmoe', age: 40 } // Store the object localStorage.userInfo = JSON.stringify(user); // Retrieve the object var user = JSON.parse(localStorage.userInfo);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのオブジェクトに格納できるデータのサイズはブラウザーごとに異なりますが、ほとんどの場合は5 Mbで十分です。

興味深い点-AndroidとBlackBerry OSのデバイスは、デバイスのオン/オフを切り替えた後でもキャッシュを保存できます。同時に、iPhoneはこれを自慢できません。

スマートフォン	iPhone 4	ギャラクシーS	ネクサス	ブラックベリートーチ
OS / Ver	iOS / 4.3	Android 2.2	Android 2.3	ブラックベリー6
永久*	0	4	4	25
メモリ内**	100	4	4	25

錠剤	iPad 1	iPad 2	XOOM
OS / Ver	iOS / 4.3	iOS / 4.3	Android 3.0
永久*	0	0	20
メモリ内**	20	50	20

*永続-これは、ブラウザを再起動した後でも保持されるキャッシュです。

**メモリ内-これはRAMに保存されるキャッシュです（たとえば、アプリケーションを切り替えるとき）。 Blazeブログでモバイルデバイスのキャッシュの詳細を読んでください。

Javascriptの最適化

モバイルデバイスのプロセッサ能力が不十分であるため、関連する負荷を削減するための努力が再び必要になります。 したがって、Googleの調査によると、JavaScriptコードの1 KBごとの解析は約1ミリ秒です。

• JavaScriptのタイムアウトアニメーションを避けるには、代わりにCSS3トランジションを使用することをお勧めします（ただし、すべてのブラウザがこのテクノロジーを完全にサポートしているわけではないため、この場合は「予備の」旧式のオプションが必要です）
• タッチデバイスでは、クリックハンドラーは300ミリ秒から500ミリ秒の遅延につながります。これは非常に長いため、このようなデバイスの場合は、「ネイティブ」ハンドラーを使用することをお勧めします。
• 全体ではなく、大規模なフレームワーク（jQueryなど）の必要な部分のみを使用します。 小さなフレームワーク（XUI、zepto.js、microjs）を使用するのがさらに最適です。
• フォーム内のjavascriptを最小限に抑えるよう努めてください。可能な場合はHTML5を使用することをお勧めします。
• HTML5のもう1つの有用な成果は、クライアント側に保存されているデータベースの使用です。 既存のソリューションの中で、indexedDBが最も人気を獲得しました（このテクノロジがモバイルブラウザですぐにサポートされることを願っています）。
• ajax（onhashchange-履歴管理用）を使用して、変更が必要なもののみを要求します。
• JSをメインコンテンツと非同期にダウンロードします。
• 開始遅延を減らします。 たとえば、Gmail Mobileチームは、 モジュールを「遅延」ロードする興味深い方法を提案しています 。

この方法の本質は、最初に大きなプログラムモジュールを小さなモジュールに分割し、ページの読み込みの開始時に読み込む必要があるモジュールと、後で読み込むモジュールを分散する必要があることです。 また、保留中のモジュールは、ユーザーアクションによって呼び出されるときに読み込まれることも重要です。 このようなダウンロードは本当に怠looksに見えます。キックするまでは動きません。

おわりに

モバイルサイトの速度を最適化することの重要性は、インターネット上の日常的なタスクを解決するためにユーザーがスマートフォンをますます使用するようになっており、ますます重要になっています。



興味深いのは、ほとんどの人が、スマートフォンを使用するときのサイトの遅い操作に不寛容であることです。 多くの場合、これは特定のタスクが数秒以内に解決する必要があるためです（たとえば、レストランの住所を指定するなど）。



私たちの仕事は、機能性と使いやすさの損失を最小限に抑えながら、Webサイトの読み込み速度を最小限に抑えることです。