2017/07/13

Autoptimizeプラグインは危険!?CSS・HTML・JavaScript縮小には便利ですが。

 
Autoptimizeプラグイン

おひとりさまブロガー和泉
ブログアクセスアップ・ネット物販を得意とするネットビジネスのプロです。
趣味はグルメ・一人旅・映画鑑賞です。
お陰様で月間17万PV達成しました。

パワーブログ講座やっています。

こんにちは、おひとりさまブロガー和泉です!

今回も、当ブログの表示速度改善プロジェクトをやっていきます。

事の始まりは、Googleの「PageSpeed Tools」ツールで当ブログの表示速度を確認したことから始まりました。

まさかの表示速度評価「33/100」と、驚きの数字が出たわけです。

そこで、一番の悪さをしている「画像の最適化」を行ったことで、表示速度「58/100」に改善。

しかし、このままではまだまだ改善したは言えないため、今回も、引き続き、表示速度改善を目指してやっていきます!

今回改善するのは「CSS・HTML・JavaScript縮小」の項目です。

今回も、人気のプラグインを使って改善していきますが、ちょっと問題が!

パワーブログ講座やっています。

まずは、「CSS・HTML・JavaScript縮小」とは?

Googleの「PageSpeed Tools」ツールで適用可能な最適化として出てきた項目の一つが、「CSS・HTML・JavaScript縮小」です。

Autoptimizeプラグイン

  • 詳細を確認すると、「CSS コードを縮小すると、データ サイズを大きく削減でき、ダウンロードや解析の速度を向上させることができます。」ということ。

つまり、「CSSなどを書く時に出来た空白の箇所などを消して、データを軽くしてね」っていうことなんだそうです。

Autoptimizeプラグイン

ただ、空白を無くすということは、かなり見ずらくはなってしまいますね・・・・。

でも、表示速度が改善されるなら!ということで今回もプラグインを使ってやってみたいと思います。

今回「CSS・HTML・JavaScript縮小」改善のために使うプラグインが「Autoptimize」プラグインです。

「Autoptimize」プラグインとは?

「Autoptimize」プラグインとは、CSS・HTML・JavaScriptのファイルを縮小して、高速化にしてくれる優れものものです。

  • 「CSS・HTML・JavaScript縮小」のためのプラグインとして、とても人気のあるプラグインです。

これ、めちゃくちゃ便利なプラグインなんですが、、、

私のブログで使ってみたら、レイアウトが変わってしまいました!

びっくり。びっくり。

「Autoptimize」プラグインを導入したら、レイアウトが変わった!!

「CSS・HTML・JavaScript縮小」のために「Autoptimize」プラグインを導入したら、なんと、レイアウトが変わってました・・・!

  • 「Autoptimize」プラグイン導入前↓↓

  • 「Autoptimize」プラグイン導入後↓↓

なんてこった!!

ヘッダーが真っ白!見出しが真っ白!

  • ということで、「Autoptimize」プラグインを速攻停止!!

無事、直りました。とくに壊れているところは見当たらず。

テーマによるかもですが、このプラグイン、悪さしますね。

自分でCSSやJavaScriptとかいじれる人には問題ないかもですが・・・こういうこともあるということは念頭に置いておいてください。

ただ、プラグインを停止したあとに、最適化されたのか確認したら・・・

「Autoptimize」プラグインを導入したことで、最適化されたのか?

悪さをした「Autoptimize」プラグインを導入して、そっこうで停止したけれども、PageSpeed Insightsで表示速度がどう変わったか確認したところ・・・

なんと、ちょっとだけ、改善されてました!プラグイン停止したのに。

  • 最初が「33」
  • 画像を最適化して「58」になり、
  • CSS・HTML・JavaScriptの縮小化で「61」に。

でも、なんか後味悪いですが。。。

正直、少ししか改善されていないので、知識が薄い人は、無理して「CSS・HTML・JavaScriptの縮小化」をする必要はないかなと思います。

一応、下記で簡単な説明だけしておきます。


スポンサーリンク

「Autoptimize」プラグインをインストール

※プラグインをインストールするときは、バックアップをお忘れなく!

1.「Autoptimize」プラグインをインストール

Autoptimizeプラグイン

2.「Autoptimize」プラグインを有効化

Autoptimizeプラグイン

続いて設定をしていきます。

3.プラグイン>「Autoptimize」をクリック

4.下記の3つの項目にチェックを入れます。

  • HTMLコードを最適化
  • JavaScript コードの最適化
  • CSS コードを最適化

Autoptimizeプラグイン

4.「変更を保存してキャッシュを削除」

以上です。

最後に

表示速度は改善出来ましたが「Autoptimize」プラグインは少し悪さをする可能性があるので、試す人はバックアップとってからしたほうが無難です。

今回この作業をやってみて思ったのが、「CSS・HTML・JavaScript縮小」の最適化をしたとろで、すごく大きな改善があるわけではないので、浅い知識の人は「とくにやる必要はない」かなというのが答えです。

パワーブログ講座やっています。
 

Copyright© おひとりさまですブログ。 , 2017 All Rights Reserved.