WordPressを軽量化 Compress JPEG & PNG imagesを導入したらサイトが崩れた時の対処方

プラグインCompress JPEG & PNG imagesをWordPressに使う理由

Compress JPEG & PNG imagesはWordPressのライブラリに保存されなおかつブログに掲載されている画像のファイルサイズを一まとめに圧縮し軽量化してくれるプラグインです。

サイトの表示、挙動が重く表示を待つのに時間がかかったサイトがあると思います。

そのおおもとの原因は画像の大きさによるものです。

WordPressをお使いの場合はその画像ファイルを一気に圧縮してくれる便利なプラグインはいくつかあるのですが、このCompress JPEG & PNG imagesが一番効果が見られました。

 

その他にも私はWordPress用のプラグイン『EWWW Image Optimizer』を使ってみましたが、画像の圧縮はしてくれましたがサイトの軽量化を比べるとCompress JPEG & PNG imagesの方が軽くなった結果になりました。

 

サイトのページの読み込み時間を診断してくれるPageSpeed Insightsで一度自分のサイトを見てみましょう。

PageSpeed Insights

 

使いやすさはEWWW Image Optimizerの方がわかりやすいためと測定結果も1度のデータのみなので、現段階ではこの二つのプラグインを交互に使っています。

それと一度にEWWW Image OptimizerとCompress JPEG & PNG imagesは有効化にできないです。

今後どちらがよかったかで決めたいですね。


Compress JPEG & PNG imagesで画像を圧縮すると自動でclass名が付く

タイトル通り、Compress JPEG & PNG imagesを有効化にし画像ファイルをすべて圧縮した後にサイトを確認すると、サイトのデザインの一部が画像により崩れていました。

原因はクラス名が勝手に生成されてしまい本来CSSで装飾をつけていたものが一部機能しなくなっていたようです。

 

私の場合その時付いたクラス名は『class=”attachment-150×150 size-150×150 wp-post-image“』の3つです。

分かりやすく分けるとattachment-150×150size-150×150wp-post-imageです。

 

私がこのプラグインを使用にあたりデザインの一部が崩れた現象は、画像を非表示の設定の時に表示設定のままになってしまい、それにり他のコンテンツに画像がかぶってしまっていました。

 

レスポンシブデザインのサイトのためブレイクポイントでデザインが変わるようにメディアクエリーで設定していたのですが、

スマホビューに変わる際に画像を非表示設定にしていました。

新しいクラス名“attachment-150×150” “size-150×150” “wp-post-image”が加わったことで“display:none”の設定が正しく読んでくれなくなっていたため非表示にしたい時に画像が表れてしまっていました。

 

これによりサイトの見た目のビューも崩れてしまっていたので嫌でしたね…。

 

CSSにすぐに書き足して事なきを得ましたが、

WordPressはキャッシュがとても重いので編集しても反映に時間がかかり、ほかの部分が問題なのかと疑ってしまっていたため問題部分の確定にまで少し時間がかかってしまいました。

WordPressあるあるですね。



なのでこのプラグインで画像を圧縮処理した後はサイトの画像の見え方などに再度チェックをすることをおすすめします。

不具合がある場合は新しくついてしまっているクラス名があるバズなのでそこからCSSで修正を行いましょう。