サイトの速度最適化を行う際、一部のテストツールは常にHTTPリクエスト数を減らすよう促します。初心者はどの側面からリクエストを減らせばよいかわからないため、ここではNaibaがサイトのHTTPリクエスト数を減らす方法を紹介します。

Naibaサイト構築ノートのサイトトップページを例にすると、リクエスト数は75個あります。
HTTPリクエストとは何ですか?HTTPプロトコルは、WebクライアントがWebサーバーからWebページをリクエストする方法、およびサーバーがWebページをクライアントに送信する方法を定義します。 HTTPプロトコルはリクエスト/レスポンスモデルを採用しています。 クライアントはサーバーにリクエストメッセージを送信し、リクエストメッセージにはリクエストのメソッド、URL、プロトコルバージョン、リクエストヘッダー、およびリクエストデータが含まれます。 簡単に言うと、ブラウザがサーバーにリクエストを送信しなければ、サーバーはファイルをブラウザに送信して表示することを知りません。リクエストの数が多いほど、当然表示されるまでの時間が長くなります。
サイトのリクエスト数を確認する方法は?Chromeを例にすると、ウェブページを開き、右クリックで「検査」(CTRL + SHIFT + I)を選択し、表示されるツールインターフェースの「Network」タブをクリックし、ページを更新すると、関連情報が表示されます。
最も簡単なHTTPリクエスト数を減らす方法
CSSとJSファイルの結合オンラインで検索すれば、CSSとJSファイルを結合する方法を教える多くの情報が見つかります。各種キャッシュプラグインにも通常この機能が搭載されています。例えば
WP Rocket 
注意:下部の小さな文字で、HTTP/2を使用しているサイトには推奨されないと記載されています。 これがNaibaサイト構築ノートでCSSとJSの圧縮機能を有効にしていない理由です。 HTTP 2.0とHTTP 1.0の違いについては、
知乎の記事を参照してください。 CSSとJSの結合機能を有効にした後、
gtmetrixでテストすると、スコアが明らかに向上することがわかります。ただし、サイトサーバーがすでにHTTP 2.0を使用している場合、高いスコアを得るためにわざわざファイルを結合することは賢明ではありません。
手動でHTTPリクエスト数を減らす方法
上記で述べたように、HTTP 2.0のサイトはスコアのためにCSSとJSファイルを結合する必要はありませんが、HTTPリクエスト数を減らす必要がないわけではありません。サイトの速度をさらに向上させるためには、手動でいくつかのHTTPリクエストを削減することができます。(もちろん、サイト自体がすでに十分速い場合、この最適化操作は完全に強迫観念によるものです)
1. 画像スプライト(Image Sprites)の使用
这是一个css技巧,就是把你网站上使用到的多张小图放到一张图片里面,然后通过css代码调用。 像下图这样,一张图片可以供14个图标使用,就减少了13次http请求:

关于图像精灵的使用方法你可以参考
w3school的文章。
2. 不要な画像の削除
我们可以删除网页上一些不必要的图片,例如网站底部的logo
3. 画像サイズの縮小
虽然减小图片大小并不会减少http请求,但是会加快图片加载速度,从而提高网站打开速度。
4. 外部画像の最適化
外部图像也是影响网站速度的一个因素,同样会计算在你网站的http请求数里面。 对于网站评论比较多的网站,
禁用Gravatar头像非常に良い選択肢です。
5. 不要なファイルの削除
一部のプラグインもCSSやJSファイルを生成します。もしプラグインが必須でない場合は、プラグインを削除するか、プラグインのコードをサイトのテーマに統合することを検討できます。
6. 遅延読み込み
遅延読み込みとは、コンテンツがブラウザウィンドウに表示された時点で初めて読み込むことで、ブラウザウィンドウで見えない部分のリソースは読み込みません。WP Rocketキャッシュプラグインにはこの機能が標準で搭載されています。WP Rocketを使用していない場合は、他のプラグインを別途インストールすることもできます。参考にしてください:
Lightning Blogのこの記事。
7. キャッシュ時間の追加
一部のキャッシュプラグインは、サイトの静的リソースに対してブラウザキャッシュの有効期限を設定します。ユーザーが一度サイトを訪問すると、次回訪問時にはブラウザにキャッシュ済みの静的リソースをサーバーから再度読み込む必要がなくなり、高速化の効果があります。
8. 無関係なリソースの無視
Asset Cleanupこのプラグインはこの機能を実現するのに役立ちます。 無関係なリソースとは何ですか? 例えば、コンタクトフォームは通常コンタクトページでのみ使用されますが、そのjsファイルはサイト全体で読み込まれます。Asset Cleanupを使用して、コンタクトページでのみ読み込まれるように設定することで、リクエスト数を減らすことができます。
9. CSSファイルの結合
非常に小さなcssファイルは、1つのcssにまとめることができます。これによりリクエスト数が減ります(HTTP2.0の場合は必要ありません)。
10. 記事内画像数の制御
もし1つの記事に数十枚の画像を挿入している場合、リクエスト数を減らすことはできません。 サイト速度の向上はユーザーエクスペリエンスに有利であり、SEO最適化効果にも役立ちます。したがって、サイトの速度が非常に遅い場合は、
サイト速度最適化、以上が
HTTPリクエストを減らすことによるサイト速度の最適化方法。
コメントは終了しました
この記事のコメント機能は終了しています。ご質問がある場合は、他の方法でお問い合わせください。