改装作業完了 ~経緯とか

ここ数日当サイトが見苦しいことになっていましたが、現時点(6月16日17:40)を以て、従来の表示に復旧しました。

そもそも事のはじめはトップページの読み出し時にサーバに凄い負担が掛かることが判明したところから始まります。なぜかトップページのみ読み込み時にCPU負荷が最大で40%程度まで上昇するするようになっていました。

そのためテーマの設定やPHPなどの設定を一通り見直していましたが一向に改善の気配は無く、むしろカテゴリー記事一覧等の別の場所では問題無いのにトップページだけで問題が起きることに謎が深まるばかり。

また、LightsailからWebArena Indigoの4CPU/4GBメモリプランに移行したタイミングでもある為移行ミスなども疑いましたがそれもないことを確認。

そうやっていろいろ見ていると、ふとトップページのサムネイル画像がおかしなことになっていることに気付く。通常、Luxeritasのトップページのサムネイルは表示される場合100×100、150×150、320×180のいずれかを選んで表示するのだが明らかにそれらのサイズには当たらないサムネイルが表示されている(具体的にはウマ娘のゲーム画面の縦長イメージがそのまま表示されていた)。そこでトップページのソースを確認するとどうもサムネイル用画像としてオリジナルの画像ファイルが呼び出されている疑いが発生する。

検証のため、他の大手プラグインであるCocoonやLightningを使用してトップページを表示するとこちらでは問題無くサムネイルが想定通りのサイズで表示される。これはLuxeritasが悪いのか。ただ、別サーバにWordpressを構築して試験すると問題無く指定されたサイズのサムネイルが表示されるのでテーマそのものには問題なさそう。

と、そのときあるプラグインの存在に思い当たる。WP Offload Media (Lite)。メディアライブラリに登録された画像をS3等のオブジェクトストレージに保存し(設定によっては)CDNを通じてオブジェクトストレージから画像を配信するようにするプラグイン。
このプラグインの設定に、メディアライブラリに登録した画像をオブジェクトストレージにアップロードした後、ローカル側の画像を削除するオプションが存在し、従来はこの設定を有効にして使用していた。そうすることでサーバローカル側では画像のデータサイズを気にすること無くサーバを選択できるようになる為だ。これはHDD(SSD)容量が比較的少ないプランが主流な現在のVPSに非常にマッチした方法だったのだが・・・

実際、先ほど別サーバでLuxeritasの挙動を確認した際には当該プラグインを導入していないためメディアライブラリの画像は全てローカルに保存されている。
そこで、検証サーバにてWP Offload Media (Lite)を有効にしてアップロード後メディアを削除する設定を有効にしてメディアライブラリに画像を追加した場合と、無効にして追加した場合の画像をそれぞれ違う記事のキャッチアップ画像にしてトップページを表示したところ、予想通りローカル画像を削除した場合はサムネイルの表示が崩れる。

これ、実に不思議で例えばCocoonやLightningでは何の問題も無く指定したサイズのサムネイルが表示されます。それにLuxeritasの場合だってサムネイルの表示が崩れるかどうかの違いはキャッチアップ画像に指定した画像がローカルに存在するかどうかですが、実際にサイトで呼び出している画像はオフロード先(自分の設定ではCloundFront経由でS3のバケット内の画像を参照)を見ているんです。

というわけで、原因はなんとなく分かり、対策としては以下の2案を検討した。

  • WP Offload Mediaのローカル画像削除機能を無効化してLuxeritasを使用し続ける。ローカルに画像が蓄積される問題についてはLightsailからIndigoに移転したことで余裕が出来た事と、Ewww Image Optimizerを使用して画像サイズを圧縮することで対応する。
  • WP Offload Mediaのローカル画像削除機能を有効にしても問題無くサムネイルが表示できるCocoonまたはLightningにテーマを変更する。

結局の所、サーバのHDD容量の増加等からローカル画像の蓄積は目を潰れる範囲と考えLuxeritasの継続使用を選ぶこととした。Cocoon/Lightningともに利用者が非常に多いテーマだけにカスタマイズもしやすく、比較的簡単に今までの見た目に近いページを作る事はできたのだが、細かいところではやはり使い慣れたLuxeritasの方がよい部分も多くこの結果となった。

そして、Wordpressを再構築してデザインをあらかた復旧した上で記事データを復元し、そこから各記事の画像を個別にアップロードし直す作業を続けて現在に至ります。

その際に気付いたTipsなのですが、古い記事の画像をダッシュボードメニューのメディアライブラリから纏めてアップロードしてしまうと全画像の画像がアップロード日時で保存されてしまうんですが、過去の投稿記事を編集状態にして編集画面からメディアライブラリを使用して画像をアップロードすると記事の投稿日でフォルダが生成されます。

とにかく、これで復旧です。