WordPress：deffered jQueryの後に起動するインラインJSを移動する

Question

Googleページのヒントの提案に従うと、「JSレンダリングブロック」が推奨されており、jQueryメインファイルに関連しています。

私のサイトでは、いくつかのプラグインでWordPressを使用しています。プラグインの1つがJSをインラインで投げます。だから私がjQueryをフッタに読み込むように動かすか、または "defer"モードを使ってロードすると、インラインコードが起動するとjQuery is not definedになります。

すべてのインラインスクリプトを「キャッチ」するグローバルな解決策を見つけようとしていましたが、jQueryのメインファイルがドキュメントの最後に実行された後でそれを遅延させました。

私は素晴らしいソリューションを書いてくれました。それは私の特定の状況のた​​めの非常にストレートな解決策ですが、私はthe_contentまたはウィジェットの出力のフィルタとしてこれを作ることに失敗しました。私はこれをグローバルな解決策にしたいと思っています。だから私はどこかでJSの発砲を心配する必要はありません。

どのようにすれば効果がありますか？ここに私のコードは、これまでのところ、ショートを通るこの特定のケースのために：

/* Get shortcode HTML */ 
$widget_shortcode = do_shortcode($shortcode); 

/* Take out all scripts into an array */ 
$delayed_scripts = array(); 
preg_match_all('#<script(.*?)</script>#is', $widget_shortcode, $match); 
foreach ($match as $val){ 
    $delayed_script = '<script '.$val[0].'</script>'; 
    array_push($delayed_scripts, $delayed_script); 
} 

/* Remove all scripts from HTML */ 
$widget_shortcode = preg_replace('#<script(.*?)</script>#is', '', $widget_shortcode); 

/* Echo filtered HTML */ 
echo $widget_shortcode; 

そして、ちょうど終了</body>タグの前に：

foreach ($delayed_scripts as $script) { 
    echo $delayed_script; 
} 

Answer 1

私はこの同じ問題に非常に熱心に取り組んできました。ここで考慮すべき点がいくつかあります。この問題は、すべてのプラグインがWordpressのスクリプトを正しくエンキューした場合、残念なことに、多くの人がスクリプトをエコーし​​たり、標準のインクルードを使用したりすると簡単になります。

一部のコメント者は、すべてのインラインスクリプトをキャッチしたい場合は、出力バッファにスクリプトタグを検索する以外に選択肢はありませんが、プラグインがスクリプトをエコーすると、それ以降はWordPressで何もできませんバッファに送られる。

preg文を使用し、htmlドキュメント全体を検索してから文字列を操作することは、おそらくjQueryの読み込みを頭に置くよりもはるかに高価です。これは、htmlドキュメントのサーバー応答時間を増加させ、この待ち時間は悪いことです。なぜなら、レンダリングが行われておらず、ユーザーが空白の画面でそこに座っているからです。言うまでもなく、フッターにjQueryを移動することは、フッターが解析されるまで、それに依存するものは動作しないことを意味します。これはGoogleが分析コードを頭に入れておくのと同じ理由です。アナリティクスコードが解析される前にユーザーがナビゲートするとどうなりますか？

Google Pageの速度は目安であり、ルールではありません。完全なスコアを得るために壁に向かって頭を叩かないでください。