[WordPress] PageSpeedに言われたのでOptiPNGで画像を最適化しました

optimize_png

GoogleのPageSpeedに画像を適切に圧縮しましょうと言われました。ということで今回はPageSpeedで推薦されているOptiPNGを利用して画像を最適化しました。

OptiPNG

こちらのGoogleのPageSpeed Insights画像最適化の解説ページでOptiPNGが推薦されています。

これを利用して画像を最適化してPageSpeedのスコアを上げましょう!
毎回ローカルでoptipngを実行してから画像をアップするのは面倒なので、今回はデプロイでChefを実行するときに更新があった画像だけに自動でoptipngを実行させることにしました。
以下の記事のときの画像をgzip圧縮するシェルに追加してoptipngを実行してからgzipを実行します。

OptiPNGインストール

brewなどでもインストールできます。

brew install optipng

今回はUbntuサーバ上で実行するので

sudo apt-get install optipng

Chefの場合はパッケージ部分に追加しておきます。

packages = %w{git vim nginx mysql-server php5 php5-fpm php5-mysql php-pear php5-curl curl optipng}
packages.each do |pkg|
  package pkg do
    action :install
  end
end

実行の時は以下のようにするのが良さそうです。

optipng -o7 filename.png

WordPress内のPNGにOptiPNGを実行するシェル

以前導入したWordPress内の静的ファイルをgzip圧縮するシェルにoptipngの処理も追加しました。

optimize_static_file.sh

#! /bin/bash

FILETYPES=( "*.html" "*.woff" "*.css" "*.jpg" "*.jpeg" "*.gif" "*.png" "*.js"  )
# specify a list of directories to check recursively
DIRECTORIES="WordPressディレクトリのパス"

for currentdir in $DIRECTORIES
do
  for i in "${FILETYPES[@]}"
  do
    find $currentdir -iname "$i" -exec bash -c 'PLAINFILE={};GZIPPEDFILE={}.gz; \
      if [ -e $GZIPPEDFILE ]; then \
        if [ `stat --printf=%Y $PLAINFILE` -gt `stat --printf=%Y $GZIPPEDFILE` ]; then \
          echo "$GZIPPEDFILE outdated, regenerating"; \
          if [ ${PLAINFILE##*.} = "png" ]; then \
            echo "Optimizing $PLAINFILE"; \
            optipng -o7 -quiet $PLAINFILE; \
          fi; \
          gzip -9 -f -c $PLAINFILE > $GZIPPEDFILE; \
        fi; \
      else echo "$GZIPPEDFILE is missing, creating it"; \
        if [ ${PLAINFILE##*.} = "png" ]; then \
          echo "Optimizing $PLAINFILE"; \
          optipng -o7 -quiet $PLAINFILE; \
        fi; \
        gzip -9 -c $PLAINFILE > $GZIPPEDFILE; \
      fi' \;
  done
done

新しい画像もしくは画像が更新されていたときに、PNGファイルであればoptipngを実行しています。
Chefのレシピには以下を追加しました。

# script to optimize png and keep gzipped file up to date
template "#{node['wp_install']['install_dir']}/optimize_static_file.sh" do
  source "optimize_static_file.sh.erb"
  owner node['wp_install']['user_name']
  group node['wp_install']['user_name']
  mode 00755
end

execute "optimize static file" do
  command "./optimize_static_file.sh"
  cwd node['wp_install']['install_dir']
end

これでデプロイでvagrant provision実行時にoptipngをgzipを行います。
初回はかなり時間がかかるのでできればローカルで実行したほうがいいです。

効果検証

以下がOptiPNGを実行する前のPageSpeedの診断結果です。

13個の画像を最適化してくださいと言われました。

以下がOptiPNGを実行した後の診断結果です。

警告される画像の数は減りましたが、いまだに7個の画像は警告されたままです。
再度optipngを実行してもalready optimizedと言われてしまいます。

$ optipng -o7 calendar.png
** Processing: calendar.png
18x18 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 8 bits/pixel, 65 colors (41 transparent) in palette
Input IDAT size = 404 bytes
Input file size = 1314 bytes

Trying:
  zc = 9  zm = 9  zs = 0  f = 0		IDAT size = 161
  zc = 9  zm = 8  zs = 0  f = 0		IDAT size = 161
  zc = 8  zm = 9  zs = 0  f = 0		IDAT size = 161
  zc = 8  zm = 8  zs = 0  f = 0		IDAT size = 161
  zc = 7  zm = 9  zs = 0  f = 0		IDAT size = 161
  
                  # 中略 #
                               
calendar.png is already optimized.

警告される画像が無くならなくて残念でしたけど若干読み込みスピードが早くなったんじゃないでしょうか