【JIN高速化】ピックアップコンテンツpng画像とバトってjpgへ変えた話
WordPressのテーマ、JINで「ピックアップコンテンツ画像を圧縮してアップロードしたのに、サイズがデカすぎねぇ！？」というトラブルに遭遇しました。
解決したら読み込みスピードが約1秒早くなり、GoogleのPageSpeed Insightsでスコアが約5点上がった話です。
JINはブロガー界隈では有名なテーマ。なので「ググれば解決っしょ！」と思ったら全くヒットしない謎の現象が起きていたので、メモ。
以下当てはまる人に役立つはずです。
- WordPressテーマ「JIN」を使っている
- PageSpeed Insightsにかけたら「改善できる項目」の「適切なサイズの画像」項目で怒られた
- 怒られてる画像ファイルが何かを確認したら、ピックアップコンテンツの画像
- サイズをみたら、明らかに大きい(圧縮したのにどう見ても圧縮前のサイズ)
※ここが謎の現象 - 画像の拡張子がpng
具体的な症状の説明 → 解決法、という順番で説明していきます。
※JINのバージョン: 2.060利用時です。ちなみに1.9台に戻しても発生することを確認
ー もくじ ー
JIN ピックアップコンテンツ画像サイズが大きすぎる症状
他で運営しているJINをテーマに使ったWebサイトにGoogleのPageSpeed Insightsでスキャンをかけたときのことでした。
モバイルの点数が「48点」と思いのほか悪かったので、
「改善できる項目」を見ると上位2つの「画像」に関する項目が真っ赤。
1位の「次世代フォーマット〜」項目はちょっと難しそうだったので、簡単そうな2位の「適切なサイズの画像」について見てみることに。
画像サイズが問題で約1.5秒もロスしているよ、とのこと。どの画像が怒られているかを確認すると、4つ全てピックアップコンテンツの画像でした。
ところが、ここからが問題。
「png画像だけ異常にサイズがデカく、jpg画像は普通」
という状況でした↓。
なぜかpng画像だけ異常にサイズが大きい・・・
僕は必ず画像を圧縮してからWordPressへアップロードするので、413KB, 240KBものサイズでアップロードをするわけがありません。
レンタルサーバのファイルマネージャーから生の画像ファイルを見てみると、不可解な事が起きていました。
なぜか、ピックアップコンテンツ用に表示されている画像ファイルのサイズが412KBで、その下の圧縮後アップロードした元のファイル(151KB)の約３倍もの容量になっているではないですか。
メモ：
「●●-640x360.png」という名の画像ファイルは、WordPressにアップロードした瞬間にJINのテーマがピックアップコンテンツ用画像として自動生成するものです。
アップロード挙動がおかしかったのかと思い、試しにもう一度同じ元画像を圧縮してアップロードしても結果は変わらず。
他のファイルを見てみると、拡張子が.pngの画像だけ全く同じ状況、つまり「全ての●●-640x360.pngのファイルだけ圧縮前のサイズのまま」になっていました。
pngがダメ、jpgのファイルでは全てサイズが小さいまま・・・ということは。
画像を"jpg"に変更して圧縮すれば解決
画像の拡張子を"png"から"jpg"に変えてアップロードすれば解決じゃない？と思いやってみたら、正解でした。
以下手順で対応完了です。
- 元の画像を手元に用意する。
- 画像ファイルの拡張子をpngからjpgに変更し保存する。
- jpg画像を圧縮する。
- WordPressへアップロードする。
- コンテンツピックアップに設定している記事のアイキャッチ画像を再設定する。
pngからjpgへ変えるだけで、顕著なファイルサイズの違いがあることがわかります。jpg達のサイズの小ささよ。
対処後は、48だったスコアが53まで上昇。
JINにしてはこれでもまだまだ改善の余地ありですが、画像ファイルを2枚差し替えただけでスコアが５改善されたのはちょっと驚きです。
このSpeed Testは毎回数値がブレるので3回ほど実行しましたが、毎回48を超えて50~55ほどだったので、改善は見込めたと言えるでしょう。
また、肝心の「改善できる項目」を再度見ると、
もともと問題だった「適切なサイズの画像」項目が1.5秒→0.3秒へと短縮されました。
また、何気に他の項目も大きく改善しています(^^;
追加調査
JIN以外のWordPressテーマでもpng画像の肥大化が起こるか？
起こりませんでした。
ローカルにWordPress環境を構築し、Twenty ●●系のデフォルトで入ってるテーマに切り替えて画像アップロード→自動生成されるファイルサイズを確認しましたが、ファイルサイズは小さかったです。
やはり、JINで設定されている画像サイズ自動生成時のみ起きるようでした。
圧縮した画像をアップするとサイズ逆転現象が起きる
png画像を圧縮せずにアップロードすると、自動生成されるピックアップコンテンツ用画像はアップロードされた画像サイズより小さくなるのですが、
圧縮してアップロードした途端にピックアップコンテンツ用画像サイズ(303KB)がアップロードした画像サイズ(117KB)よりも大きくなりました。
なぜ、こういうことが起きるのかまで特定には至らず。。。
今後は、JINを使って大きめの画像をアップロードする時はpngではなく必ず拡張子を"jpg"にしようと心に決めた出来事でした。
