Web サイトのフロントエンドおよびバックエンドのパフォーマンスの最適化 (ネット抜粋)-htmlチュートリアル-php.cn

Web サイトのフロントエンドおよびバックエンドのパフォーマンスの最適化 (ネット抜粋)

WBOY

リリース： 2016-09-01 00:01:03

オリジナル

1089 人が閲覧しました

1. HTTP リクエストの数を削減します
すべてのスクリプトを 1 つのスクリプトファイルに配置するか、すべてのスタイルシートを 1 つのスタイルシートファイルに配置することで、HTTP リクエストの数を削減します。
CSS スプライトは、画像リクエストを減らすための推奨ソリューションです。すべての背景画像を 1 つの画像に結合し、CSS の背景画像プロパティと背景位置プロパティを使用して適切な画像領域を制御します。
インライン画像は data: URL スキームを使用して画像データをページに埋め込みますが、これにより HTML ドキュメントのサイズが増加します。
2. コンテンツ配信ネットワークを使用する
コンテンツ配信ネットワーク (CDN) は、さまざまな地域に分散されたサーバーの集合であり、ユーザーにより効果的に情報を送信できます。ドメインの距離の測定に基づいて、ユーザーのデータの送信先サーバーを選択します。たとえば、ユーザーに到達するまでのホップが最も少ないサーバー、または応答速度が最も速いサーバーが選択されます。
3. ヘッダーに有効期限またはキャッシュ制御を追加します
静的コンポーネントの場合: ヘッダーのキャッシュ期間を「期限切れにならない」ように遠い将来に設定します。
動的コンポーネントの場合: 適切な Cache-Control ヘッダーを使用して、ブラウザーが特定のリクエストを実行できるようにします。
4. Gzip 圧縮コンポーネント
HTTP リクエストのヘッダーの Accept-Encoding で指定された圧縮形式:
ν Accept-Encoding: gzip, deflate
ν Content-Encoding: gzip
5. スタイルシートを置きます。前面
スタイルシートをドキュメントの先頭に移動すると、ページの読み込みが速くなります。スタイルシートを先頭に配置すると、ページを徐々にレンダリングできるためです。
6. スクリプトを最後に配置します
スクリプトは同時ダウンロードをブロックする場合があります。 HTTP/1.1 仕様では、ブラウザがドメイン名ごとに 2 つの同時ダウンロードのみを実行することを推奨しています。
遅延読み込みスクリプトを設定するか、ページの下部に配置します
7. CSS 式を使用しないでください
CSS 式は、CSS プロパティを動的に設定する強力な (そして危険な) 方法です。

CSS 式の問題は、ほとんどの人が予想するよりも頻繁に実行されることです。式は、ページの表示時やサイズ変更時だけでなく、ページのスクロール時や、ユーザーがページ上でマウスを移動したときにも実行されます。 CSS 式にカウンターを追加すると、CSS がいつどのように実行されるかを追跡できます。ページ上でマウスを動かすと、簡単に 10,000 回以上の実行が生成される可能性があります。
8. 外部 JavaScript と CSS の使用
実際のアプリケーションで外部ファイルを使用すると、ブラウザーが JavaScript と CSS ファイルをキャッシュするため、より高速なページが生成されることがよくあります。外部ファイルに配置したJavaScriptやCSSをブラウザがキャッシュすると、HTTPリクエストの数を増やす必要がなく、HTML文書のサイズが小さくなります。
9. DNS クエリを削減します
DNS は通常、特定のドメイン名の IP アドレスを検索するのに 20 ～ 120 ミリ秒かかります。 DNS ルックアップが完了するまで、ブラウザはターゲットドメイン名から何もダウンロードしません。

10. JavaScript と CSS を縮小する

縮小とは、コードから不要な文字を削除し、ファイルサイズを削減し、読み込み速度を向上させることを指します。

コードを減らす場合は、すべてのコメントと不要な空白 (スペース、改行、タブ) を削除する必要があります。

js または css ファイルのサイズを削減し、応答性の高いパフォーマンスを向上させます。

コード難読化は、ソースコードに使用できるもう 1 つの最適化ソリューションです。

ページに埋め込まれている

著者別の最新記事