電子エンターテインメントのウェブページは3種類のデバイス向けに最適化する必要がある

これからのクリスマスと年末年始の休暇中に多くの消費者が新しいスマートフォンやタブレットを購入し、新しいデバイスを楽しみながら多くのデジタル エンターテイメント サイトを訪問することが予想されます。

これらのデジタル エンターテイメント ウェブサイトは、多くの音楽、ビデオ、ポッドキャスト、その他のコンテンツを提供し、ユーザーが同様の興味を持つ他のユーザーとコミュニケーションできるようにするソーシャル機能も追加します。

私たちはこれまで多くのデジタル エンターテイメント ウェブ ビジネスを調査してきましたが、今がそれらのパフォーマンスを観察する良い機会だと考えています。では、3 つの画面 (コンピューター、スマートフォン、タブレット) でコンテンツを配信する取り組みが成功するかどうかを見てみましょう。

テストでは、コンピューターには IE9 ブラウザ、スマートフォンには iPhone 4、タブレットには iPad 2 を使用しました。

まず第一に、ページの読み込み速度

スマートフォンの場合、理想的なページ応答時間は 5 秒未満であるべきだと考えています。実際のテストでは、Spotify と rdio のみがこの要件を満たすことができました。 Project Playlist の応答時間は驚異の 36.4 秒です。

デスクトップでは、典型的なページ応答時間は 2 ～ 3 秒ですが、奇妙なことに、Spotify のデスクトップでの平均読み込み時間は 9.62 秒です。この点に関しては、これらの電子エンターテイメント Web ページにはまだまだ改善の余地があるようです。

私たちは、SoundCloud を詳しく調べることにしました。なぜなら、このサイトはスマートフォンの Web 開発に関して他の企業にとって優れた手本となっているからです。一般的に、テストを通じて、SoundCloud はスマートフォンの画面に対して特別な最適化を行っていますが、3G ネットワークに対する最適化は十分ではないことがわかりました。そのパフォーマンスを詳しく分析してみましょう。

SoundCloud がスマートフォンの Web 上でうまく機能している点の 1 つは、データ URL を使用して画像要素を読み込むことです。データ URL は、追加の HTTP アドレスにアクセスする必要なく、ページに画像要素を直接 HTML に追加します。これにより、デバイスは 1 回のダウンロードでページ上のすべての要素を表示できるようになり、トラフィックが節約され、応答時間が短縮されます。

SoundCloud が使用するもう 1 つの技術は、CSS スプライトと呼ばれる Web 画像処理方法です。この手法では、複数の小さな画像を 1 つの大きな画像に結合し、CSS ルールを使用して画像の特定の表示位置を決定します。 CSS スプライトはデータ URL よりも少し複雑ですが、キャッシュまたは再利用する必要があるページを処理する場合にはより有利です。これらはモバイル最適化の優れた例です。

2番目に重要なのは、やはりページの読み込み速度です

それでは、SoundCloud がモバイル Web 上で不十分な点をいくつか見てみましょう。主な問題は、最初のページ要求が基本 HTML ページにリダイレクトされることです。最初のリダイレクトでは、ユーザーのアクセス要求を安全なドメイン名に転送します。要求がデスクトップ コンピューターからのものなのか、モバイル デバイスからのものなのかを識別した後、ユーザーのアクセス要求を安全でないドメイン名に転送します。これらの手順により、ユーザーのページ アクセス要求の読み込みが開始されるまでに 1 秒の遅延が発生します。

応答速度に影響を与えるもう 1 つの要素は、Google Analytics などの分析タグです。 SoundCloud では、重要な Web コンテンツの前に分析タブの読み込みが開始されることがわかりました。これにより、Web ページの応答が遅くなるだけでなく、問題が発生する可能性も高まります。サードパーティ製アプリに問題があり、正常に動作しない場合は、ページ全体の読み込みに失敗する可能性があります。 Web ページでは、Web ページの重要なコンテンツを読み込んだ後にこれらのタグを読み込むのが最適です。

さらに、SoundClond は、モバイル ウェブサイトに多数の要素とコンテンツを表示することを意識的に決定しました。モバイルホームページには 25 枚の小さな画像が掲載されています。これらの過剰な要素とコンテンツにより、3G ネットワーク上でのモバイル ページの応答に時間がかかりすぎます。この設計は WiFi アクセスを使用するユーザーには受け入れられますが、3G ネットワーク アクセスを使用するユーザーには大きな影響を与えます。 SoundCloud は、モバイル Web ページのパフォーマンスを向上させるために Web ページ上の非動的画像を最適化しましたが、これらの最適化だけでは明らかに不十分です。3G ネットワーク アクセスを使用するユーザーは依然として顕著な遅延を経験し、モバイル Web ページの読み込みは大幅に遅くなります。

比較のために、SoundCloud の主な競合である Spotify のモバイル ページもテストしました。 Spotify のモバイル ホームページには動的コンテンツが非常に限られており、モバイル ページの応答時間は 4.67 秒であることがわかりました。rdio のページ応答時間はより速く、3.9 秒かかります。

要約する

多くのデジタル エンターテイメント ウェブ ページが休暇中に多数の訪問者を迎えることは間違いありません。訪問者の損失を回避するために、複数のデバイスで顧客のニーズを満たすことができる満足のいく顧客体験をユーザーに提供できることを願っています。当社のテストでは、さまざまなモバイル デバイスを使用し、さまざまなプロバイダー ネットワークの使用など、複数のテスト シナリオをシミュレートして、ユーザーの最終的なエクスペリエンスを理解し、企業が競争力を高め、より成長するための最善の決定を下せるよう支援します。

2013年にお会いしましょう！

(VB経由)

元のタイトル: 電子エンターテイメントのウェブページは 3 種類のデバイス向けに最適化する必要があります

キーワード: エンターテイメント、ウェブページ、レスポンス、3 つのタイプ、準備、最適化、私たち、期待、クリスマス、新年、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化