4 つの側面からモバイル ページのパフォーマンスを最適化する_html/css_WEB-ITnose

モバイル インターネットの発展に伴い、モバイル ページのパフォーマンスの最適化にますます注意を払う必要があります。今日はこの点についてお話したいと思います。

まず、なぜモバイル ページを最適化する必要があるのでしょうか?

モバイル ネットワークの現状を見ると、次のようになります。

モバイル ページのレイアウトはますます複雑になり、その効果はますます目まぐるしくなっていきます。統計によると、ファイルのダウンロードと実行はますます遅くなり、低速になると悪影響が生じます:

ユーザーの 71% がモバイル ページが PC ページと同じくらい高速であることを期待しています。応答時間は 5 秒まで許容できるため、モバイルの終了ページには十分な速度があることを確認する必要があります。

モバイル ページの速度は、モバイル ネットワーク帯域幅の速度、デバイスのパフォーマンス (CPU、GPU、ブラウザ)、およびページ自体の 3 つの要素に関連します。

現在の主流のモバイル ネットワーク標準は 3G です。

今年は 4G ネットワーク標準の急速な発展も見られ、モバイル ページの読み込み速度が再び向上しました

そして、現時点ではモバイル デバイス自体も、はiPhone6/Samsung Note4を筆頭に、スマートデバイスはこれまで以上に画面が大きくなり、CPU、GPU、メモリの信頼性も向上しています。

同時に、ブラウザのメーカーもページ速度を向上させるために絶え間ない努力を払ってきました。

ネットワーク標準サプライヤー、携帯電話メーカー、ブラウザメーカーは非常に強力ですが、私たちには何ができるでしょうか?

私たちにできることはモバイル ページ自体を最適化することであり、これは私たちのプロフェッショナルな価値を反映するものでもあるため、モバイル ページのパフォーマンスを最適化する必要があります。

モバイル ページを最適化するにはどうすればよいですか?

これについて話す前に、PC で一般的に使用される最適化方法について触れておく必要があります:

コードの最適化 (CSS、HTML、JS の最適化)

HTTP リクエストの削減 (スプライト画像、ファイルの結合) …)

DOM ノードの削減

ノンブロッキング (インライン CSS、JS 以降...)

キャッシュ

…

これらのメソッドのほとんどはモバイル端末に適しています。興味があれば、PDI コース「Web サイトのパフォーマンスの最適化」を参照してください。

今日お話しするのは、主にモバイル端末に適した最適化方法です。

まず第一に、ページがプレゼンテーションの開始から完了までどのような段階を経る必要があるかに注意する必要があります。主な段階は 4 つあります:

各段階の主な作業は上の図に示されています。そして私たちの最適化目標は次のとおりです:

次はそれをやってみましょう 上記の段階の最適化方法について詳しく説明しましょう。

まず、読み込みの最適化方法を見てみましょう:

1. プリロード

プリロードには 2 つの方法があります:

A. ユーザーが明確に認識できる方法。これは明示的な読み込みと呼ばれ、この読み込み方法をインタラクティブなページに追加することをお勧めします。これにより、一方ではページの興味を高めることができ、他方では、その後のページのエクスペリエンスをよりスムーズにすることができます。

B. 暗黙的な読み込み

最初の画像を読み込むときに 2 番目の画像を事前に読み込むこの方法を私は暗黙的な読み込みと呼んでいます。この方法の利点は、トラフィックを節約するだけでなく、エクスペリエンスを向上させることです。 。

2. オンデマンド読み込み

オンデマンド読み込みは、主に 2 つの方法があります:

この方法では、最初の画面を読み込むときに、最初の画面にできるだけ多くのコンテンツを読み込みます。最初の画面外の要素は、最初の画面に表示されるときにのみ読み込まれるため、トラフィックが大幅に節約され、最初の読み込み時間が短縮されます。

これはレスポンシブ読み込みと呼ばれ、JS または CSS を使用して解像度を決定し、導入用にさまざまなサイズの画像を選択することを意味します。これにより、読み込みが高速化され、トラフィックが節約されることも明らかです。

3. 画像を圧縮する

画像を圧縮する場合、最初に言及するのは jpg ファイルです:

モバイル JPG ファイルの場合は、次の結論があります:

サイズが大きく非可逆圧縮率が大きい jpg を使用する

jpegtran Lossless を使用する圧縮

png については次の結論が得られます:

カラフルな画像には png24 を使用してください

低色の画像には png8 を使用してください

pngquant を使用することをお勧めします

リダイレクトを避けるようにしてください

