ホーム テクノロジー ワードプレス 非公開: WordPress でのプリロード、プリフェッチ、プリコネクトの実装

プリロード、プリフェッチ、プリ接続などの最新のブラウザ機能を活用して、WordPress Web サイトを高速化します。

サイト所有者として、Web ページの読み込みを速くするためにあらゆる手段を講じたくない人はいないでしょうか。

世界中で一貫してサイトの読み込みを高速化することは困難です。サイト リソースをすばやく読み込むためにできることはいくつかあります。たとえば、次のブラウザ ヒントを有効にすることもできます。これらは、プレブラウジング技術とも呼ばれます。

: ブラウザー ヒントのテクニックは、初めて Web サイトにアクセスするときにはあまり役に立ちませんが、その後のリクエストは高速になります。

プリロード

preloadタグを使用して、静的リソースの一部を早期にフェッチするようにブラウザーに指示できます。画像、フォント、JavaScript、CSS、スクリプト、ビデオなどを使用できます。リソースの読み込みに優先順位を付けるのに役立ちます。したがって、パフォーマンスが向上します。

ユーザーがその後複数のページにアクセスすることが予想される場合は、プリロードを実装することをお勧めします。ユーザーが商品ページにアクセスし、情報を確認したり、他の商品と比較したり、カートに追加したり、支払いをしたりするECストアと同様です。

次のプラグインを使用して、プリロード機能を設定できます。

リソースのヒントの改善– CSS および JS ファイルを設定するための無料のプラグイン。

WP Rocket – プリロード キャッシュやサイトマップなど、多くの重要なテクニックを使用して Web サイトのパフォーマンスを大幅に向上させるプレミアム プラグインです。

プリロードが有効かどうかはどうすればわかりますか?

これを確認する最も簡単な方法は、ページのソースを表示することです。以下のようなものが表示されるはずです。

 <link rel="preload" as="style" href="IMPORTANT.css">
<link rel="preload" as="script" href="CRITICAL.js">

すべてのブラウザが書き込み中のプリロードをサポートしているわけではありません。したがって、実装前に互換性マトリックスを確認してください。

事前接続

他のドメインからリソースをロードしますか?もしかしてCDN?

そうでなく、すべてのリソースが単一のドメインから読み込まれている場合、これは役に立たない可能性があります。

事前接続は、DNS ルックアップ、リダイレクト、TCP ハンドシェイク、TLS ネゴシエーションなどの時間を節約するために、バックグラウンドで他のドメインへの接続を確立するようにブラウザにヒントを与えます。その目的は、待機時間を短縮して、別のドメインからリソースを高速に読み込むことです。

繰り返しますが、上記のより優れたリソース ヒント プラグイン、またはperfmattersのようなプレミアム プラグインを使用できます。

必要なリソースを設定すると、以下のようにページ ソースにリソースが表示されるはずです。

 <link rel="preconnect" href="https://ANOTHERSITE.com">

注: CORS を必要とするドメインからリソースをロードしている場合は、それをcrossoriginとして指定する必要があり、出力は次のようになります。

 <link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>

Preconnect は、Chrome、Edge、Firefox、Safari の最新バージョンと互換性があります。

プリフェッチ

ユーザーが移動するときに必要になると思われる次のページをブラウザーにフェッチさせます。プリフェッチは、必要なリソースをダウンロードしてローカル キャッシュに保存し、必要なときにすぐに提供します。プリフェッチには 2 つのタイプがあります。

DNS プリフェッチ– 以下で説明します

リンク プリフェッチ– <link url ..> を使用して設定します。 HTML または静的リソースをプリフェッチするために使用されます。属性as使用してリソースをプリフェッチできます。

<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">

as属性は、オーディオ、ビデオ、スクリプト、トラック、スタイル、フォント、オブジェクト、ドキュメントなどのさまざまなリソースをサポートします。リンクのプリフェッチは、Pre Party Resource Hints プラグインを使用して構成できます。

DNSプリフェッチ

多くのドメインからリソースを読み込み、それらをバックグラウンドで解決したいですか?

この迅速なセットアップは、すべての潜在的なドメインを早期に解決するのに役立ち、リソースが要求されたときに、リソースがより速く読み込まれるようになります。これは、全体的な遅延を短縮するのに役立ちます。

3 つのドメインからリソースを読み込んでおり、各ドメインで DNS ルックアップを実行するのに約 100 ミリ秒かかるとすると、300 ミリ秒の遅延が節約されます。

クールじゃないですか?

perfmatters プラグインを使用して実装することも、テーマ ファイルの編集に慣れている場合はテーマのfunctions.phpファイルに次のコードを追加することもできます。

 //* DNS Prefetching
function dns_prefetch() {
    echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);

詳細については、 Mozilla Web ドキュメントを参照してください。

プリレンダリング

サイトのユーザーが潜在的なページに移動することを期待していますか?

プリレンダリングは、これらのアセットをバックグラウンドでロードするのに役立ち、ユーザーがそれをクリックすると、非常に迅速にそれを取得します。これは、Pre Party Resource Hints プラグインを使用して実現できます。

プリレンダリングは軽量のページやアセットには適していますが、サイト全体や大規模なリソースの場合は、CPU 使用率と帯域幅が増加し、サイトの速度が低下する可能性があるため注意してください。したがって、より小さいリソースを使用してテストし、副作用がないことを確認してください。

ご覧のとおり、WordPress でブラウザ ヒントを実装するには 4 つの主要なプラグインが関係しています。好みに合わせて要件に合うものを選択してください。

Pre Party Resource Hints プラグイン– 無料のプラグインは、DNS プリフェッチ、リンク プリフェッチ、プリレンダリング、プリコネクト、プリロードを提供します。

より良いリソースのヒント– 上記のヒントの代替案。

無料のプラグインは、メンテナンスとサポートが行われている限り有効です。残念ながら、これは多くのプラグインでは起こらないため、場合によっては有料バージョンを使用した方がよい場合があります。商用バージョンのプラグインは専門的にサポートされており、WordPress の標準およびセキュリティ修正が行われて最新の状態になっています。サイトのパフォーマンスの最適化に数ドルを費やしても構わない場合は、以下をチェックしてみてください。

WP Rocket – 評判が良く、800,000 を超えるサイトから信頼されています。ウェブサイト 1 つにつき 49 ドルかかります。

Perfmatters – 軽量でわかりやすいもので、1 サイトあたり 24.95 ドルかかります。私が書いているように、それは次の機能を提供します。

それはかなりの最適化です。

結論

WordPress コアは軽量ですが、使用するテーマやプラグインによっては大きくなります。また、検索ランキングとコンバージョンを向上させるには、サイトのパフォーマンスを最適化することが不可欠です。上記のテクニックは簡単に実行できますが、それだけで終わるべきではありません。

また、コンテンツをキャッシュして世界中のユーザーに迅速に配信するには、CDN の使用を検討する必要があります。たくさんありますが、CDNとセキュリティの両方を提供するSUCURIを試してみることをお勧めします。

「 WordPress でのプリロード、プリフェッチ、プリコネクトの実装」についてわかりやすく解説!絶対に観るべきベスト2動画

SureTriggersの使い方:WordPressで使える最強のマーケティングオートメーションツールの使い方
WordPressでお問合せフォームを作る方法をデモ解説【ContactForm7】

Share via
Copy link