レスポンシブWebデザイン学習(3) - モバイルデバイスでのWebページのパフォーマンスを向上させる方法

レスポンシブWebデザイン学習(3) - モバイルデバイスでのWebページのパフォーマンスを向上させる方法

序文

モバイル デバイスでは、帯域幅とプロセッサ速度の制限により、Web ページのパフォーマンスに対する要件が高くなります。ウェブページ上のどの要素がモバイルデバイスでのウェブページの読み込み速度を遅くするのでしょうか?モバイル デバイス上のページの全体的なパフォーマンスを向上させるには、これらの要素をどのように処理すればよいでしょうか?モバイルとデスクトップの両方のページデザインを満たすデザインパターンはありますか?

この記事の内容:

1. デスクトップウェブページのパフォーマンステスト

2. モバイルデバイスでのWebページのパフォーマンステスト

3. モバイルデバイスウェブページのパフォーマンスボトルネック

4. モバイルデバイスでのウェブページのパフォーマンスを向上させる方法

5. モバイルファーストのレスポンシブ Web デザインとプログレッシブ エンハンスメントとは何ですか?

文章

1. デスクトップウェブページのパフォーマンステスト

デスクトップ ブラウザーで使用されるページは、Yslow と呼ばれるプラグインを使用して検出できます。このプラグインは Firefox と Chrome の両方で利用できます。これはYahooが主導するプロジェクトで、アドレスはhttps://github.com/marcelduran/yslow/wikiです。

Chrome に YSlow をインストールした後、Sina のホームページを開いてテストします。

( Web コンポーネントを読み込んでいます... )

ロード後、分析結果が表示されます。

与えられたスコアは D、62 ポイントであることがわかります。

YSlow には、ページのパフォーマンスをテストするための一連の標準があります。各標準に従って Web ページを検出し、状況に基づいて評価と提案を行います。たとえば、Sina のホームページの評価と推奨事項は次のとおりです。

具体的な提案を示す最初の「HTTP リクエストを減らす」を見てみましょう。

HTTPリクエストを減らすことでF評価

このページには 19 個の外部 JavaScript スクリプトがあります。これらを 1 つに結合してみてください。
このページには 33 個の外部背景画像があります。CSS スプライトと組み合わせてみてください。


ページ上のコンポーネントの数を減らすと、ページのレンダリングに必要な HTTP リクエストの数が減り、ページの読み込みが速くなります。コンポーネントの数を減らす方法には、ファイルを結合する、複数のスクリプトを 1 つのスクリプトに結合する、複数の CSS ファイルを 1 つのスタイル シートに結合する、CSS スプライトとイメージ マップを使用するなどがあります。

Sina ホームページには外部リンク JS ファイルが多く存在し、その結果 HTTP リクエストが多く発生することがわかります。 HTTP リクエストが多すぎると、Web ページの読み込み速度が低下します。

例えば、シナがAを獲得した項目を見てみましょう。   AJAX リクエストには GET を使用します。メリットは次のとおりです。

XMLHttpRequest オブジェクトを使用する場合、ブラウザは POST を 2 つのステップで実装します: (1) ヘッダーの送信、(2) データの送信。GET はヘッダーとデータを一緒に送信するため (Cookie が多数ある場合を除く)、POST ではなく GET を使用する方が適切です。IE の最大 URL 長は 2 KB であるため、この量を超えるデータを送信する場合は GET を使用できない可能性があります。

実際、Sina は多くの分野で非常に優れています。しかし、まだ改善の余地はあります。

2. モバイルデバイスでのWebページのパフォーマンステスト

デスクトップ ブラウザでは、Web ページのパフォーマンスを検出するプラグインを簡単にインストールできますが、モバイル ブラウザではそれができません。モバイル Web ページのパフォーマンスを分析する場合、ルーティング時の HTTPRequest と HTTPResponse を分析する方法しかありません。専門家は、プロキシ サーバーを使用してルート ログ分析を読み取ることができます。しかし今では、Blaze を使用するという別の選択肢があります。これは無料のモバイル ページ パフォーマンス分析サービスですが、一度に 1 つのリクエストしか処理できないため、YSlow ほど高速ではなく、しばらく待つ必要がある場合があります。それでも、パフォーマンス分析は良好です。

