HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

スクロールせずに見えるコンテンツのレンダリングをブロックしている javascript/css を排除するWordPressプラグイン3つ

2013-10-08_1655_001
先日Googleさんから「レンダリングブロックjavascript/cssを排除」するよう警告された@web_shufuです。色々ググって調べると、レンダリングブロックjavascript対策に有効っぽいプラグインが3つ見つかりましたので入れてみました。

2015年4月20追記:当ページのプラグインはプラグイン「 WP Fastest Cache」の導入で不要になったので全て外しました。

レンダリングブロックjavascript/cssを排除することを決意

2013年10月ころは、PageSpeed Insightsで当サイトのどのページを調べても、冒頭の画像ような結果になりました。

特に「レンダリングブロックjavascript/cssを排除」は必ず赤色の感嘆符が付きました。どのページを調べても…

  • ブロッキング スクリプト リソース が 14
  • ブロッキング CSS リソースが 6~8

「この問題を修正すると、ページのパフォーマンスが大幅に改善されます。」と毎回Google様に言われます。

それでとうとう@web_shufuも重い腰を上げて、レンダリングブロックjavascript/css対策に乗り出しました。

対処法としてGoogleさんが出した3つの指示

Google PageSpeed Insightsの診断結果には、高速化へのヒントがいっぱいあります。

冒頭の画像の赤枠内で「スクロールせずに見えるコンテンツのレンダリングをブロックしている javascript/css を排除する」をクリックすると、以下のような細かく具体的な指示が出ます。

レンダリングブロックjavascriptの排除

Googleさんの示す対処法は次の2つです。

  • 小さなjavascriptは、外部ファイル化せずにインライン化する
  • .jsファイルは遅延ロードする

ですが非同期読み込みでもレンダリングブロックjavascriptは排除できます。

かく言う私は非同期読み込みと遅延ロードの違いが良くわかりませんが、この記事の図を見てざっくりと理解しました。

上から1/3ほどのところに、通常の場合、遅延ロードの場合、非同期読み込みの場合のそれぞれについて、HTMLとjavascriptの読み込み進行の関係を表した図があります。

スクリプトの非同期バージョン

アドセンスのコードなどには非同期コードがあります。

私は非同期でないコードを貼り付けていました。

この機会に非同期コードに乗り換えました。

CSS配信の最適化

Googleさんの示す対処法は以下の3つ

  • 小さなCSSは外部ファイルにせずインライン化
  • データ量が大きなCSSはインライン化しない
  • Style属性は使用しない

あと、CSSにも遅延ロードのような考え方が適用可能です。

above-the-fold(スクロールせずに閲覧可能な領域)ではない部分の表示のみに関わるCSSファイルの読み込みを後回しにするとページスピードが上がります。

とてもよさげなプラグイン「Async JS and CSS」を発見

Googleさんは結構丁寧に対策を教えてくれているのですが、@web_shufuには独力で対策に必要なコードを書く力がありません。

そこで何かいいプラグインがないかと探したところ、レンダリングブロックjavascriptを削除し、レンダリングブロックcssも最適化してくれるっぽいプラグインが見つかりました。

