ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化

前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォーマンスを向上させる側面について説明しました。さらに、画像とクッキーも当社のウェブサイトに欠かせない要素であり、モバイルデバイスの普及に伴い、モバイルアプリケーションの最適化も非常に重要です。これには主に以下が含まれます:
クッキー：

クッキーのサイズを小さくし、ページコンテンツにはクッキーフリーのドメインを使用する
写真：

画像を最適化する CSS Spirite を最適化する HTML で画像を拡大縮小しない favicon.ico を小さくしてキャッシュ可能に保つ
モバイルアプリ:

個々のコンテンツを25K未満に保ち、コンポーネントを複合テキストにパッケージ化します。
27. クッキーのサイズを小さくする
HTTP クッキーは、認証やパーソナライズされた ID など、さまざまな目的に使用できます。クッキー内の情報は、HTTP ファイルヘッダーを通じて Web サーバーとブラウザー間で通信されます。したがって、ユーザーの応答時間を短縮するために、Cookie をできるだけ小さく保つことが重要です。
詳細については、Tenni Theurer と Patty Chi の記事「When the Cookie Crumbles」を参照してください。主な研究内容は、不要なクッキーを削除すること、クッキーのサイズをできるだけ小さくしてユーザーの応答への影響を減らすこと、サブドメインに影響を与えないように適応レベルでドメインにクッキーを設定すること、合理的な有効期限を設定することです。期限を早めに設定し、Cookie を早めに消去しないようにすると、ユーザーの応答時間が改善されます。
28.ページコンテンツにはCookieフリーのドメインを使用する
ブラウザが静的画像を要求し、その要求で Cookie を送信すると、サーバーはその Cookie を一切使用しません。つまり、それらは何らかのマイナス要因によって作成されたネットワーク送信にすぎません。したがって、静的コンテンツのリクエストが Cookie なしのリクエストであることを確認する必要があります。サブドメインを作成し、それを使用してすべての静的コンテンツを保存します。
ドメインが www.example.org の場合、static.example.org で静的コンテンツをホストできます。ただし、www.example.org ではなくトップレベルドメイン example.org に Cookie を設定すると、static.example.org へのすべてのリクエストに Cookie が含まれます。この場合、静的コンテンツを保存するための新しいドメイン名を購入し、このドメイン名を Cookie なしに保つことができます。 Yahoo! は ymig.com、YouTube は ytimg.com、Amazon は images-anazon.com などを使用します。
静的コンテンツに Cookie のないドメインを使用するもう 1 つの利点は、一部のプロキシ (サーバー) が Cookie コンテンツ要求のキャッシュを拒否する可能性があることです。関連する提案としては、ホームページとして example.org を使用するか www.example.org を使用するかを決定する場合は、Cookie の影響を考慮する必要があるということです。 www を省略すると、Cookie を *.example.org に設定するしか選択肢がなくなるため、パフォーマンス上の理由から、www を含むサブドメインを使用して、そのサブドメインに Cookie を設定することをお勧めします。
29. 画像を最適化する
デザイナーがページのデザインを終えたら、急いで Web サーバーにアップロードしないでください。ここで行うべきことがいくつかあります。GIF 画像内の画像色の数がパレット仕様と一致しているかどうかを確認できます。これは、imagemagick で次のコマンドラインを使用して簡単に確認できます。
識別 -詳細画像.gif
画像で 4 色のみが使用されており、パレットに 256 色のカラースロットが表示されている場合は、この画像にはまだ圧縮の余地があります。 GIF を PNG に変換して、スペースが節約されるかどうかを確認してください。ほとんどの場合、圧縮可能です。ブラウザのサポートが限られているため、デザイナーは PNG 画像の使用を躊躇することが多かったのですが、それはもう過去の話です。現在唯一の問題は、トゥルーカラー PNG 形式のアルファチャネルの半透明性の問題ですが、繰り返しになりますが、GIF はトゥルーカラー形式ではなく、半透明性をサポートしていません。つまり、GIF でできることはすべて、PNG (PNG8) でもできます (アニメーションを除く)。次の簡単なコマンドで、GIF を PNG に安全に変換できます。
image.gif を image.png に変換
「私たちが言いたいのは、PNG にチャンスを与えてください！」すべての PNG 画像に対して pngcrush (または別の PNG 最適化ツール) を実行します。例えば：
pngcrush image.png -rem alla -reduce -brute result.pngすべての JPEG 画像に対して jpegtran を実行します。このツールは、画像のギザギザのエッジに対してロスレス操作を実行できます。また、画像内の注釈やその他の不要な情報（EXIF 情報など）を最適化および削除するためにも使用できます。
jpegtran -コピーなし -最適化 -完璧 src.jpg dest.jpg
30. CSS を最適化します。Spiriteで画像を水平に配置します。垂直に配置すると、ファイルサイズがわずかに大きくなります。Spirite で近い色をグループ化すると、色の数を減らすことができます。理想的には、PNG8 形式に適合させるには 256 色未満にする必要があります。動きをスムーズにするために、Spirite で画像の中央に大きな隙間を残さないでください。これにより、ファイルサイズはそれほど増加しませんが、ユーザーエージェントが画像をピクセルマップに解凍するために必要なメモリが少なくなります。 100 x 100 の画像には 10,000 個のピクセルがあり、1000 x 1000 の画像には 100 万個のピクセルがあります。
31. HTMLで画像を拡大縮小しない

