この記事を読むのに掛かる時間: 5 分

WordPress 最適化と WebP(次世代画像フォーマット)での画像配信について

このたび，Wordpress の最適化を施したので手法を公開します．
CDN や AMP などは読み込み速度を追求するあまり，弊害がものすごく多く，うんざりされた方も多いと思います．
しかし，今回紹介するこの組み合わせであれば，少なくとも私の環境では問題なく動いているし，プラグインの相性問題や機能不全もありません．

キャッシュ

現在私は，最適化やキャッシュ関連のプラグインとしては以下のものを使用している．
が，これらが提供する機能のうち，何もかも有効にしている訳ではなく，機能を使い分けている．

Autoptimize:
- JavaScript 最適化と統合，CSS 最適化と統合，HTML 最適化を有効に．
- 画像最適化機能は不使用．
WP-Optimizer:
- ページ(HTML)キャッシュを有効に．
- 画像圧縮に関しては，後述する独自の方法で画像を管理しているので，基本的には使っていない．
Jetpack by WordPress.com:
- (画像ではなく)静的ファイルのみサイトアクセラレーターを有効に．
- 画像の遅滞読み込みを有効に．

追記:
Jetpack,Simplicity での遅滞読み込みは相性問題があるようなのでやめました．
Autoptimize にて行っています．

CDN,AMP など

CDN(Contents Delivery Network)や AMP(Accelerated Mobile Pages)などは，たしかに速い事は速い．
が，外部のサーバーに画像がキャッシュされる分，意図しない動作になった時に，どうしても手元の修正だけでは済まないのが，個人的にまったくもって好みではない．
酷い画質になるし，なにより一度キャッシュされた画像は自分では消せない(新しい画像に差し替える場合，URLごと変更する必要がある)とゆうのが受け入れられない．
せいぜいキャッシュプロキシ程度なら可愛いものだが，ここまでやるのは HTTP の設計思想に反する実装だと思っている．
そんな訳で，使用一日目にして問題に出くわして，すぐに使用をやめてしまった．
そこで，以下の最適化を導入している．

WebP

WebP(ウェッピー)とは？
Google 主導の次世代画像フォーマット．
画像のファイルサイズを劇的に小さく出来る．遅滞読み込みと組み合わせるとなお良し．

注: WebP 導入前の前提として，通常の最適化，例えば上記で示した様な静的コンテンツのキャッシングや JavaScript/CSS の最適化，画像の遅滞読み込みなど，効果の高い手法の導入は全て済ませておくべきです．
労力対効果の優先順位を考えると，これ以上やる事がないとゆうところまでやって，最後に WebP で良いと思います．

私の場合は，記事本文は Emacs の org-mode で書いて Markdown で出力し，それを WordPress に貼り付けている関係上，画像は全てローカルで管理し，サムネイル画像の作成や rsync でのサーバーとのミラーリングなどは全て自作のスクリプトで行っている．
org-mode で出力した静的HTMLバージョンとも画像を共有している為，画像保存ディレクトリ自体が独立しており，Wordpress のメディア管理機能には依存していない．
例外として，アイキャッチ画像だけは Simplicity の機能で自動生成，wp-content 下に保存されるので，その分は WP-Optimizer プラグインの画像自動圧縮を使っている．

ローカル環境での WebP サムネイル自動作成処理

まず変換ツールと，ついでにビューワーもインストール．

$ sudo apt-get install webp gthumb

使い方の例．品質係数(-q) は省略すると 75 になる．

$ cwebp -q 80 image1.jpg -o image1.jpg.webp

例えば，

image1.jpg
image1.jpg.webp
image2.jpg
image2.jpg.webp

のように，存在する全ての画像ファイルに対し，拡張子.webp を追加して新規作成する必要がある．

指定ディレクトリから .webp がない画像に対し，一括で作成(スペース入りファイルネーム対応)する例．

DIR='public_html/hogehoge'

IFS="
"
for a in find $DIR -name '*.jpg' && find $DIR -name '*.png'
do
    if  ! test -e "$a.webp" ; then
        echo "cwebp '$a' -o '$a.webp'"|sh
    fi
done

もう一度実行しても，すでにファイルが作成されているので何も起こらない．
新たな記事に使う画像がディレクトリ内に増えてから実行すると，そのファイルだけが処理される．
作り直す場合は .webp を削除してからもう一度実行．

実際のスクリプトは，ImageMagic でサムネイル作成を行ってから実体とサムネイルどちらにも .webp を作成しているし，画像ディレクトリも複数あるので，もう少しだけ複雑である．

サイト内の全ての画像を処理したら，画像ディレクトリをサーバーと同期する．
私の場合は rsync を使っているが，同期スクリプトについては本筋から離れるので今回は割愛．

続きます