Blaze のアドレスは http://mobitest.akamai.com/m/index.cgi です。

テストには 3g sina を使用します。

アドレスバーに3g Sinaのアドレスを入力し、デバイスの種類を選択します。デバイスと場所の両方に、現在 2 つのオプションのみがあります。実は、このようなウェブサービスは中国でも開発可能です。

パラメータを入力したら、クリックします

その後、分析が開始されますが、このプロセスには数分かかる場合があります。待機時間は、先にキューに入れられている分析リクエストの数によって異なります。このサイトでは、一度に 1 ページしか分析できません。

結果が出ると、この Web ページの平均読み込み時間とサイズの概要が表示されます。

3G Sinaの読み込み速度は国外でも許容範囲内であり、ページサイズが非常に小さいことがわかります。

より詳細なパフォーマンス分析を見てみましょう (HAR レポートを表示するにはクリックしてください - HAR: HTTP アーカイブ レポート):

統計情報を確認することができます

画像は依然としてページトラフィックの大部分を占めています。さらに、JS とページテキスト自体のサイズはほぼ同じであり、3g Sina が依然として JS に大きく依存していることがわかります。

これを使用して、モバイル デバイスのブラウザーで通常の Sina ホームページを開いたときに何が起こるかを試してみましょう。

ご覧のとおり、ページにプロンプ​​トが表示され、ユーザーが携帯電話で Sina のタッチスクリーン バージョンを使用することが提案されます。

HAR ファイルを見て、これがどのように行われるかを見てみましょう。

ページ要求は最初に PWS サーバー ( Microsoft が立ち上げた個人用 Web サーバー) に送信され、その後要求が別のアドレス ( http://sina.cn ) にリダイレクト (ステータス コード 302 ) されることがわかります。これらは重要なポイントではありません。以下のリクエスト ヘッダーでは、ユーザー エージェントはリクエストが行われたデバイスと、デバイスで実行されているオペレーティング システムの種類を示します。 Sina はこの情報を使って判断し、ユーザーに Sina のタッチスクリーン版への切り替えを促したと推測できます。

3. モバイルデバイスウェブページのパフォーマンスボトルネック

いくつかのページ統計を分析した結果、基本的には次の分布に似ていることがわかりました。

モバイル デバイスの Web ページのパフォーマンスは、明らかに画像ファイルの影響を受けます (HTML ファイルと JS ファイルのサイズを過小評価しないでください)。さらに、ページに Google マップなどの埋め込みコードが含まれている場合、予期しないコンテンツが大量に読み込まれ、Web ページの速度が低下します。

4. モバイルデバイスでのウェブページのパフォーマンスを向上させる方法

モバイル デバイスでの Web ページのパフォーマンスを向上させるには、画像と埋め込みコード ブロック (Google マップ) も役立ちます。

4.1 モバイルデバイスでのアクセス速度を向上させるために画像のサイズを縮小するにはどうすればよいですか?

2つの状況があります:

ケース1: 画像はCSSで、背景としてリンクされている

その後、PS などのソフトウェアを使用して画像の品質を下げ、画像のサイズを縮小することができます。

ケース2: 画像はHTMLファイル内のimgタグとして指定されます

この場合、代替ファイル方式は使用できません。画像自体はサーバーから提供されているのではなく、外部リンク画像である可能性があるからです。この状況を改善するには、次の方法を使用できます。

元の HTML コード スニペット:

コードをコピー
コードは次のとおりです。

<img src="brews_images/bensons.jpg">

に:

コードをコピー
コードは次のとおりです。

<img src="http://src.sencha.io/http://[ドメイン]/[パス]/brews_images/bensons.jpg">

sencha.io Src は、現在のデバイスの画面に合わせて画像のサイズを自動的に再構築するため、画像ソースを提供する際には鮮明な画像を選択する必要があります。 Sencha はどのようにしてデバイスに応じて画像のサイズを自動的に変更するのでしょうか?原理は非常にシンプルで、多数のデバイス モデルと画面サイズをサーバー上に保存することです。ブラウザが img タグ内の画像に対して HTTP リクエストを行うと、Sencha はリクエスト ヘッダーの user-agent 属性を通じてデバイス モデル情報を取得し、対応する画面サイズを照会します。次に、このサイズに基づいて次のhttp://[DOMAIN]/[PATH]/brews_images/bensons.jpg画像のサイズを圧縮してから、ブラウザに返します。

これの利点は、Web デザイナーは高解像度の画像を提供するだけで、Sencha がサイズ変更作業を行うため、さまざまなデバイスに適応できるかどうかを心配する必要がないことです。

これを行うことの欠点も明らかです。つまり、画像がサードパーティのサーバーを通過するため、効率に確実に影響します。また、海外のサービスであるため、中国国内で製造されたほとんどの携帯電話には対応していない可能性があります。しかし、中国人は国内の写真のサイズを変更する同様のウェブサービスを開発することができます。

4.2 モバイルデバイスのページでマップをどのように処理しますか?

これも非常にシンプルです。先ほども述べたように論理的な判断をするためであり、画面が一定サイズより小さい場合はマップを非表示にする設定になっています。のように:

コードをコピー
コードは次のとおりです。

@media スクリーンと (最大幅:480px) {
/*..その他の CSS スタイル...*/
#地図{
表示:なし;
}
}

