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

Page Speed Insight は排除しなさいと言うけれど…

スポンサードリンク

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

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

  • ページの速度 は Unavailable
  • 最適化 Medium 68/100

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

01_advice-by-pagespeed-insight
PageSpeed Insight のアドバイス

サーバー負荷の軽減?! + 表示速度の向上!?

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

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

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

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

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

大きく分けると

  1. 表示を決めたり、決めるための機能を果たす CSS や
    表示対象のマテリアルを準備するための js を読み込み
  2. 画像を読み込み
  3. 画像の縮小版を読み込み
  4. 機能的な役割を果たす js が読み込まれる

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

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

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

02_gtmetrix-waterfall
GTmetrix の Waterfall

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

devicepx-jetpack.js を外すなら function.php へ設定?

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 を生成するとき、リクエストに対して繰り返し、常にすべての設定をセットにしてはき出しているということが類推できます。

このときの私のサイトの環境は

  • ロリポップ: スタンダードプラン / モジュール版PHP 5.6
  • WordPress: 4.9.8
    そして
  • Jetpack by WordPress.com 5.6.1

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

  • WPTouch Pro: 4.3.25(ページキャッシュ)
  • W3 Total Cache: 0.9.7(ページキャッシュのみ起動)

で行っていました。

 

スポンサードリンク

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です