とある技術者の備忘録的情報

  • このエントリーをはてなブックマークに追加

画像を最適化してWordPressブログの表示速度を向上させるーPageSpeedの結果を受けて

画像を最適化してWordPressブログの表示速度を向上させるーPageSpeedの結果を受けて

ここでは、メディアにアップロードした画像の圧縮方法についてメモしておく。

PageSpeedでの改善を示唆される画像には、テーマに使用されている画像とメディアにアップロードした画像の2種類があるが、前者については、
参考:『画像を最適化(ロスレス圧縮)してWordPressブログを高速化する方法 』
に詳しく書かれているので参考になる。
ここでの「1.テーマに使われている画像の圧縮」が該当箇所である。

メディアにアップロードした画像の最適化

記事やアイキャッチ画像として使用している画像の最適化(圧縮)方法についてメモ。
これはWordPressのプラグイン「EWWW Image Optimizer」を使うことで簡単にできる。

EWWW Image Optimizerの設定を調整

このプラグインをインストールし終えたら設定を調整。
『設定』→『EWWW Image Optimizer』を選択して設定画面を開く。
いくつかタブがある中で、『Basic Settings』を選択。
その中にある、『Remove metadata』の項目にチェックを入れる。

この設定を行うことで、画像に埋め込まれている撮影情報(撮影したときのロケーションや、撮影日時、撮影機材など)を画像データから取り除いてくれる。ブログの画像が多くなっていき、また訪問者も増えてきたときには、「塵も積もれば山となる」ではないが、小さな積み重ねがサイトの速度に大きな影響を与えていく。

EWWW Image Optimizerの設定画面

EWWW Image Optimizerを使って画像を最適化

このプラグインをインストールしたとは、メディアをアップロードする毎に画像を最適化してくれているので、とても便利である。
下記の内容は、EWWW Image Optimizerを入れる以前の画像を一気に最適化する方法である。

1)『メディア』→『Bulk Optimize』に移動し、『Star optimizing』を押す。
EWWW Image Optimize 最適化を実行

これで分析によって最適化が必要な画像の最適化(圧縮)が一気にスタート。
画像の数によっては結構時間がかかるので、気長に待つ。
EWWW Image Optimize - 最適化の実行中

画像の最適化によるPageSpeedの結果

さて、では実際に画像の最適化が終了するとどうなるか。

画像最適化前

PageSpeedの結果(ブラウザキャッシュの設定後、画像最適化の前)

画像最適化後

PageSpeedの結果(ブラウザキャッシュの設定後、画像最適化の後)

見事に、24点も一気に改善した!!

関連記事

コメント

  1. この記事へのコメントはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク