WordPress でキーリクエストをプリロードする方法

公開: 2023-06-08

Web フォント、CSS、JavaScript を使用すると、Web サイトをよりユニークでインタラクティブにすることができます。 ただし、これらの種類のファイルが読み込まれるのを待つのは、サイトの訪問者にとってイライラする可能性があります。

ここで、WordPress でキーリクエストをプリロードすると便利です。 リクエスト チェーンの早い段階でこれらのファイル タイプをダウンロードするようにブラウザーに指示することで、ブラウザーがコンテンツをレンダリングする準備ができたときにそれらのファイルをダウンロードできるようになります。 これにより、知覚されるページの読み込み時間が短縮され、全体的な Web エクスペリエンスが向上します。

今日のガイドでは、キーリクエストのプリロードの意味と、Web サイトの潜在的なパフォーマンス上の利点について説明します。 次に、Google Fonts、Font Awesome、CSS、JavaScript を使用して WordPress サイトでこれを行う方法を説明します。

WordPress における「プリロードキーリクエスト」とは何を意味しますか?

誰かがあなたの Web サイトにアクセスすると、ブラウザは複数の HTTP リクエストをサイトのサーバーに送信し、コンテンツを構成するファイルを要求します。 サーバーがこれらのリクエストに応答してブラウザに情報を送信し始めるまでには、一定の時間がかかります。これは、Time to First Byte (TTFB) と呼ばれます。

次に、ブラウザはサイト ファイルからコンテンツ (PHP、JavaScript、CSS) のダウンロードを開始し、それをレンダリングしてフロントエンドに表示可能なページ (HTML) を表示します。 このプロセスが完了すると、訪問者は完全に読み込まれた Web ページを表示できるようになります。

ブラウザは「リクエスト チェーン」を使用して、コンテンツを要求し、シーケンス内でレンダリングします。 つまり、大きなリクエストの中に小さなリクエストの複数のステップがあり、最終的に訪問者がサイトのコンテンツを表示できるようになります。

基本的に、「プリロード」とは、ロード プロセスが終了するまで待つのではなく、最初に重要なファイルをダウンロードするようにユーザーのブラウザに指示することを意味します。 これらは通常、フォント (特に Web フォント)、CSS、JavaScript、および場合によっては画像です。

通常、ブラウザは読み込みプロセスの後半までこれらのファイルを要求しないため、キー リクエストは固有です。 したがって、ブラウザがその時点に到達し、ファイルを要求する必要があることを認識するときに遅延が発生します。 これらのファイルを最初にロードするようにブラウザに指示すると、レンダリングする必要があるときにすぐに使用できるようになります。

キーリクエストをプリロードする利点は何ですか?

主要なリクエストをプリロードする主な利点は、サイトの知覚パフォーマンスが向上することです。 これは、ユーザーのブラウザがコンテンツをより速く表示できるようになり、訪問者はサイトが速くなったように感じることを意味します。 しかし、あなたのサイトは実際には、そのように見せるために重要なコンテンツをプリロードしているだけです。

さらに、リクエストのプリロードは、Core Web Vitals スコアにとって不可欠です。 これらの Google 指標は、サイトの読み込みパフォーマンス、インタラクティブ性、視覚的な安定性を測定し、ウェブサイト全体の使いやすさを示すスコアを提供します。

これらは 3 つの主要な Web バイタルです。

  • Largest Contentful Paint (LCP):ページ上の最大の要素が読み込まれるまでにかかる時間。
  • 初回入力遅延 (FID):ブラウザーがユーザーのコンテンツとの対話に応答するまでにかかる時間。
  • Cumulative Layout Shift (CLS) :ページの読み込み中に要素がどれだけ移動するか。

特に、キーリクエストのプリロードは、LCP スコアに大きな影響を与える可能性があります。 画像、フォント、その他の大きなファイルをプリロードすると、それらのレンダリングにかかる​​時間を短縮できます。

さらに、プリロードは First Contentful Paint (FCP) スコアに影響を与える可能性があります。 このメトリクスは、ページ上の最初の HTML 要素が表示されるまでにかかる時間を測定します。 その要素をプリロードできれば、ブラウザーはコンテンツの最初の部分をより迅速に表示できるようになります。

さらに、Google などの検索エンジンは、読み込みが速く、インタラクティブなコンテンツを好みます。 したがって、より良いユーザー エクスペリエンスを提供するだけでなく、これらのパフォーマンス指標を改善することで、Web サイトの検索エンジン最適化 (SEO) を向上させることができます。

基本的に、パフォーマンスの向上により、サイトのページのランキングが上昇し、より多くのユーザーにコンテンツが表示されるようになります。 さらに、キーリクエストのプリロードは比較的簡単です。 この記事の後半では、その具体的な方法を説明します。

キーリクエストのプリロードにデメリットはありますか?

リクエストをプリロードすることは、パフォーマンスの観点からは素晴らしいアイデアのように思えるかもしれません。 そうは言っても、あまりにも多くの要素をプリロードしようとすると、逆効果になる可能性があります。

ブラウザが一度に処理できるリクエストの数は限られています。 したがって、複数の要素をプリロードするように指示すると、サイトのページの読み込み時間に影響を与える「ボトルネック」が発生する可能性があります。

したがって、最大の効果を得るためにどの要素をプリロードする必要があるかを慎重に選択する価値があります。 ほとんどの場合、これらは最も重いファイルになる傾向があるため、Web フォント、CSS、JavaScript になります。

サイトがキーリクエストをプリロードしているかどうかを確認する方法

いくつかの異なるツールを使用すると、サイトがリクエストをプリロードしているかどうかを特定し、この最適化手法から恩恵を受ける可能性のある要素を提案できます。 たとえば、PageSpeed Insights は、Web サイトのパフォーマンスの問題を特定するための最も一般的なオプションの 1 つです。

この無料ツールを使用するには、サイトの URL を入力し、 「分析」をクリックするだけです。 これにより、詳細なパフォーマンス レポートが生成されます。

Google PageSpeed からのコア ウェブ バイタル レポート

下にスクロールして、パフォーマンスの機会、診断、および合格した監査を確認します。 これらのセクションのいずれかで、プリロード キー リクエストの提案を見つけることができるはずです。

Google PageSpeed からの改善提案

サイトと PageSpeed Insights の間を行き来したくない場合は、Google Lighthouse Chrome 拡張機能のインストールを検討してください。 これにより、ブラウザ内からレポートを生成し、ページのパフォーマンス メトリックを表示できるようになります。

Google Lighthouse からのパフォーマンスに関する提案

同様に、GTMetrix はあらゆるサイトの詳細なパフォーマンス レポートを生成できます。 これにより、複数の場所からページを分析し、そのパフォーマンスを経時的に追跡できます。

GTMetrix の[構造]タブでは、キー リクエストのプリロードがサイトのパフォーマンスに役立つかどうかを確認できます。

GTMetrix からのパフォーマンス メトリクス

WordPress でキーリクエストをプリロードする方法

カスタム コードの追加など、WordPress サイトに大幅な変更を加える前に、完全なバックアップを作成することをお勧めします。 この安全対策は、何か間違いを犯した場合でも、Web サイトの機能バージョンを手元に用意しておくことを意味します。

ここで Jetpack VaultPress Backup が役に立ちます。 この使いやすいプラグインは、ファイル、データベース テーブル、WooCommerce 製品情報を含むすべてのデータの包括的なバックアップを自動的に作成します。 これらのバックアップはリアルタイムで保存され、クラウドに安全に保管されます。 外出中やサイトにまったくアクセスできない場合でも、数回クリックするだけで復元できます。

Jetpack VaultPress バックアップのホームページのデザイン

1. フォント

場合によっては、CSS ファイルや JavaScript ファイルなど、Web サイト上の他のファイル内にフォントが埋め込まれることがあります。 残念ながら、これによりページのレンダリング プロセスが遅くなる可能性があります。

WordPress でフォントを使用してリクエストをプリロードするには、次のコードをコピーしてページの <head> セクションに貼り付けます。

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

「Font-Name」をフォントの名前に置き換えることを忘れないでください。 さらに、フォントがサードパーティのソースからのものである場合は、「crossorigin」を含めることが不可欠です。これは、外部サーバーからファイルをロードする必要があることをブラウザに指示するためです。

2. Google フォント

Google Fonts には、約 1500 のフォント ファミリのオープンソース ライブラリが含まれています。 サイトで使用するカスタム Web フォントを探している場合は、おそらくそこで見つかるでしょう。