HTML で幅と高さを設定するためだけに、必要以上に大きい画像を使用しないでください。必要な場合:
<img width="100" height="100" src="mycat.jpg" alt="私の猫" />
そうすると、画像 (mycat.jpg) は 500 x 500 ピクセルの画像を縮小するのではなく、100 x 100 ピクセルになります。
32. favicon.ico は小さく、キャッシュ可能なものにする
favicon.ico は、サーバーのルートディレクトリにある画像ファイルです。役に立つかどうかは気にしなくてもブラウザがそれを要求するので、404 Not Found 応答を返さないことが最善です。同じサーバー上にあるため、Cookie は要求されるたびに送信されます。この画像ファイルはダウンロード順序にも影響します。たとえば、IE では、onload で追加ファイルを要求すると、これらの追加コンテンツが読み込まれる前にファビコンがダウンロードされます。
したがって、favicon.ico によってもたらされるデメリットを軽減するには、次の操作を行う必要があります。ファイルをできるだけ小さくし、できれば 1K 未満にします。適切なタイミングで Expires ファイルヘッダーを設定します (つまり、favicon.ico を再度変更する予定がないときに設定してください。新しいファイルを置き換えるときに名前を変更できないためです)。 Expires ヘッダーを数か月先に設定しても問題ありません。現在の favicon.ico が最後に編集された日時を確認するとわかります。
Imagemagick を使用すると、小さなファビコンを作成できます。
33. コンテンツ1つあたりのサイズは25K未満に抑える
この制限は主に、iPhone が 25K を超えるファイルをキャッシュできないために発生します。これは解凍されたサイズを指すことに注意してください。単純な GIF 圧縮では要件を満たせない可能性があるため、ファイルを合理化することが非常に重要です。
詳細については、Wayne Shea と Tenni Theurer の論文「パフォーマンスリサーチ、パート 5: iPhone のキャッシュ可能性 - 維持」を参照してください。
34. コンポーネントを複合テキストにまとめる
ページコンテンツを複合テキストにパッケージ化することは、複数の添付ファイルを含む電子メールのようなものです。これにより、1 つの HTTP 要求で複数のコンポーネントを取得できます (HTTP 要求は非常に贅沢なものであることに注意してください)。このルールを使用する場合は、まずユーザーエージェントがそれをサポートしていることを確認してください (iPhone はサポートしていません)。

<<: Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。

>>: vue-router 4 の使用例の詳しい説明