[img-link url=”https://wordpress.org/plugins/async-js-and-css/” title=”WordPress | Async JS and CSS | WordPress Plugins”]

まずはWordpress管理画面左サイドバーの「プラグイン」からインストール・有効化します。

設定ページがありますが、とりあえずデフォルトのまま使用してみました。

私の環境では表示が崩れた

ソースを見ると、今までwp_head();が吐き出していた.jsファイルや.cssファイルへのリンクを全てwp_footer();が吐き出すようにしたうえ、かなりのファイルがインラインで表示されるようになっています。

高速化には効果がありそうです‥と思ったら私の環境では表示に色々不具合が出ました。

  1. cssへのリンクがフッターに移動したせいでabove-the-foldの表示が遅くなった
  2. cssファイルはいずれもデータ量がそれなりにあるので、インライン化するとかえってページスピードが遅くなりそう
  3. javascriptで動いているプラグインBJ Lazy Load(画像をスクロールに合わせて順次表示させる)とは相性が悪い
  4. javascriptで動いている「ページトップへ戻る」ボタンが表示されなくなった
  5. javascriptで動いているナビゲーションバーのマウスオーバーイベントが動かなくなる

それで以下のように対処しました。

above-the-foldの表示の改善

Async JS and CSSはwp_head();が吐き出すcssを全てwp_footer();に持っていきます。

このため、テーマファイルのスタイルシートがwp_head();で読み込まれる形式になっているTwentyTwelveのようなテーマを使っている場合、above-the-foldの表示に関わるテーマファイルのスタイルシートもページ末尾のwp_footer();で読み込まれるようになってしまいます。

その結果above-the-foldの表示に関わるテーマファイルのスタイルシートの読み込みが遅れ、かえってページの表示が遅くなります。

対処法としては、テーマファイルのスタイルシートへのリンクについては、wp_head();が吐き出さないようにしてheader.phpに直に書くようにしました。

その結果、テーマファイルのスタイルシートへのリンクはヘッダー部分で読み込まれるようになり、この問題は改善されました。

CSSはインライン化しない

CSSファイルのインライン化を避けるには、プラグインページのAsync JS and CSSのsettingをクリックして
2013-10-08_1953

「Using tags on the foot of document」にチェックを入れます。
2013-10-09_0825

これで、CSSファイルはインライン化されず、.cssファイルへのリンクがwp_head();ではなくwp_footer();で吐き出されるようになります。

これでも、CSSファイルの読み込みを後回しにできているので、高速化には貢献できます。

願わくは、いくつもあるプラグイン絡みのスタイルシートを一つにまとめたいところですが、これはまたの機会に譲ります。

結局、レンダリングブロックjavascriptの排除は別プラグインで

Async JS and CSSを使ったことによる表示の不具合のうちjavascriptが絡むものについては、Async JS and CSSにjavascriptの操作をさせないことで不具合を対処することにしました。

つまり、Async JS and CSSにはレンダリングブロックcssの最適化のみ任せて、レンダリングブロックjavascriptの排除は他のプラグインに委ねることにしました。

プラグインページのAsync JS and CSSのsettingをクリックして、「Load Javascript asynchronously」のチェックを外します。すると自動的にさらに2箇所のチェックが外れて設定画面は以下のようになります。
2013-10-09_0826

これでAsync JS and CSSはjavascriptに対して作用しなくなり、javascript絡みの表示の不具合は全て解消されました。

しかし、もちろんレンダリングブロックjavascriptの排除は全く出来ませんので、別のプラグインで行います。

非同期読み込みプラグイン「Asynchronous Javascript」でレンダリングブロックjavascriptを排除

レンダリングブロックjavascriptの排除のために導入したプラグインがAsynchronous Javascriptです。

[img-link url=”https://wordpress.org/plugins/asynchronous-javascript/” title=”WordPress | Asynchronous Javascript | WordPress Plugins”]

javascriptを非同期で読み込むプラグインで、レンダリングブロックjavascriptを排除してくれます。

これはインストールして有効化すればそれだけでOK。いろいろ設定できるようですが、弄る必要はありません。デフォルトの設定で十分です。

導入後のGoogle PageSpeed Insightsの診断結果がこれです。

2013-10-09_0915_001

赤い感嘆符は付いたままですが、ブロッキングスクリプトリソースが14から2に激減。

ブロッキングCSSリソースは6とあまり減っていませんが、後で読み込んだほうがスピードアップする.cssファイルはAsync JS and CSSで読み込みを後回しにしたので、その分効果があると思います。

ただ、モバイル・PCでそれぞれ100点満点でつくスコアが改善されていません。

どういうことなのでしょう?

ただ、javascriptやcssの読み込み方を高速化に適した方向に改善したのは確かなので、あまり気にせず様子を見守りたいと思います。

遅延ロードプラグイン「WP Deferred Javascripts」

最後にjavascriptを遅延ロードするプラグインを紹介します。

[img-link url=”https://wordpress.org/plugins/wp-deferred-javascripts/” title=”WordPress › WP Deferred JavaScripts « WordPress Plugins”]

これもインストールして有効化すればそれだけでOK。設定画面すらないのでとても簡単に使えます。

私も使ってみました。

Google PageSpeed Insightsの診断結果は、Asynchronous Javascriptを使った場合とほとんど変わりません。

私の場合は、Javascriptの読み込みを、Asynchronous Javascriptを利用して非同期で行うことを選択しましたが、WP Deferred Javascriptsで遅延ロードすることを選択しても良いかもしれません。

Google PageSpeed Insightsの診断結果は全て「Krad XinによるロリポップWordpressサイト大量ハッキングまとめ |ウェブシュフ」を対象にしたものです。


投稿日

カテゴリー:

投稿者:

 最終更新日: