Rel= Preload Link タグを使用して WordPress サイトのパフォーマンスを向上させる方法

公開: 2022-10-01

WordPress サイトのパフォーマンスを向上させたい場合、rel=”preload” リンクタグを使用するのが 1 つの方法です。このタグを使用すると、特定のアセットが実際に必要になる前に読み込みを開始するようブラウザに指示できます。たとえば、ページのメインコンテンツが読み込まれる前に、Web サイトのロゴをプリロードするために使用できます。
rel=”preload” タグを WordPress サイトに追加するのはかなり簡単です。サイトのヘッダーにコードを少し追加するだけです。この記事では、その方法を紹介します。

WordPress でキーリクエストをプリロードするにはどうすればよいですか?

Autoptimize を使用して WordPress でキーリクエストを読み込むには、[設定] > [Autoptimize] > [キーリクエストのプリロード] に移動します。 WordPress ダッシュボードには、リンクからアクセスできます。 Preload specific requests ボックスが利用可能になります。そのボックスに、プリロードキーリクエストの警告の結果として受け取ったリンクを入力します。

PageSpeed は、利用すべき機会の読み込みを推奨する場合があります。コード内の 3 レベルの深さで参照されるページをレンダリングするためのファイルがあり、表示される前に読み込まれます。つまり、終了ファイルは別のファイルによって要求され、WordPress サイトの HTML 内に直接配置されていません。 PageSpeed を使用すると、サイトのパフォーマンスに関する問題を特定できます。フォントまたはファイルをロードすると、表示されるまでに時間がかかる場合があります。彼らが自分でそれを理解する前にフォントをプリロードするとき、私たちは彼らがそれを必要とするだろうと言っています. ファイルをロードするときは、link rel=preload などの特定の構文を使用してプレイリストに追加する必要があります。

特定のファイルが要求されると、ブラウザは特別なリンクタグを検出し、ダウンロードを開始します。優先順位を付けるファイルが多すぎると、他の重要なファイルを遅らせるボトルネックが発生する可能性があります。この場合、WP Rocket は既に Google フォントをプリロードしているため、特別なことをする必要はありません。 [未使用の CSS を削除] 機能を使用すると、その機能を使用してフォントを事前に読み込むことができます。必要に応じて、これらのファイルをローカルでホストすることもできます。その結果、Google がウェブサイトをホストするのではなく、ホストは Google が管理するサーバーでホストされます。

WordPress プラグインは、ヘッダーファイルを手動で編集するか、WordPress プラグイン WP Rocket を介して、フォントを読み込むことができます。 Google PageSpeed Insights は WP Rocket 経由でフォントをリクエストしないため、WP Rocket で読み込むことをお勧めします。

WordPressでリンクをプリロードする方法

ブログの設定に移動し、[リンク] をクリックして、[リンク] 見出しの下の [プリロードテキストボックス] にリンクを貼り付けます。

Link Relのプリロードとは?

クレジット: addyosmani.com

リンク rel のプリロードは、HTML5 で導入された新しい標準であり、Web 開発者がページの読み込み中に必要なファイルについてブラウザーに通知できるようにします。このようにして、ブラウザーは HTML が解析されるのを待たずに、これらのファイルの読み込みをすぐに開始できます。これにより、特に多くの外部ファイルを必要とするページの場合、ページの読み込み時間が改善されます。

Link rel="preload" は、優先するこの属性を持つリンクを示すために使用されます。プリロードは、ブラウザがプリロードを使用するために実行する必要があるものであり、実行するかどうかをブラウザが決定できるものです。これは、W3C 仕様のpreload キーワードの非常に詳細な説明です。

