WordPress で Preload、Prefetch、Preconnect を実装する

公開: 2019-08-11

プリロード、プリフェッチ、プリコネクトなどの最新のブラウザー機能を利用して、WordPress 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 ドキュメントを参照してください。

事前レンダリング

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

Prerender は、これらのアセットをバックグラウンドでロードするのに役立ち、ユーザーがクリックするとすぐに取得できます。これは、Pre Party Resource Hints プラグインで実現できます。

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

ご覧のとおり、WordPress にブラウザーヒントを実装するには、主に 4 つのプラグインが必要です。お好きなものをお選びいただき、要件に合わせてください。

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

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

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

WP Rocket – 評判が高く、800,000 以上のサイトから信頼されています。 1 つの Web サイトで 49 ドルかかりました。

Perfmatters – 従うのが簡単な軽量で、1 つのサイトで 24.95 ドルかかります。私が書いているように、それは次の機能を提供します。

それは多くの最適化です。

結論

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

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