ウェブサイトのパフォーマンス最適化ガイドラインについて

ここ数日、Steve Souders の『ハイパフォーマンス Web サイト構築ガイド』を読みました。この本は少し古いかもしれませんが、この薄い冊子で提案されている Web サイトのパフォーマンス最適化のガイドラインは今でも非常に価値があります。これらのルールにはすべて共通点が 1 つあります。それは、非常に少ない作業で明らかなパフォーマンスの向上が達成でき、非常にコスト効率が高いということです。さっそく、この本のパフォーマンス最適化ルールをいくつか要約してみましょう。

最初に説明する必要があるのは、本に書かれているパフォーマンスの黄金律です。応答時間の 10% ～ 20% のみが HTML ドキュメントのダウンロードに費やされ、残りの 80% ～ 90% が費やされます。時間の % がすべてのコンポーネントのダウンロード ページに費やされます。
これは、以下のパフォーマンスルールの起源の核心でもあります。

ルール1: HTTPリクエストを減らす。この本のルールの順序は、その重要性に応じてランク付けされており、HTTP リクエストの削減がその重要性を示しています。黄金律によれば、コンポーネントの数を減らし、それによって HTTP リクエストを減らすことがパフォーマンスを最適化する最も効果的な方法です。

CSS スプライト。フロントエンド担当者は、画像を大きな画像に統合し、background-position を使用して画像を配置する方法に精通している必要があります。

データ:URL。画像をインラインにすると、Webpack 内の画像が 8kb 未満の場合、base64 data:URL に変換されることに注意してください。

スクリプトとCSSをマージします。

ルール2: CDNを使用する。言うまでもなく、このルールにより、コンテンツがエンド ユーザーの近くに配信され、リクエスト時間が短縮されます。

ルール3: Expiresヘッダーを追加します。キャッシュを有効に活用し、長期間変更されないコンテンツ コンポーネントに対して有効期間の長い Expires ヘッダーを設定します。

ルール 4: コンポーネントを圧縮します。 gzip などのコンテンツ エンコーディングを使用してドキュメントやコンポーネントを圧縮すると、通常、対応するデータ量を約 70% 削減できます。

ルール5: スタイルシートを一番上に置きます。プロジェクトを開いたときにページが徐々に表示されるため、ユーザーはページが速くなったと感じ、待機中にも良いフィードバックを得ることができます。 CSSを下部に配置すると画面が白くなる場合があります。

ルール6: スクリプトは一番下に置きます。ページがスクリプトをダウンロードすると、ブラウザの再描画やリフローを防ぐために、他のコンテンツのダウンロードやレンダリングが防止されます。したがって、スクリプトをページの下部に配置しても、ページ コンテンツのレンダリングが妨げられることはなく、ページの一部の視覚コンポーネントはブロックされることなくできるだけ早くダウンロードできます。

ルール7: CSS式の使用を避ける。 CSS 式が頻繁に評価されるため、パフォーマンスが低下します。

ルール8: 外部JavaScriptとCSSを使用する。純粋に言うと、インライン化は HTTP リクエストを減らすというルール 1 を満たすので高速になります。ただし、この問題では、外部ファイルがキャッシュされる可能性が高く、パフォーマンスが向上します。

ルール9: DNSルックアップを減らす。永続的な接続などの DNS キャッシュを有効に活用します。

ルール10: JavaScriptを合理化する。一般的な .min.js の場合と同様に、不要な文字スペースを削除します。

ルール11: リダイレクトを避ける。 3xx 応答ステータス コードは、リダイレクトされた応答を表します。 URL の末尾にスラッシュがないことによるリダイレクトには特別な注意が必要です。この間違いによってパフォーマンスが損なわれないようにしてください。

ルール12: 重複したスクリプトを削除する。

ルール13：ETagを設定する。これについて言えば、条件付きリクエストの If-Modified-Since と If-None-Match はどちらもキャッシュの再検証に使用されると言わざるを得ません。 ETag の問題は、サーバーが ETag を構築するときに、2 つのファイルがまったく同じであっても、異なるサーバー上にある場合は異なる ETag が存在することになり、HTTP ダウンロード リクエストの数が増加し、パフォーマンスが大幅に低下することです。バックグラウンドでサーバー クラスターを備えた Web サイトの数。

ルール 14: Ajax をキャッシュ可能にする。 Ajax は非同期ですが、応答を長時間待つことはできません。最適化のガイドラインについては、上記のパフォーマンス ガイドラインを参照してください。その中でも、引き続きキャッシュを有効に活用することに重点を置いています。

この本の最後では、これらのルールを使用して米国のトップ 10 の Web サイトを分析し、これらのルールを効果的に使用することでパフォーマンスを向上させる余地がたくさんあることを発見しました。また、自分のインターンシップ プロジェクトも調べました。最適化できる箇所がたくさんあることがわかりました。製品のユーザーがより良いエクスペリエンスを得ることができるように、将来の開発中にこれらのガイドラインを念頭に置く必要があります。