プリフェッチを使用する理由は多数あります。たとえば、ページで頻繁に使用されるリソースをプリフェッチすることを優先すると、それらがネットワークから読み込まれない可能性が低くなります。メモリの肥大化を軽減するために、短期間だけ必要なリソースをプリフェッチすることもできます。プリフェッチは、リソースのプリフェッチとキャッシュのプリフェッチの 2 つの方法で実行できます。ドキュメントのプリフェッチリソースとは、ドキュメントがドキュメントを前処理するために使用するリソースを指します。画像ファイルやスタイルシート、その他の種類のファイルやオブジェクトを生成するために使用できるスクリプトやモジュールもあります。一方、プリフェッチとは、ブラウザがキャッシュで使用するリソースのプリフェッチを指します。 HTML5 などのリソースや、まだキャッシュされている AJAX 呼び出しが含まれます。プリフェッチアルゴリズムは、さまざまな方法で使用できます。使用頻度が最も低い (LRU) アルゴリズムは、最も使用されていないリソースを選択するための最も一般的な方法の 1 つです。 Random Early Release (RER) アルゴリズムは、ファイル名に基づいてリソースを選択するもう 1 つの一般的なプリフェッチアルゴリズムです。プリフェッチの結果の 1 つは、ユーザーエクスペリエンスの低下です。一般に、必要になる可能性が高いリソースをプリフェッチすると、それらが使用可能になるまでブラウザが待機するのに必要な時間が短縮されます。その結果、この方法を使用することで、ユーザーがページの読み込みを待つ時間が短縮されます。 ページの読み込み時に、作成者は preload 属性を割り当てることで、メディアの読み込み方法を指定できます。プリロードは、作成者が Web サイトのルックアンドフィールをブラウザに通知する方法です。プリフェッチは、さまざまな方法で役立ちます。キャッシュが優先されます。

ページの読み込みを高速化するためのリソースのプリロード

メインドキュメントが読み込まれるまでに特定のリソースが事前に読み込まれると、ページの読み込み速度が向上します。メインドキュメントの読み込みが完了するまで、特定のリソースは必要ないと作成者が確信している場合に役立ちます。 preload 属性は、リンクを持つすべての要素で使用できます。 no または auto の preload 属性は、ブール値に基づいています。リンクのコンテンツに基づいてプリロードするリソースを決定するには、ブラウザを auto に設定します。 preload 属性を none に設定すると、プリロードが無効になります。

プラグインなしで WordPress サイトにローダーを追加するにはどうすればよいですか?

