ホーム 経験・テクニック共有 標準記事

標準記事

WordPress速度最適化:HTTPリクエストを減らす方法

サイト速度を最適化する際、テストツールは常にHTTPリクエスト数を減らすように促します。初心者はどこから減らせばよいか分からないため、NaibaがサイトのHTTPリクエスト数を減らす方法を紹介します。Naibaサイト構築ノートのトップページを例にとると、リクエスト数は75個です。HTTPリクエストとは?HTTPプロトコルはWebクライアントが…

2020年2月11日公開 約4分で読めます
WordPress速度优化之如何减少HTTP请求

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

http请求数

Naibaサイト構築ノートのサイトトップページを例にすると、リクエスト数は75個あります。

HTTPリクエストとは何ですか?

HTTPプロトコルは、WebクライアントがWebサーバーからWebページを要求する方法と、サーバーがWebページをクライアントに転送する方法を定義します。HTTPプロトコルはリクエスト/レスポンスモデルを採用しています。クライアントはサーバーにリクエストメッセージを送信し、リクエストメッセージにはリクエストメソッド、URL、プロトコルバージョン、リクエストヘッダー、リクエストデータが含まれます。

次のように理解できます。ブラウザがサーバーにリクエストを送信しなければ、サーバーはファイルをブラウザに転送して表示する方法を知りません。リクエストの数が多いほど、表示にかかる時間が長くなります。

サイトのリクエスト数を確認する方法は?

Chromeを例にすると、ウェブページを開き、右クリックで「検査」(CTRL + SHIFT + I)を選択し、表示されるツールインターフェースの「Network」タブをクリックし、ページを更新すると、関連情報が表示されます。

最も簡単なHTTPリクエスト数を減らす方法

CSSとJSファイルの結合

オンラインで検索すれば、CSSとJSファイルを結合する方法を教える多くの情報が見つかります。各種キャッシュプラグインにも通常この機能が搭載されています。例えばWP Rocket

WP ROCKET合并css文件

注意:下の小さな文字で、すでに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のテクニックで、サイトで使用している複数の小さな画像を1枚の画像にまとめ、CSSコードで呼び出します。

下図のように、1枚の画像で14個のアイコンに使用でき、HTTPリクエストを13回削減できます。

css图像精灵

关于图像精灵的使用方法你可以参考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リクエストを減らすことによるサイト速度の最適化方法

5/5 - (1票)
前の記事 サイトにフローティング目次ボタンを追加:Fixed TOC 同じタイムラインの近くのコンテンツを読み続ける。 次の記事 Google Search Consoleを使用してサイトのReview Snippet評価データを監視する 次の関連チュートリアルや経験を表示する。

AIサイト構築アシスタント

🤖
こんにちは!私はNaibaサイト構築ノートのAIアシスタントです。何かお手伝いできることはありますか?
クイックコンサルティング: