【WordPressプラグイン】画像の圧縮・最適化で転送量激減！SEO効果あり！【EWWW Image Optimizer】
2016/02/11
つい昨日、サーバーを「お名前.comの共用サーバー」から「さくらのスタンダード」に引っ越しました。
そして、2週間のお試し期間は転送量を制限するよ！ということで、503エラー連発して現在ヒィヒィ言ってますｗ
何とかせな！と思って今日一日、色々試行錯誤してました。
一応、さくらのレンタルサーバーには「リソースブースト」とかいう緊急的に転送量などの制限を緩和してくれる機能があるので、その実力を見ようと根本の解決策は日付が変わってから行う予定です。
なので、今回は焼け石に水かもしれませんが、画像の最適化（再圧縮）をいい感じに行なってくれる、プラグイン「EWWW Image Optimizer」を入れることにしました！
ずっと前から存在は知っていましたが、私はあんまりプラグイン入れたくない人なので、ちょっと避けていました…。
しかし今はそんな事言ってる場合じゃない！という訳で、ローカルで試したりステージング環境で試してみて問題無かったので導入しました！
スポンサーリンク
EWWW Image Optimizer のインストール方法
公式プラグインなので、WordPressの管理画面から「プラグイン」→「新規追加」→「EWWW Image Optimizer」を検索→「今すぐインストール」とお馴染みの手順です。
インストールが完了したら、「プラグインを有効化」で有効にしておきましょう。
ちなみに「Cloud」が付いているものが隣にありますが、こっちは自分のサーバーに画像を置かずに、よそのサーバーで管理してくれるもの。当然お金がいるので、説明しません！
EWWW Image Optimizer おすすめの設定
基本的にはデフォルトのままで問題ないです。
そのままサクッと進めてしまって大丈夫ですが、一応全てではありませんが載せておきますね。
こだわりたい人だけ好きに設定すると良いと思います。
何か他の人の導入記事を見てると、よく分からないからか、おかしな理由を付けて「pngout」を入れてはいけないみたいなことが書かれてますが、本当は入れた方がいいです。
画像はChromeの翻訳機能を利用して翻訳かけていますが、実際は英語です。何となくは理解できるのでオススメします！
Basic Settings（基本設定）
左端のCloud Settings（クラウド設定）は有料なので省きます。Cloud版あるのに何でこっちにもあるんだろ…。
Debugging（デバッグ作業）
チェックしておくと、実行中の関数名や、より詳しい情報を表示してくれるようになる開発者向けのオプション。
ローカルで試すと、日本語などのマルチバイトを含んだファイルが圧縮されずにスキップされてたので、ソースを追うのに結構ありがたかった。けど解決に時間かかりそうだったので最後まで追ってません(；・∀・)
マルチバイトのファイル名の画像がそんなに大量にあるわけでもないし、ステージング環境で試してみたら、問題なく圧縮してくれたので本番に適用しました…！Windows上だと何か問題があるのかもしれませんね。
Remove metadata（メタデータの削除）
デジカメとかスマホで撮った写真とかだと、位置情報とかを含んでいるので、そういった画像以外の付加情報を削除してくれます。
デフォルトでチェック入っているので、外さないように！
Lossy JPG optimization（ロッシーJPG最適化）
圧縮率を高くして、よりファイルサイズを抑えるようにします。パッと見では分からないけど、かなり情報が削がれるので多少汚くはなります。本当は有効にしたいんですが、有料オプションなので本当にファイルサイズを気にする人以外は無くても良いでしょう。
Lossy PNG optimization（ロッシーPNG最適化）
上のJPGのPNG版。これも有料オプションです。色数あまり多くない画像ならかなりの圧縮率になると思います。お金かかるので試してません！
Bulk Delay（バルク遅延）
一括で画像に圧縮をかける時に、時間をあけるか。CPU専有しすぎてサーバー屋さんに怒られるとか、結構かつかつで稼働してるし、アクセス多い時間帯だし…。みたいな時に感覚をあけると良いかもしれない。今の私の状況ですね(ﾟ∀ﾟ)そのままぶん回しましたけど！ｗ
Advanced Settings（高度な設定）
optipng optimization level（optipngの最適化レベル）
レベルが高い方がより圧縮されるが、4以上にしても効果はあるかは怪しいとのこと。デフォルトは2だけど、こだわりたい人は3とか4に上げても良いかもしれない。
pngout optimization level（pngoutの最適化レベル）
レベルが低い方がより圧縮されるが、その分、時間がかかる。
Scheduled optimization（最適化のスケジュール）
指定したフォルダから定期的に画像を探して圧縮をかけます。
Folders to optimize（最適化するフォルダ）
上でスケジュールした最適化で、画像を探すフォルダのパス。相対パスでなく、フルパスで記載する
Deferred Optimization（遅延最適化）
アップロード後にすぐに最適化を行わず、後からwp_cronを経由して最適化される。
Disable Automatic Optimization（自動最適化を無効化）
アップロードと同時に最適化を行わないようにする。
Include Media Library Folders（メディアライブラリフォルダを含める）
自動最適化を無効にしていて、スケジュールされた最適化でメディアライブラリフォルダも対象にする場合にチェックする。
Disable Resizes（サイズ変更の無効）
アップロード時にリサイズされる画像の作成有無と最適化を行うかをそれぞれのサイズで指定できる。
Use System Paths（システムパスを使う）
既に画像最適化に使うツールがサーバーにインストールされていて、インストールされているものを使う場合にチェック。
disable jpegtran（jpegtranを無効化）
jpegの最適化ツールを無効にする。GoogleのPageSpeed Insightsで指摘を受けないためには必要。
disable optipng（optipngを無効化）
pngの最適化ツールを無効にする。GoogleのPageSpeed Insightsで指摘を受けないためには必要。
disable pngout（pngoutを無効化）
pngの最適化ツールを無効にする。「pngout」のライセンス上、同梱出来ない為に、デフォルトが無効になっている。
使う必要が無いというわけではないので、チェックを外して有効にすることをオススメします。
有効にすることで起こる問題は後でお伝えします。
disable gifsicle（gifsicleを無効化）
gifの最適化ツール(gifsicle)を無効にする。GoogleのPageSpeed Insightsで指摘を受けないためには必要。
pngoutを使うための手順
めんどくいのかと思いきや、簡単に出来ました！
「disable pngout」の設定でチェックを外してから設定を保存すると、以下のエラーが表示されます。
pngout: Missing Install automatically | manually – Pngout is free closed-source software that can produce drastically reduced filesizes for PNGs, but can be very time consuming to process images
automaticallyのリンクをクリックしたら、pngoutが自動的にダウンロードされて、pngoutを使えるようになるのでエラーが消えます。
これだけのことなので、pngoutは有効にしておくことをオススメします。optipngだけと比べて、更に圧縮率が1％程上がりました。
他にも設定項目はありますが、説明はここまでです。他もテストしてみて、紹介したい項目があれば追記します。
既にある画像を一括で最適化する
プラグインをインストールしてから、新たに追加した画像は最適化されるのですが、今まで追加してきた画像はそのままの状態になっています。
なので、メディアに登録されている今までの画像を、別サイズに縮小されたものも含めて一括で最適化させます。
メディアのサブメニューにある「Bulk Optimize」を選択して、Optimize Media Libraryの「Start optimizing」で最適化を開始させます。
画像の最適化が始まり、圧縮されてサイズがどれだけ削減出来たかの情報と、かかった時間がログとして表示されます。
性能の良いサーバーでもそれなりに時間がかかるので、お茶でも飲んでゆっくりして下さい。私の場合は2～3時間かかりました。
一応CPUパワーをがっつり使う作業なので、あまり人が見ていない時間帯に行うことをオススメします。
ローカル環境で試してみた結果、こんな感じになりました。
最適化前のuploadsディレクトリが、サイズ：1.15GB（1,241,423,992バイト）
最適化後のサイズ：830MB（870,927,062バイト）
約8％のファイルが、マルチバイト文字を含むファイル名で最適化かからなかったので、その分を省いて全体の圧縮率を計算すると57％になった。
(870,927,062 – 1,241,423,992*0.08) / 1,241,423,992*0.92 ≒ 0.57
圧縮率はJPGが90%前後で、PNGが20～40％といった感じです。iPhoneのスクリーンショットをそのまま使ったりしてたので結構効果出ますね。
とりあえず、これだけで画像の転送量が4割強削減されそうです( ･`д･´)
画像最適化したことによる効果
データ転送量の抑制
30日の17時頃に一括画像最適化をかけて、20時頃に完了しました。
そして30日のリソース使用状況を見ると、PV数は前日の2倍以上になっているにも関わらず、転送量は1.5倍未満で抑えられています。
今回の画像最適化が終日に効いたわけではないので、明日以降は更に効果が見込めるはずです。
それと30日の午前1時頃に「リソースブースト」をかけたおかげで、多少制限が緩和されたのか503エラーがだいぶ減ってくれました。一応お試し期間中でも「リソースブースト」は効果があるようです。それでもまだエラーがかなり出てるので、お試しの域を脱してはいない模様…！
ちなみにPVが2倍になってるのはバズったとかではなく、DNSの情報が反映され始めて、お名前.comの旧サーバーから、さくらの方に流れてきた感じなので、まだ増える可能性があって更にヤバいｗ
というわけで、次なる対策を急いでしなければ！！
Googleからの評価を高められる（SEOで有利に働く）
Google検索の順位を決めるのに、サイトの表示速度も評価項目として上げられています。
そしてその表示速度の指標となるデータは、Googleのサービス「PageSpeed Insights」で計測できて、改善出来る項目とその対応方法を教えてくれます。
ここで「画像を最適化する」という項目であげられている指摘が、今回の対応によって改善します。
最初は自分でアップロードした画像ファイルが大量に羅列されていました。
今回の対応によって、自分でアップロードしたファイルは無くなり、外部サービスの項目のみに減らす事ができました。
これにより評価が多少は向上することになります。
計測する時間や読み込まれる広告画像など、色んな要素が重なって計測する度に評価点にバラつきがあるので一概には言えませんが、Google先生の指示に従って一個ずつ潰していけば良くなっていきます。
ユーザーの満足度もあがる
ページの表示速度が向上して、通信料も削減されるのでユーザーにとってもメリットが大きいです。
うちのサイトはユーザーの事を思って、こういった取り組みをしています！と宣言しておけば評価もして貰えると思います( ･`д･´)
終わりに
とりあえず、お手軽に出来る画像の最適化プラグインを導入してみましたが、思った以上の効果があってもっと早く導入しておけば良かったなと思いました！
転送量を抑える効果は抜群で、SEOにも効果があるので、是非「EWWW Image Optimizer」を入れてみることをオススメします。
それでは次回は更なる転送量を抑えるべく抜本的な対策を取りたいと思います！
乞うご期待！
2016/2/5追記：次の対策を書きました！凄い効果です( ･`д･´)
【WordPressプラグイン】無料CDNで転送量激減！高速化でSEO効果あり！【Jetpack Photon】