先日、当ブログのページ読み込み速度をGoogle Insightsで計測したらちょっと遅い感じがしました。
このブログの場合はゲームの機能を作成する記事がメインなので文章とプログラムだけでは伝わり辛い所があり画像を多用しています。
さらに画像を小さくすると全体像がわからなくなる事も多く画像は大きめで作成してあります。
その為、画像の読み込みだけでも結構な時間がかかると思われます。
そういったわけで画像のサイズを落としてサーバに再アップし、少しでも読み込み速度が早くなるようにしたいと思ったわけです。
自分のパソコンにあるPNG画像の圧縮をPNGooで行う
まずはローカルにあるブログで使用している画像をすべてサイズダウンしてみました。
PNG形式の画像は
で配布されている
GUIのPNGooをクリックしWindows版のアプリケーションソフトをダウンロードしてサイズダウンしました。
ダウンロードしたPnGooファイルを解凍し、PNGoo.exeを実行すると↓のような画面が開きます。
圧縮したいファイルを下の白い空間にドラッグ＆ドロップし、Output Directoryに圧縮したファイルの出力先を指定します（Browse…ボタンを押す）。
Outputの上のチェック項目で
Output to Same Directory(Overwrite PNGs）をチェックすると同じフォルダのオリジナル画像を上書きします。
Output / Overwrite Even if Larger Than Originalにチェックするとオリジナル画像よりサイズが大きくなった場合でも上書きします。
圧縮して上書きしてしまうと画質が粗くなりすぎた時に元に戻せないのでオリジナルフォルダと圧縮用フォルダは分けた方がいいと思います。
Compression TypeのColour？Settingsを押すと圧縮する時の色の数の設定が出来ます。
色の数を減らせばそれだけ圧縮率も高まりますが画像が粗くなります。
GIF動画を圧縮してくれるサイトcompressor.ioを使って圧縮
次にgif動画の圧縮です。
↑のサイトでファイルをアップロードすると圧縮してくれます。
TRY IT!をクリックし、Lossy（不可逆）、Lossless（可逆）を選択し、自分のパソコンにある画像ファイルをドラッグ＆ドロップすると画像を圧縮してくれます。
Lossyは元に戻せないけど圧縮率が高まります。Losslessは元に戻せる圧縮方法です。
とりあえず画質を落としてもサイズを減らしたかったわたくしはデフォルトのLossyですべて圧縮しました。
圧縮が終わると圧縮前と圧縮後のファイルサイズの表示がされ、『DOWNLOAD YOUR FILE』を押すと圧縮したファイルをダウンロードする事が出来ます。
これでgif動画の圧縮も終わりました。
ブログで使用している画像を全部圧縮すると約半分まで容量が減りました！
すごいですね。
ブログの画像を入れ替える作業を失敗した
それでここからが問題です。
わたくしはアップロードしてる画像を記事毎にメディアファイルから削除し新しい画像を記事編集画面の上にある『メディアを追加』から追加し再度記事に載せるということをやっていました。
これを少しづつやれば完全に出来るのは出来るんですが記事が130以上あるのにちまちまやってたんでは埒があかなくなりやめました・・・・(-.-)
ああ！面倒くさい！と思ってFFFTPを使ってアップロードしているファイルを削除して全部入れ替えようと思ったんです。
記事編集画面の『メディアを追加』から追加した画像ファイルは（設定の問題？）『2016/08』等のフォルダ毎に分けられていました。
これをFFFTPで新しい日付のフォルダから削除していきました。
次にサーバ側に画像用のフォルダを作成し、そこに圧縮した画像ファイルを全部アップロードしました。
アップロードが完了したら記事の画像リンク先がすべて変わってしまっているので、WordPressのプラグインであるSearch Regexで元のリンク先を新しい画像フォルダに
一括変換して終了！
Search Regexを使うと全記事から特定の文字列を検索して一括変換が出来るので非常に便利です。
これで画像の入れ替えは終了と思っていたんですが、記事を見ると画像が表示されません。
キャッシュが残っているからかな？と思ってキャッシュをクリアしても表示されません。
んーよくわからん。
と思っていてメディアのライブラリを見ると消したはずの『2016/08』画像フォルダへのリンクが残っています。
が、当然画像自体は消してあるので画像は表示されません。
画像ファイルは消したはずなのになんでだ？と思っていたんですが、どうやらWordPressで使う画像はWordPressで使う画像と言う事で登録する必要があるっぽいですね。
詳しく調べてないのでわかりませんが・・・。
つまりFFFTPでアップロードした画像ファイルたちはWordPressで使用出来るようにしないといけないわけです。
メディアに登録されている画像ファイルを全部削除しMedia from FTPプラグインでメディア登録
というわけでメディアのライブラリに登録されているファイル達を全部削除する事にしました。
この間中途半端にメディアのライブラリを消したりWordpress Flash Uploaderで画像ファイルのメディアファイル登録をしてしまっていて、ライブラリに同一ファイルがいっぱい登録されたり、メディアファイルに登録処理自体が止まってしまったり悪戦苦闘しました・・・・(^_^;)
WordPress Flash Uploaderがうまく動作しなかったので、Media from FTPプラグインに変更しそちらでメディア登録する事にしました。
これはメディアのライブラリを全て削除した後にFFFTPで画像ファイルをアップし、Media from FTPで『メディアに登録』をし直しました。
これでようやく画像ファイルのすべての交換が完了しました！！
画像の圧縮をした結果
こんな大変な事（自分で大変にしてしまった）はもう２度としたくないので同じような事をしようと思っている方の参考になればと記事に残しておきます・・・。
画像を使う時は自分でまずサイズダウンしてからアップロードし、WordPressのEWWW Image Optimizerの画像最適化でさらに画像を最適化するというのがいいですね。
アップロードする前にサイズダウンするのは手間がかかりますが、後で全部変更するとなるとものすごい手間になってしまうので、
気をつけましょう・・・・(-.-)
で、ブログの表示速度が早くなったかどうかはよくわかりません・・・・(^_^;)
Google Insightsで計測してもほぼ変わらなかったんですよね。
わたくしが使用しているWordPressテーマのSimplicityはキャッシュ系プラグインとは相性が悪いという事でキャッシュを使用していなかったんですが、WP Fastest Cacheというプラグインを使用したところWordPress Popular Postsにも影響が出なかったのでこちらを使ってみました。
その後Google Insightsでスピードを計測したところ15点ぐらい点数がアップしてました。
うーむ、画像を交換するよりやっぱりキャッシュの影響の方が多大ですな・・・(-.-)