Google Fontsライブラリ内のフォント

Google フォントを使用すると、サイトに独自のデザインをもたらすことができますが、ブラウザはコンテンツを表示するときにフォント ファイルをダウンロードする必要もあります。 フォントによっては、これによりページの読み込み時間が長くなる可能性があります。

Google Fontsをプリロードするときは、最初にそれらを「事前接続」することもお勧めします。 このステップでは、リソースを取得するためにサードパーティのサイト (Google Fonts など) に接続する必要があることをブラウザーに事前に伝えます。

さらに、プリロード コードを追加した後、そのスタイルシートへのリンクを含める価値があります。 そうすることで、ユーザーのブラウザが問題のフォントをプリロードできない場合でも、フォントを表示できます。

次のコードをページの <head> セクションに追加するだけです。

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

コード内で、「$fontURL」を Google フォントへのリンクに置き換える必要があります。 たとえば、次のようになります。

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

次に、編集内容を必ず保存してください。

3.素晴らしいフォント

Font Awesome は、カスタム アイコンとフォントの優れたリソースであり、ライブラリ内に無料オプションとプレミアム オプションの両方があります。 これらのアイコンの一部を使用して、メニュー、ヘッダー、フッター、およびコンテンツ領域内のデザインを強化することができます。

Google Fonts と同様に、Font Awesome アイコンをプリロードすると、ページの読み込み時間を短縮することができます。 このコードをページの <head> セクションに追加するだけです。

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

Web サイトで使用しているフォントまたはアイコンのファイル パスを交換する必要があります。 次に、変更を保存します。

4.CSS

カスケード スタイル シート (CSS) は、HTML と連携して Web ページのスタイルとプレゼンテーションを決定するデザイン言語です。 カスタム CSS を使用すると、さまざまな要素の外観をすばやく変更できます。

Web サイト上のスタイル設定された各 HTML ページには、すべての CSS を含む対応するスタイルシートがあります。 ブラウザーは Web ページをレンダリングするときにこのファイルをロードする必要があるため、このリソースをプリロードする必要があることをブラウザーに指示する価値があります。

幸いなことに、CSS をプリロードする簡単な方法があります。 このコードをページの <head> セクションに追加するだけです。

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

スタイルシートの名前は必ず「styles.css」に置き換えてください。 さらに、このコードは Google Chrome で動作しますが、すべてのブラウザでサポートされているわけではないことに注意してください。

5. JavaScript

JavaScript は、WordPress で使用される一般的なスクリプト言語の 1 つです。 アニメーション、画像のカルーセルの移動、フィードの自動更新などの動的なコンテンツを作成できます。

JavaScript のレンダリングはファイルが比較的重いため、通常はより複雑になり、コンテンツを表示するのに長いプロセスが必要になります。 そのため、ブラウザに重い JavaScript をプリロードするように指示すると、ページの読み込み時間を短縮することができます。

CSS と同様に、次の単純なコード行をページの <head> セクションに追加するだけです。

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

前と同様に、JavaScript ファイルの名前を「ui.js」に置き換えて、変更を保存します。

ボーナス: Core Web Vitals を改善するために無料のプラグインをインストールします

リクエストのプリロードは、WordPress サイトの Core Web Vitals スコアを向上させるために使用できるテクニックの 1 つにすぎません。

より包括的な (そして無料の) ソリューションをお探しの場合は、Jetpack Boost のインストールを検討してください。 このツールは、WordPress.com と同じ会社である Automattic によって開発されました。

Jetpack VaultPress バックアップ ホームページ

このユーザーフレンドリーなプラグインは Web サイト全体をスキャンし、デスクトップとモバイル デバイスでスコアを提供します。 さらに、Jetpack Boost は 3 つの Core Web Vitals に役立つだけではありません。 その最適化方法により、インタラクティブまでの時間 (TTI) や合計ブロッキング時間 (TBT) などの他の指標を改善できます。

シンプルな切り替えシステムを使用して、CSS の読み込みを最適化し、必須ではない JavaScript を延期し、画像を遅延読み込みすることができます。 プラグインのプレミアム バージョンでは、Web サイトに変更を加えるたびに重要な CSS が自動的に生成されます。

あるいは、Jetpack Complete を使用すると、WordPress サイトをまったく新しいレベルに引き上げることができます。 このプランには、Jetpack の画像コンテンツ配信ネットワーク (CDN) へのアクセスなど、パフォーマンスのための複数のツールが含まれており、帯域幅を節約し、ページの読み込み時間を短縮できます。 さらに、高度な WordPress セキュリティおよび拡張ツールも利用できます。

キーのプリロード要求に関するよくある質問

この時点で、WordPress で主要なリクエストをプリロードする方法を十分に理解しているはずです。 それでも、念のため、よくある質問についていくつか説明していきます。

リクエストをプリロードするとユーザー エクスペリエンスが向上しますか?

リクエストをプリロードすると、サイトの認識される読み込み時間が短縮され、ユーザー エクスペリエンスが向上します。 訪問者はコンテンツが表示されるまでそれほど長く待つ必要がないため、イライラして Web サイトから離れて別の Web サイトに移動する可能性が低くなります。

リクエストをプリロードすると Core Web Vitals が向上しますか?

WordPress で主要なリクエストをプリロードすると、特に Largest Contentful Paint (LCP) に関して Core Web Vitals スコアを向上させることができます。 実際、どの要素をプリロードするかを決定するときは、「最大の」コンテンツまたは「メイン」コンテンツを含めることが賢明です。これは、最もメリットが得られる可能性が高いためです。

主要なリクエストのプリロードと重要なアセットのプリロード

重要なリクエストのプリロードは重要なアセットのプリロードと同じ意味であることに注意してください。 どちらの用語も、ページのコンテンツをより迅速にレンダリングするために、ブラウザーに事前に特定のリソースをロードするように指示することを指します。

プリロード、プリコネクト、プリフェッチ

プリロード、プリ接続、プリフェッチは似た概念のように思えるかもしれませんが、実際には少し異なる意味を持っています。 これらはすべてブラウザにコンテンツをロードする順序を指示するタグですが、それぞれ異なる機能を果たします。

まず、プリロードには、ユーザーのブラウザ内でページをレンダリングするために必要なコンテンツのロードが含まれます。 これは、数秒以内にリソースを準備できる優先度の高いタグです。

対照的に、プリフェッチは、ロードする必要がある後続の要素に関係します。 ブラウザは事前にリソースを検索し、キャッシュに保存します。 これは優先度が非常に低いタグなので、緊急のリソースには使用しないでください。

最後に、事前接続は、ブラウザーに特定のドメインに接続するように指示する場合に使用されます。 サイトが特定のサードパーティ サイト (Google Fonts など) のリソースを使用している場合、事前接続により、読み込みプロセスのある時点でそのドメインに接続する必要があることがブラウザーに通知されます。

サイトのパフォーマンスを向上させるために他に何ができるでしょうか?

次のようなさまざまなタスクが WordPress サイトのパフォーマンスの向上に役立ちます。

  • CDN を使用して世界中の訪問者にコンテンツを提供する
  • 未使用の CSS の延期 (または削除)
  • レンダリングをブロックするリソースの排除
  • CSS およびその他のリソースの縮小
  • HTTP リクエストの数を減らす

専用キャッシュ、稼働時間保証、世界中のデータセンターの広大なネットワークなどのパフォーマンス最適化機能を提供する高品質の WordPress ホストを選択することも価値があります。

主要なリクエストをプリロードすることで WordPress サイトのパフォーマンスを向上させます

ページの読み込み時間は、Web サイトのユーザー エクスペリエンスと検索エンジンのランキングに大きな影響を与える可能性があります。 したがって、ブラウザがサイトのコンテンツを表示するのにかかる時間を短縮するために、できる限りのことを行う必要があります。

ページ内に主要なリクエストをプリロードすると、訪問者のブラウザにはリソース (フォント、CSS、JavaScript など) が用意されます。 そうすれば、コンテンツをロードしてユーザーがアクセスできるようにするときに遅延が発生しません。

主要なリクエストのプリロードは、サイトのパフォーマンスを向上させるための 1 つのステップにすぎません。 Jetpack Boost を使用すると、画像の遅延読み込み、必須ではない JavaScript の遅延などを行うように Web サイトを簡単に設定できます。 さらに良いことに、プラグインは無料で使用できます。 今すぐ Jetpack Boost をチェックしてください!