PageSpeed Insightsその2 WPプラグインを使ってCSS、Javascriptを改善

昨日、画像を圧縮してEWWW Image Optimizerで圧縮できない画像は手動で圧縮してみました。

デカイサイズの画像を圧縮したらPageSpeed Insightsは47点くれました(^^)　ただ・・・まだまだ笑われてしまうくらい改善してないレベルなのでせめて70点もらえるくらいまで改善していきます。

現状はパソコン44点、モバイル34点です。

「画像を最適化する」が[修正を考慮]の部分に移動したので今度は修正が必要な項目を改善していきます。

 CSS、Javascriptを改善

Autoptimizeを試す

AutoptimizeでCSSとJSの速度を改善できそうなのでやってみます。

ワードプレスの管理画面 左メニュー　設定 ＞ Autoptimize に設定ページがあります。

 

 上記のように

• Optimize HTML Code?
• Optimize JavaScript Code?
• Optimize CSS Code?
• Generate data: URIs for images?

 ４つにチェックを入れました。最後に「Save Changes and Empty Cache」ボタンを押して保存します。

設定が終わったらもう一度PageSpeed Insightsを実行してみます・・・パソコン44点、モバイル34点で全く変わりませんでした（汗）なので使うのを止めておきます。

Head CleanerでCSSとJSが改善されるかやってみる

Head Cleanerはインストールしてあるので設定してみます。左メニューの設定 ＞ Head Cleanerのページ

• CSS と JavaScript を、サーバ上にキャッシュする
• CSS を最適化する
• JavaScript を小さくする
• フッタ領域の JavaScript も対象にする

4つの項目にチェックしてもう一度PageSpeed Insightsを実行してみます。

パソコン45点、モバイル35点、1ポイントずつアップしました。

※重要！「CSS, JS を動的生成する。」をチェックするとJavascriptが正常に動かなくなるようです。

CSS,JSがグチャグチャになるので「Easy FancyBox」や「ページの先頭に移動する」ボタンが正常に機能しなくなりました。

Head Cleaner 追加して試す

• 複数の CSS を結合する
• 複数の JavaScript を結合する

試しにこれもチェックを入れてもう一度PageSpeed Insightsを実行しても上の点数と同じでージ表示速度に変わりありません。

とりあえずはHead CleanerのCSS,JS関連のチェックは外しておきます。

Head CleanerのCSS,Javascript関連をチェックを外すとき

Head CleanerのCSS,JS関連のチェックを外すときハマったのは、

「CSS と JavaScript を、サーバ上にキャッシュする」のチェックを外すと他の設定は隠れてしまいますが！

他の設定がチェックされた状態のようです。

• フッタ領域の JavaScript も対象にする
• CSS, JS を動的生成する。
• CSS を最適化する
• JavaScript を小さくする
• 複数の CSS を結合する
• 複数の JavaScript を結合する

この6個のチェックボックスを1個1個チェック外しましょう。そうしないと設定が解除されないようです。

この状態にして、最後に「CSS と JavaScript を、サーバ上にキャッシュする」のチェックを外します。

Head Cleanerの最終的な設定

• CSS と JavaScript を、サーバ上にキャッシュする
• CSS を最適化する
• JavaScript を小さくする
• 複数の CSS を結合する
• 複数の JavaScript を結合する
• フッタ領域の JavaScript も対象にする

この6個のチェックを入れてPageSpeed Insightsを実行してみたところ、

Head Cleanerの設定でパソコン46点、モバイル36点、2ポイントずつアップしました

JavaScript to Footerを試す

これはJavascriptをフッターに移動するだけのプラグインのようです。

プラグインを有効化すれば設定なしで有効になります。

モバイルだけが1ポイントあがって37点になりましたが、「Easy FancyBox」は機能しましたが「ページの先頭に移動する」ボタンが表示されなくなりました（汗）

なので使わないで停止・削除します。

結果2ポイントしか上がらなかった

JavaScript/CSSはコレ以上改善無理かな？あとは手動で1個1個CSSやJSをまとめたり使うか使わないか調べて読み込まないようにするしかなさそう。

そんなわけで３つプラグイン使って２つが使えなく、2ポイントしか上がりませんでしたがもっと改善していきます。