こんにちは、おひとりさまブロガー和泉です！
今回も、当ブログの表示速度改善プロジェクトをやっていきます。
- 事の始まりは、Googleの「PageSpeed Tools」ツールで当ブログの表示速度を確認したことから始まりました。
まさかの表示速度評価「33/100」と、驚きの数字が出たわけです。
そこで、一番の悪さをしている「画像の最適化」を行ったことで、表示速度「58/100」に改善。
しかし、このままではまだまだ改善した言えないため、今回も、引き続き、表示速度改善を目指してやっていきます！
今回改善するのは「CSS・HTML・JavaScript縮小」の項目です。
今回も、人気のプラグインを使って改善していきますが、ちょっと問題が！
目次
まずは、「CSS・HTML・JavaScript縮小」とは？
Googleの「PageSpeed Tools」ツールで適用可能な最適化として出てきた項目の一つが、「CSS・HTML・JavaScript縮小」です。
- 詳細を確認すると、「CSS コードを縮小すると、データ サイズを大きく削減でき、ダウンロードや解析の速度を向上させることができます。」ということ。
つまり、「CSSなどを書く時に出来た空白の箇所などを消して、データを軽くしてね」っていうことなんだそうです。
ただ、空白を無くすということは、かなり見ずらくはなってしまいますよね・・・・。
でも、「表示速度が改善されるなら！」ということで今回もプラグインを使ってやってみたいと思います。
今回「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で表示速度がどう変わったか確認したところ・・・
なんと、ちょっとだけ、改善されてました！プラグイン停止したのに。
- 最初が「３３」
- 画像を最適化して「５８」になり、
- CSS・HTML・JavaScriptの縮小化で「６１」に。
でも、なんか後味悪いですが。。。
正直、少ししか改善されていないので、知識が薄い人は、無理して「CSS・HTML・JavaScriptの縮小化」をする必要はないかなと思います。
一応、下記で簡単な説明だけしておきます。
「Autoptimize」プラグインをインストール
※プラグインをインストールするときは、バックアップをお忘れなく！
１．「Autoptimize」プラグインをインストール
２．「Autoptimize」プラグインを有効化
続いて設定をしていきます。
３．プラグイン>「Autoptimize」をクリック
４．下記の３つの項目にチェックを入れます。
- HTMLコードを最適化
- JavaScript コードの最適化
- CSS コードを最適化
４．「変更を保存してキャッシュを削除」
以上です。
最後に
表示速度は改善出来ましたが「Autoptimize」プラグインは少し悪さをする可能性があるので、試す人はバックアップとってからしたほうが無難です。
今回この作業をやってみて思ったのが、「CSS・HTML・JavaScript縮小」の最適化をしたとろで、すごく大きな改善があるわけではないので、浅い知識の人は「とくにやる必要はない」かなというのが答えです。
- 表示速度の改善に、一番効果があるのは「画像の最適化」ですので、ぜひ、「放置はダメ！Compress JPEG & PNG imagesプラグインで画像を最適化させよう。」の記事を参考にやってみてください。
もし、さくらサーバーやロリポップを使ってる人は、サーバーを引っ越すことで大幅に数字が改善されることもあります。
私も過去、さくらサーバーからエックスサーバーに引っ越ししただけでだいぶ改善されたことがありました。
|
|