プラグインなしで WordPress サイトにローダーを追加するのは簡単なプロセスです。まず、WordPress テーマのフォルダーに「 loader.php 」という新しいファイルを作成する必要があります。次に、次のコードをコピーして新しいファイルに貼り付けます。
/**
* ローダー
*
* @package ワードプレス
* @subpackage ローダー
* @author ここにあなたの名前
*
* @internal このコードは、WordPress サイトにスクリプトをロードするためのものです
* プラグインは必要ありません。
*/
/**
* エンキュースクリプト
*
* WordPress フロントエンドのスクリプトを登録してキューに入れます。
*/
関数 wp_enqueue_scripts() {

// スクリプトを登録する
wp_register_script( 'jquery-ui-core', '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js', array( 'jquery' ), '1.9.1' 、真実）;

// エンキュースクリプト
wp_enqueue_script( 'jquery-ui-core' );
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts' );
? >
このコードは、WordPress サイトに jQuery UI Core スクリプトを登録してキューに入れます。その後、プラグインを必要とせずに、WordPress サイトで jQuery UI Core スクリプトを使用できます。

HTMLでページをプリロードするにはどうすればよいですか?

*link rel=preload を使用すると、できるだけ早くリソース (スクリプトやスタイルシートなど) をダウンロードしてキャッシュできます。これは、ページの読み込み後数秒以内にそのリソースが必要な場合に役立ちます。ページを高速化したい。リソースをダウンロードした後、ブラウザはそれに対して何のアクションも実行しません。

これは、近い将来 Web ページをロードするために必要となるリソース/ファイルへのポインターを Web ブラウザーに提供する方法です。プリロードのヒントは、プリロードをロードする必要があるリソースの要素に値として追加することによって提供されます。ただし、ロード状態では、リソースの非同期ダウンロードは許可されません。ブラウザが何か他のことを実行している場合、同時にプリロードヒントをダウンロードします。ブラウザは解析されるまでこれらのファイルについて学習しないため、どのファイルが解析されるかわかりません。これは、これらのアセットをロードする非効率的な方法です。ブラウザーにはその機能がないためです。その結果、プリロードヒントを使用して、最初にこれらのリソースをダウンロードするようにブラウザに指示できます。

プリロードは Web サイトを高速化するための優れた機能ですが、まれにしか使用しないでください。アバブザフォールドをロードする必要があるファイルをプリロードすることをお勧めします。また、Google PageSpeed Insights でウェブサイトの速度を上げることもできます。さらに、プリロードは HTTP/2 サーバープッシュと組み合わせることができます。フォント、CSS、JS、およびその他のリソースのプリロードが利用可能です。別のファイルがレンダリングされているときにのみファイルが検出されると、Web サイト全体の読み込みが速くなる可能性があります。一部の標準ファイルタイプは、以下に示す構文を使用して事前設定できます。この場合、プリロードは Web ブラウザーに特定のファイルを Web ページに適用するように指示しません。

WordPressをプリロードする

WordPress でのデータのプリロードとは、必要になる前にデータをロードすることを指します。これは、必要なときに特定のデータを常に利用できるようにしたい場合や、データが必要になるたびにリモートの場所からデータをロードする必要がないようにしたい場合など、さまざまな状況で役立ちます。データをプリロードすると、必要なときにデータをロードするのに必要な時間が短縮されるため、パフォーマンスの向上にも役立ちます。

WordPress で Preload、Prefetch、Preconnect を実装すると、サイトが高速になります。ユーザーが複数のデバイスで複数のページにアクセスすることが予想される場合は、それらを事前に読み込むことをお勧めします。事前接続を使用すると、バックグラウンドで別のドメインへのアウトバウンド接続を確立できます。目標は、別のドメインからリソースをより速くロードするためにレイテンシーを短縮することです。 Preconnect は、Chrome、Edge、Firefox、および Safari のすべてのバージョンと互換性があります。 DNS プリフェッチは、linkurl 配列を使用して実行されます。これを使用して、HTML または静的リソースをシステムに返すことができます。

それらを事前にレンダリングすると、それらがまだアクティブな間にバックグラウンドでロードできます。これは、Pre Party Resource Hints プラグインを使用して実現されます。軽量のアセットが必要な場合はレンダリングしますが、サイト全体や大きなリソースを過度にレンダリングしないように注意してください。また、CDN を利用してコンテンツをキャッシュし、世界中のユーザーにより速く配信することも検討する価値があります。 CDNとセキュリティを提供している会社はいくつかありますが、両方を提供するSUCURIをお勧めします。

プリロードの結果、ユーザーは、特に接続が遅い場合に、パフォーマンスが大幅に向上する可能性があります。 Web ページの読み込みを高速化するために、ユーザーはリソースをより早く読み込むことができ、ページが完全に読み込まれるまで待つ必要がなくなります。リソースをロードする前に、いくつかの点に注意してください: ファイルをロードするときは、コメントに適切な属性 rel=”preload” を含めるようにしてください。ユーザーは、ブラウザの設定で [プリロードなし] ボタンをクリックして、プリロードを無効にすることができます。リソースをプリロードする利点の 1 つは、リソースをより効率的に使用できることです。 Web ページをロードする前にロードすることで、 Web ページのロードを高速化できます。ページの読み込み時間は、リソースがアクセスされるとすぐに読み込むことで短縮できます。ユーザーが頻繁に要求するリソースを事前にロードすることで、ロードにかかる時間を短縮できます。ユーザーがブラウザをロードすると、リソースのロードにかかる時間が短縮されます。ユーザーがリソースを要求した場合、プリロードにより、ブラウザーがそれらを見つけるのに必要な時間が短縮され、プロセスが高速化されます。一般に、プリロードは Web ページのロードプロセスを高速化するのに役立ちます。プリロードを使用する場合は、プリロードの利点と制限、およびプリロードが役立つさまざまな方法を理解することが重要です。

プラグインなしの WordPress プリローダー

コンテンツに CSS を手動で適用することで、WordPress プリロードアニメーションを作成できます。 CSS ソースコードにあるpreloading animationsを使用する必要があります。次に、これらの Web サイトのいずれかで提供されているプリロードアニメーションの CSS ソースコードをコピーします。

Link Rel=preload> には有効な値が必要です

link rel=preload> 要素の as 値は有効な値でなければなりません。

プリロードとプリフェッチ: ユーザーエクスペリエンスを高速化する

ユーザーがページに到達すると、プリロード属性をプリフェッチと組み合わせて使用して、リソースを要求できます。ユーザーがページに到達する前に、ブラウザーが必要なリソースを認識できるようにすることで、ユーザーエクスペリエンスの高速化を支援します。
メディアファイルが読み込まれると、preload という属性が使用されます。作成者は preload 属性を使用して、そのサイトで可能な限り最高のユーザーエクスペリエンスが得られると思われるものを指定できます。この属性は、場合によっては無視できます。