なぜリダイレクトを避けるべきなのか? なぜなら、図に示すように:

これは同じネットワーク速度でのテスト結果です。リダイレクトが遅くなる理由は、ドメイン名の検索、TCP リンク、リクエストの送信を繰り返すためです。

5. 他の方法を使用して画像を置き換える

2 つの方法があります。1 つ目は、CSS 3 に依存して画像を描画する方法です。

2 つ目は、画像の代わりに iconfont を使用する

ただし、iconfont が必ずしも画像より優れているわけではありません。 、これが私がやったことです 実験:

大きな画像の場合は、アイコンフォントはスプライト画像よりも優れています。 片側の小さいサイズのアイコンにのみ iconfont を使用することをお勧めします

次に、最適化のポイントは 2 つだけです。スクリプト実行のメソッド:

1. 最善を尽くして DataURI を避けてください

DataUri は、次の理由により、PC 側ほど普及していません。

テスト後、DataURI は単純な外部リンク リソースよりも 6 倍遅くなります。生成されたコード ファイルのサイズは減少しませんが、画像ファイルと比較して増加します。さらに、ブラウザは、base64 デコード プロセス中にメモリと CPU を消費する必要があります。はモバイル上で デメリットは特に顕著です。

2. クリックイベントの最適化

モバイル端末では、タッチスタート、タッチエンド、タッチなどのイベントを適切に使用して、遅延の大きいクリックイベントを置き換えてください。クリックが遅い原因はマウスダウンです:

それでは、レンダリング段階での最適化方法について 2 点だけ説明します:

1. アニメーションの最適化

a) css3 アニメーションを使ってみる

利点:

jsのメインスレッドを占有しない

ハードウェアアクセラレーションを使用できます

ブラウザはアニメーションを最適化できます

欠点:

中間状態監視をサポートしません

b) キャンバスアニメーションの適切な使用

利点:

できるレンダリング ツリーを回避する 計算とレンダリングが高速化されます

欠点:

開発コストが高く、メンテナンスが面倒です。

CSS 3 アニメーションと Canvas アニメーションを比較すると、次のようになります。

結論は次のとおりです。5 要素以内では CSS3 アニメーションを使用し、5 要素を超える場合は Canvas アニメーションを使用します。 RAF（RequestAnimationFrame）の合理的な使用（RequestAnimationFrame）

アドバンテージ：hassスクリプトの問題によって引き起こされるフレームの損失と遅延の問題を解決することができます。比較:

結論: Android 4.3 ブラウザと互換性を持たせる必要がない場合は、RAF を使用してスクリプト アニメーションを作成してください

2. 高頻度イベントの最適化

タッチムーブやスクロールなどのイベントにより、複数のレンダリングが発生する可能性があります。このイベントは次の方法で最適化できます:

requestAnimationFrame を使用してフレームの変更を監視し、正しい時間にレンダリングできるようにします

変更に応答する時間間隔を増やし、再描画の数を減らします。

最後に、合成/描画の最適化方法は 1 つだけです:

GPU アクセラレーション

GPU アクセラレーションをトリガーする方法は次のとおりです:

CSS3 トランジション

CSS3 3D 変換

WebGL 3D 描画

ビデオ

…

使用 GPU アクセラレーションの前に比較実験があります:

GPU アクセラレーションは実際に構成/描画時間を大幅に短縮し、ページ速度を大幅に向上させますが、GPU アクセラレーションには独自の欠点があります:

過剰な GPU レイヤーはパフォーマンスのオーバーヘッドをもたらします。主な理由は次のとおりです。 GPU アクセラレーションを使用すると、レンダリング リソースを再利用できるように実際に GPU レイヤーのキャッシュが利用されるため、レイヤーが増えてキャッシュが増加すると、他のパフォーマンスの問題が発生します。

まとめ

この記事では、ページ表示の 4 つの段階における比較的典型的な最適化方法を提案します。最後に、読者に注意していただきたいのですが、最適化は諸刃の剣です。

オンデマンド読み込みは速度を向上させますが、大量の再描画が発生する可能性があります。

タッチの応答は速いですが、多くのシナリオには適していません。

GPU アクセラレーションは効率的ですが、メモリのオーバーヘッドが大きいなどです。全体的なエクスペリエンスはスムーズになりますが、ユーザーの損失を引き起こしやすいです

画像圧縮により帯域幅のコストは削減されますが、視覚効果が低下する可能性があります

このように多くの矛盾があります。ビジネスに基づいて実際の状況に応じて最適化してください。 。