WordPress で JavaScript を遅延ロードして、ページのレンダリングを高速化する方法は?

WordPressページ レンダリング メソッドを高速化するための JavaScript の遅延読み込み。

JavaScript の Defer プロパティとは何ですか?

誰もがおそらくこの状況に遭遇したことがあります。

head には N 個のスクリプトがあり、スクリプトが読み込まれると、通常は空白のページ レンダリングがブロックされます。

もちろん、ソースコードのスクリプトをフッターに入れることで、これを回避できます。

ただし、一部の複雑な開発環境では、この単純なタスクが特に複雑になる場合があります。

この時点で、JavaScript では比較的まれなプロパティである Defer プロパティを使用できます。

あなたはそれを決して使わないかもしれませんが、この紹介を読んだ後、私はあなたがそれを離れることはないと確信しています.

その主な機能は、ロード時にスクリプトを解析するのではなく、ページ全体がロードされた後にスクリプトが解析できるようにすることです。

はい、スクリプト タグに defer 属性があれば、スクリプトをページの下部に配置するのと同じように、head に配置しても HTML ページを解析した後に実行されます。

もちろん、遅延の使用も制限されています。通常、次の 2 つの点に注意してください。

1) deferred defer タイプのスクリプト ブロックで document.write コマンドを呼び出さないでください。

• document.write は直接的な出力効果を生み出すためです。

2) 即時実行スクリプトを含め、Defer スクリプトでグローバル変数または関数を使用しないでください。

WordPress で使用するスクリプトに Defer 属性を追加する

WordPress で、WordPress で使用されるスクリプトに Defer 属性を自動的に追加するにはどうすればよいですか?

次のコードを現在のテーマの functions.php ファイルに追加できます ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• によると、上記のコードのみが機能します。WordPress によって導入された JavaScript コードが有効になります。

注意事项

ライブ プレビュー管理は空白で表示される場合があります。

上記コードを使用した場合、リアルタイムプレビュー管理(外観→カスタマイズ)を開いた際に空白表示になる場合がありますので、適宜ご使用ください。

リアルタイムのプレビュー管理が必要な場合は、上記のコードをコメントアウトし、カスタマイズが完了した後にコメント化されたコードを削除してください。

PHP コメント コードの例:

/*

这里是代码 

*/