PageSpeed InsightsでNG！プラグインのCSSやJavascriptを非表示に!

グーグルはウェブページがちゃんと表示されるまでの時間もインデックスの順位付けの要素としていると聞きます。

確かに、『タイム　イズ　マネー』ですから、ページが表示されるまで長い時間待たされるページはユーザーにとって良いとは言えません。

という事で、Pagespeed insightsでNGを食らっている項目を色々と改善しているのですが、なかなか高得点は取れませんね。とは言え、NGを食らっている以上は少しずつでも改善して行く努力は必要だと思います。

【スポンサーリンク】

私が使っているwpXサーバーはとても速いので有名ですが、どうやら.httpaccessファイルを使ったGZP圧縮などはできないようです。サーバー負荷が掛かってしまう事はさせないようにしているみたいなんですね。

なので、仕方ないからあらかじめ自分でGZPファイルを作っておいて、それをブラウザーに読み込ませようという事もやってみましたが、それもダメでした。今の所、wpXではGZP関連はほぼ扱えないと思って良いみたいです。

他の人のウェブページ対策を見ていると、このファイルのGZP圧縮が最も効果が高いみたいなのですが、今の所は諦めて他にできる事をやる事にしました。

一番効果が高かったのは、PageSpeed Insightsからレンダリングの読み込みがブロックされてレンダリング遅延が発生していると言われたCSSやJavascript対策でした。

最初、WordpressのプラグインのCSSやJavascriptを最適化をするために他のプラグインを使ってそれらをフッターに移動させたりAsyncやDeferなどの遅延読み込みも試してみましたが、どれも上手く行きませんでした。

WordPressサイトのページが表示されなくなるなど挙動がおかしくなるんです。

という事で、プラグインで対処するのは諦めて、サイトのテーマのフォルダに入れてあるfunctions.phpを使う事にしました。色々と探すのが大変でしたが、何とか自分のやりたい事ができたのでシェアします。

私の場合、Crayon Syntax Hilighterを使わないページではそのCSSとJavascriptを非表示にしたかったんです。このプラグインのCSSとJavascriptはとても重いんです。

このプラグインの設定項目に『必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる』というのがあり、それをONにすると確かにその通りになるのですが、なぜか最適化されてCSSとJavascriptがフッターに移動してしまうんですね。

パソコンから見る場合はそれで問題ないのですが、スマホで見るとCrayon Syntax Hilighterの表示が崩れまくって全く使い物にならなくなってしまうのです。

そのため、設定項目をONにしないで、Crayon Syntax Hilighterを使わないページではCSSとJavascriptを非表示（使うページだけCSSとJavascriptを表示）するようにしました。

やり方自体はとても簡単です。functions.phpに以下のコードを書き込み保存するだけです。

（※テキストにはコピープロテクトがかかっているので、ソースコード枠右上の『新しいウィンドウでコードを開く』をクリックしてコピペして下さい。）

上のコードで●●●の部分はCrayon Syntax Hilighterを使う『記事ページ』の番号を記入します。

Crayon Syntax Hilighterを使うページがもっとある場合は、&& !is_single(●●●)を加えて行きますし、これより少ない場合は&& !is_single(●●●)を取れば良いですね。

記事番号の調べ方は、記事を書き終えて『公開』ボタンをクリックした後に『投稿の編集』ページに戻り、『短縮URLを取得』をクリックします。

すると、以下のようなダイアログボックスが表示されますので?=以下の数字が記事番号です。

たったこれだけで、Crayon Syntax Hilighterを使っていないページからそのCSSとJavascriptを見事に取り除く事に成功しました。