画像を一発で圧縮してサイトを高速化!EWWW Image Optimizerの設定と使い方

      2017/02/15

前回からサイトの最適化についてブログを書いていますが、今回はアップロード済みの画像を圧縮し、最適化する方法をまとめていきます。

.htaccessに追記で圧縮を有効にする【PageSpeed Insights】
 前回はモバイルファースト導入に向けて、サイトのユーザエクスペリエンス向上するためPageSpeed

今回はWordPressプラグインの「EWWW Image Optimizer」を使った画像最適化方法を説明します。現在はウェブでは英語表記の説明が多いが、今は日本語表記になっているので問題はないでしょう。

作業としては簡単に終わるので是非導入してみてください。

Sponsored Link

EWWW Image Optimizerの使い方

画像の最適化には、いくつかプラグインがあるのですが、今回は「EWWW Image Optimizer」一択です。

EWWW Image Optimizerをおすすめする理由

  • 画像アップ時に自動でファイルを圧縮してくれる
  • 過去にアップした画像を検出し、一括で圧縮できる
  • 画像圧縮の処理が早い

EWWW Image Optimizerをダウンロードする

▶️EWWW Image Optimizer

ダウンロードし、有効化してください。

EWWW Image Optimizer設定方法

それでは、設定方法を解説していきます。要確認事項のみ説明しますので、最低限これだけ確認ください。

基本設定:

  • はじめからチェック入っていると思いますが「メタデータを削除」にチェックを入れて下さい。

高度な設定:

  • 「無効にするpngout」にチェック
  • 「optipng最適化レベル」「pngout最適化レベル」はデフォルトの2のままでOK

変換設定:

「コンバージョンリンクを非表示」にチェックを入れて下さい。必要ないと思うので非表示推奨ですが、必要な方はチェック無しでもOKです。

全て確認ができたら、保存を忘れずクリックしてください。

アップ済み画像を一括で圧縮する方法

それでは、早速アップロード済みのメディアを圧縮最適化していきます。

写真のサイズ、数量により異なりますが、作業には30分〜ぐらいはかかりますのでボタンを押して放置しておける都合のよい時間に進めてみて下さい。

「メディア」→「一括最適化」をクリックすると、上の画面になりますので「最適化されていない画像をスキャンする」をクリックして下さい。

スキャンはそれほど時間はかかりません。終わったら「最適化を開始」をクリック。ここで放置に入ってOKです。

グラフ左に「最適化済みアイテム数」、右側に「残り時間」が表示されます。

必要な場合は「最適化を中断」も可能です。

実際、作業状況を見ていると500B〜40KBなど1メディアで圧縮出来ますので「塵も積もれば山となる」ではないですが、かなりの違いが出てきます。アクセスが多いサイトでは尚更影響が大きいでしょう。

画像圧縮後のサイト評価

サイト高速化に向けて、PageSpeed Insightのポイントが前回のリソースの圧縮終了後からどれぐらいの変化があったのか見ていきましょう。

前回は70/100でしたが

画像圧縮をEWWW Image Optimizerで行った結果73/100で3ポイントアップする事ができました。

サイトにより1〜2ポイントの場合もありますが、今回の最適化も是非導入した方がよい方法と言えるので是非試してみて下さい。

次はCSS、HTML、Javascriptを縮小する方法を解説していきます。

WordPress CSS,HTML,JavaScriptを縮小最適化してブログを高速化する方法
前回から、サイトのユーザエクスペリエンス数値を確認するPageSpeed Insightのポイント上

 - SEO対策, WordPress, プラグイン