ウェブページ上部の大きなバナーでも同じことができます。

コードをコピー
コードは次のとおりです。

@media スクリーンと (最大幅:480px) {
/*..その他の CSS スタイル...*/
#地図{
表示:なし;
}
#バナー{
表示:なし;
}
}

5. モバイルファーストのレスポンシブ Web デザインとプログレッシブ エンハンスメントとは何ですか?

5.1 モバイルファーストのレスポンシブWebデザイン

モバイルファーストのレスポンシブ Web デザインとは、「モバイル テンプレートから始まる RWD テクニック」を意味します。つまり、RWD の設計はモバイル バージョンから開始し、徐々に複雑さを増やしていく必要があります。

非常に小さい画面(初期の Nokia や Blueberry の携帯電話など):

最も基本的なHTML、最もシンプルなレイアウト、非常に小さな画像、制限されたCSSとJSを使用します

小型画面スマートフォン:iPhoneなど):

携帯電話がサポートしている場合は、HTML5機能、シンプルなレイアウト、小さな画像(非常に小さな画面よりも大きい)、より多くのCSSとjsを追加できます。

中型画面iPad、タブレットなど

スペースに余裕があるので、サイドバーなどのオプションのコンテンツを追加することを検討できます。複数列レイアウトが利用可能です。より大きな画像が使用される場合があります。

大画面デスクトップモニター、テレビなど

ワイドスクリーンレイアウト(3列や4列など)を使用し、大きな画像を使用できます。テレビユーザーの場合、ユーザーは 10 フィート離れた場所に立ってページをリモートで操作している可能性があるため、ナビゲーションを最適化することを検討してください。

5.2 プログレッシブエンハンスメント

プログレッシブエンハンスメントでは、Web デザインをさまざまなレベルとして捉えます。

最初のレイヤーは構造コンテンツです。このレイヤーは、Web ページの基本的な構造とコンテンツを決定します。デザインがこのレイヤーに留まれば、ほぼすべてのデバイスでページを開くことができます。

2 番目と 3 番目のレイヤーは CSS と JS です。すべてのデバイスがこれらの機能をサポートすることを保証することはできませんが、サポートされていれば、ユーザーは快適なエクスペリエンスを得られるでしょう。

長年にわたり、Web 開発者は最先端のブラウザ向けに Web アプリケーションを開発し、古いブラウザのユーザーを無視してきました。 (中国ではこの状況はそれほど深刻ではないようで、古いブラウザのユーザーに対しては皆がまだよく気を配っています)。プログレッシブエンハンスメントの設計コンセプトはその逆で、コンテンツに重点を置き、ユーザーエクスペリエンスを向上させます。デバイスがサポートしていない場合でも、少なくともページ コンテンツのアクセシビリティは保証されます。

5.3 コンテンツファースト設計

モバイルファーストのレスポンシブ Web デザインとプログレッシブ エンハンスメントは、どちらもコンテンツを重視し、デザインにおいてコンテンツを最優先するため、コンテンツ ファースト デザインと呼ばれることもあります。優れたコンテンツ重視のページでは、Web ページが簡素であっても、情報が整然と整理されている必要があります。

要約:

モバイル Web ページで優れたパフォーマンスを実現するには、多くの側面を改善する必要があります。まず第一に、私たちのデザイン哲学はコンテンツの選択と構成に重点を置くべきです。次に、ページの読み込み速度を遅くする要因(http リクエストが多すぎるなど)は可能な限り回避し、回避できない要因(画像の縮小やマップの非表示など)は可能な限り最適化する必要があります。最後に、最も重要なのはデザイナーの意識です。美しく華やかなデザインを追求しても、ユーザーに最高のユーザーエクスペリエンスはもたらされません。最高のユーザー エクスペリエンスは応答速度に基づくべきであり、速度が保証されている場合にのみ美化について議論できます。

<<:  MySQL に大量のデータを挿入するときに重複データを除外する方法

>>:  base target="" はリンクのターゲットオープンフレームを制御します

推薦する

MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要

序文最近、古いプロジェクトから残ったいくつかの SQL 最適化の問題に対処するのに忙しくしています。...

DockerにRedisコンテナをインストールするための実装手順

目次DockerにRedisをインストールする1. Redisイメージを見つける2. Redisイメ...

CSS3セレクターの新機能の実装

目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...

Apache Tomcat と IDEA エディターの統合に関する詳細なチュートリアル

1. Apache Tomcat 公式サイトから Tomcat 圧縮パッケージをダウンロードします。...

Vue コンポーネント ライブラリ ElementUI はテーブル読み込みツリー データのチュートリアルを実装します

ElementUIは、参考のためにテーブルツリーリストの読み込みチュートリアルを実装しています。具体...

Spark SQL の 4 つの一般的なデータ ソースの詳細な説明

汎用ロード/書き込みメソッドオプションを手動で指定するSpark SQL の DataFrame イ...

CocosCreatorでスワイプした位置にテクスチャを表示する方法

目次1. プロジェクト要件2. 文書の内容3. プロジェクト例4. プロジェクトコード1. プロジェ...

Vue プロジェクトでのスキャンコード決済の実装例 (デモ付き)

目次需要背景思考分析UI 表示始める1. 支払いコンポーネントテンプレートを作成する2. 支払いコン...

Windows 10 での MySQL 8.0.22 のインストールと設定方法のグラフィック チュートリアル

MySQL 8.0.22のインストールと設定方法のグラフィックチュートリアル、参考までに、具体的な内...

MySQL ロック関連知識のまとめ

MySQL のロックロックは、並行環境におけるリソースの競合を解決する手段です。その中でも、楽観的並...

Linux サーバーでフォルダー、ファイル、解凍コマンドを削除する方法

1. フォルダを削除する例: rm -rf /usr/java /usr/javaディレクトリとその...

ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介

a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...

更新とデータ整合性処理のためのMySQLトランザクション選択の説明

MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...

RHCE ブリッジング、パスワード不要のログイン、ポート番号の変更の概要

目次1. ブリッジを設定し、検証のためにパケットをキャプチャする1. ブリッジデバイスとセッションを...

JSベースの手持ち連射機能+テキスト揺れ特殊効果コードの簡単実装

少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...