前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォーマンスを向上させる側面について説明しました。さらに、画像とクッキーも当社のウェブサイトに欠かせない要素であり、モバイルデバイスの普及に伴い、モバイルアプリケーションの最適化も非常に重要です。これには主に以下が含まれます: クッキー:
写真:
モバイルアプリ:
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 マルチテーブル結合クエリの実行の詳細について簡単に説明します。
目次パーティションテーブルとはパーティションテーブルの適用シナリオパーティションテーブルの制限パーテ...
MySQL 8.0.22のダウンロード、インストール、設定方法、参考までに具体的な内容は次のとおりで...
jQuery フォーム検証の例 / ユーザー名、パスワード、住所、電子メールの検証を含む下記の通り ...
学ぶ内容1. ソフトウェアのインストールとサーバーの設定。 2. (オプションですが、強くお勧めしま...
この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...
目次1. MySQLの主キーとテーブルフィールドに関するコメント1. 主キーと自動増分2. テーブル...
1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...
目次1. useStateフック2. useRefフック3. useRef と useState 4...
目次まとめ基本的な例モチベーションデザインの詳細コンパイルの詳細採用戦略練習するヒント適切なプロパテ...
この記事では、フォーム検証を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...
1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...
1. 公式ウェブサイトから Linux バージョンをダウンロードします: https://dev.m...
重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...
導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...
Superset は、エレガントなインターフェースとデータ テーブルに基づく動的なデータ生成を主な機...