レンダリングブロックのJetpackのJavaScript － WPtouch Proのモバイルモードから削除できない!?

スポンサードリンク

私のサイトの、たとえばホームページを対象に Page Speed Insight で測定をしてもらうと…

モバイルモードに対する評価は

そして、最適化についての提案 に表示される最初の項目が
「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
というアドバイス。

PageSpeed Insight のアドバイスを細かく見ると JavaScript, CSS のそれぞれに下のような詳細のコメントがあり

レンダリングをブロックする JavaScript を除去してください:

次のCSS 配信を最適化してください:

そこに挙げられている JavaScript のリストには devicepx-jetpack.js、CSS の側には jetpack.css というファイルが表示されています。これは Jetpack のものだね、ということがファイル名から分かりますね。

GTmetrix の Waterfall の測定結果はとても興味深いですね!^^;
ホームページの表示のために処理されるファイルの順序とかかった時間が目で見えますから!

大きく分けると

だいたいそんな流れだというのが分かります。

そして、jetpack.css + devicepx-jetpack.js がアドバスの対象になっているということは、
CSS：つまり、表示寄りの設定と
js：　つまり、機能よりの設定の両方が指摘されているということ。

ロードされ、処理される順序－ Waterfall －の上流と下流の2か所でレンダリングをブロックしているらしいということが分かります。

PageSpeed Insight のアドバイスに従ってページ表示の速度が挙げられるものなら… はもちろんですが、
私のサイトの場合、サーバーの負荷が高くなりすぎて 503 エラーが出やすくなっているので運用を見直してはというロリポップのアドバイスもあって、外せるものなら外してみようと考えました。

Jetpack はいくつか、表示に関する機能を使っていますから jetpack.CSS の削除はまたいずれ検討するとして、devicepx-jetpack.js から。

そして、Jetpack 重し! と考え、同じようなアドバイスを目にした多くの先輩方が記事にされている

function dequeue_devicepx() {
wp_dequeue_script( ‘devicepx’ );
}
add_action( ‘wp_enqueue_scripts’, ‘dequeue_devicepx’, 20 );

を function.php に書き加えました。

この削除設定の効果はすぐに現れます。
何といっても、画面のソース表示を見れば一目瞭然です。

ただ、ここで気をつけなくてはいけないのは、Page Speed Insight のアドバイスを見ていたのはモバイルモードのもの。そして
上の function.php への設定は、PC モードの表示に対するものなのです。

つまり、Page Speed Insight のモバイルモードのアドバイスから、devicepx-jetpack.js に対するコメントが消えないのです!

なぜか!?
検証と確認が必要ですが、答えはひとつ。私のページのモバイルモードは WPtouch Pro で表示しているのです。WPtouch Pro への、devicepx-jetpack.js の排除設定はできていないということ。

スポンサードリンク

MEMO:
言い換えると、WordPress は HTML を生成するとき、リクエストに対して繰り返し、常にすべての設定をセットにしてはき出しているということが類推できます。

モバイルモードの表示とキャッシュを

で行っていました。

スポンサードリンク