画像圧縮・WEBサービス「Optimizilla」でWEBサイトの高速化をはかる

godzilla-photo-min

どうも、のすけ (TwitterLogo-min@nosuke_sns) です。久々に速度を測定したらサーバーのスピードが落ちていました。

▼PageSpeed Insights

optimizilla
▼GTmetrix

optimizilla-min
当サイトは画像を結構使います。画像圧縮にはかれこれ1年ほど「Ewww image optimizer」を使っていますが、先日の検証でWEBサービスを使って圧縮した方が圧縮率が高いということがわかりました。

SPONSORED LINK

photo by Luis Villa del Campo

▼目次

  1. 「Optimizilla」で画像圧縮
  2. 画像圧縮後に再計測

「Optimizilla」で画像圧縮

optimizilla2-min

画像を圧縮するためのWEBサービスは「Optimizilla」が圧縮率高めで良さげだったので今回このツールを使うことにしましょう。一度で最大20個の画像ファイルをアップロードすることができます。
参考: 画像を軽くするなら高圧縮率の「Optimizilla」がお勧め

と思い立ったのはいいですが、WEBサービスで圧縮する場合一つ一つアップロードする作業になってくるので記事数が多いとかなり手間のかかる作業なんです。当サイトの場合現時点で330記事程なのでそれを手作業でやるということになります。それを全てとなると膨大な時間がかかってしまうので今回は20記事分圧縮してみました。

これが「Ewww image optimizer」だったらワンクリックで放置しておくというだけなんですけどね、プラグインでかかる負荷と圧縮率の高さを考えたらこの作業をする価値はあるかと思ったので今回やってみることにしました。

どの位かかるかわかりませんがとりあえずやってみましょう。WordPressにアップした画像を保管していない場合は一度自分のサイトからダウンロードして「Optimizilla」にアップロードするという流れになるでしょう。

1. サイトから画像をダウンロード

2. 「Optimizilla」にアップロード

3. ZIPファイルを解凍

4. ダッシュボードから元と同じ位置に画像をアップロード

という流れになるかと。サイトから画像をダウンロードする場合は画像でいっぱいになってしまうので、今回の作業用のフォルダを新規で作るとやりやすいかもです。

保存する時の名前をそのページのURLのパーマリンクにしておくとあとでわかりやすいので、いっきにダウンロードできますし効率化できるでしょう。

「http://独自ドメイン.[▼ここを画像ファイル名に]/」

作業工程

20ページ分ダウンロードしたところで、この分だけを一度「Optimizilla」にアップロード→ 解凍 → WordPressにアップロードという流れをやってみます。

画像をいっきに20個ほどアップします。JPGのクオリティはデフォルトで90ですが充分圧縮されているのでこのままで充分です。

optimizilla3-min

このクオリティを下げるとさらに圧縮できますが、それだと一個一個設定する必要があるのでさらに手間がかかって大変です。

さあ、そのファイルをダウンロードしてみます。次にZIPファイルになっているのでこれを解凍します。

WordPressのダッシュボードから「Optimizilla」で最適化された画像をあげるのですが、その前に「Ewww image optimizer」を使用している場合「無効化」しておきます。今回調べてわかりましたがこのプラグイン結構重いようなんです。

そして記事の編集から最適化された画像に取り換えます。最適化された画像は「min.拡張子」という名前が追記されているのでわかりやすいです。

ここで作業が終わりではなく最後に「メディアライブラリ」から最適化前の元画像を完全削除しちゃいましょう。これが今回の作業工程の流れです。保管されているライブラリには「記事タイトル名」が表示されているのでそれを目印に「min.拡張子」が付いていない画像を削除すればOKです。

元のデータは削除するわけですから「アイキャッチ画像」も忘れずに「min.拡張子」の画像に変更しておきます。
optimizilla4-min

何よりこの「メディアライブラリ」から元画像を削除という作業が一番大変かもしれません。GIFや音楽ファイルを扱っている場合はうっかりそれも削除しないように気を付けなければいけませんし。結構骨のおれる作業です。

LIG_h_agenttokeiwomiru_TP_V-min

結構時間かかってしまいましたが20記事分の圧縮が完了。元画像データも「メディアライブラリ」からしっかり削除しておきました。

画像圧縮後に再計測

20記事であまり変わらないかと思いますが、一応計測してみましょう。

▼PageSpeed Insights
optimizilla2

▼GTmetrix
optimizilla5-min

少し上がったのかな?という感じです。このちょこっと軽量化されたのはプラグインの「Ewww image optimizer」を無効化したというのもあるのでしょう。

しっかし重いですね… 元々は「A」評価でしたから記事が多くなるにつれ当然重くなるようです。まだまだ高速化への道のりは遠いです。

このように画像圧縮用のWEBサービスを使うと多少なりとも確実に高速化につながります。でも手間が増えるわけですしプラグインを使うより面倒なことは確かです。

でも「Ewww image optimizer」を無効化にしたらこの画像圧縮をし続けなければデータ量が膨れ上がってサイトの遅延につながってしまうんですよね。この作業をクラウドソーシングで任せれないのかという感じです。

使った感覚で1日に数記事上げる場合は一度圧縮なしであげて仕上げに「Optimizilla」でまとめて圧縮をかけるのもありだと思いました。とりあえずあと300記事ほど全て圧縮したらまた報告したいと思います。

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!