【JIN高速化】ピックアップコンテンツpng画像とバトってjpgへ変えた話

- WordPress -
2019.11.25
WordPress

WordPressのテーマ、JINのピックアップコンテンツ画像でトラブりました。

解決したら読み込みスピードが約1秒早くなり、GoogleのPageSpeed Insightsでスコアが約5点上がった話です。

JINはブロガー界隈では有名なテーマ。なので「ググれば解決っしょ!」と思ったら全くヒットしない謎の現象が起きていたので、メモ。

以下当てはまる人に役立つはずです。

  1. WordPressテーマ「JIN」を使っている
  2. PageSpeed Insightsにかけたら「改善できる項目」の「適切なサイズの画像」項目で怒られた
  3. 怒られてる画像ファイルが何かを確認したら、ピックアップコンテンツの画像
  4. サイズをみたら、明らかに大きい(圧縮したのにどう見ても圧縮前のサイズ)
    ※ここが謎の現象
  5. 画像の拡張子がpng

具体的な症状の説明 → 解決法、という順番で説明していきます。

※JINのバージョン: 2.060利用時です。ちなみに1.9台に戻しても発生することを確認

JIN 高速化前のピックアップコンテンツ画像の症状

他で運営しているJINをテーマに使ったWebサイトにGoogleのPageSpeed Insightsでスキャンをかけたときのことでした。

モバイルの点数が「48点」と思いのほか悪かったので、

JIN 高速化

「改善できる項目」を見ると上位2つの「画像」に関する項目が真っ赤

1位の「次世代フォーマット〜」項目はちょっと難しそうだったので、簡単そうな2位の「適切なサイズの画像」について見てみることに。

JIN 高速化

画像サイズが問題で約1.5秒もロスしているよ、とのこと。どの画像が怒られているかを確認すると、4つ全てピックアップコンテンツの画像でした。

ところが、ここからが問題。

「png画像だけ異常にサイズがデカく、jpg画像は普通」

という状況でした↓。

JIN 高速化

なぜかpng画像だけ異常にサイズが大きい・・・

僕は必ず圧縮してから画像を挙げるので、413KB, 240KBものサイズでアップロードをするわけがありません。

レンタルサーバのファイルマネージャーから生の画像ファイルを見てみると、不可解な事が起きていました。

JIN 高速化

なぜか、ピックアップコンテンツ用の画像ファイルが(一番下の)圧縮したファイルの約3倍もの容量になっているではないですか・・・。

●●-640x360.pngという名の画像ファイルは、メディアアップロードした瞬間にJINのテーマがピックアップコンテンツ用画像として自動生成するものです。一番下の、幅がファイル名に含まないものが圧縮してアップロードした元の画像。

アップロード挙動がおかしかったのかと思い、試しにもう一度同じ元画像を圧縮してアップロードしても結果は変わらず。

他のファイルを見てみると、拡張子が.pngの画像だけ全く同じ状況、つまり「全ての●●-640x360.pngのファイルだけ圧縮前のサイズのまま」になっていました。

pngがダメ、jpgのファイルでは全てサイズが小さいまま・・・ということは。

画像を"jpg"に変更して圧縮すれば解決

画像の拡張子を"png"から"jpg"に変えれば解決じゃない?と思いやってみたら正解でした。

以下手順で対応完了です。

  1. 元の画像を手元に用意する
  2. 画像ファイルの拡張子をpngからjpgに変更し保存
  3. jpg画像を圧縮
  4. メディアアップロード→記事のアイキャッチ画像を再設定
    JIN 高速化

pngからjpgへ変えるだけで、顕著なファイルサイズの違いがあることがわかります。jpg達のサイズの小ささよ

JIN 高速化

対処後は、48だったスコアが53まで上昇

JIN 高速化

JINにしてはこれでもまだまだ改善の余地ありですが、画像ファイルを2枚差し替えただけでこれだけ上がるなんてちょっと驚きです。

このSpeed Testは毎回数値がブレるので3回ほど実行しましたが、毎回48を超えて50~55ほどだったので、改善は見込めたと言えるでしょう。

また、肝心の「改善できる項目」を再度見ると、

JIN 高速化

もともと問題だった「適切なサイズの画像」項目が1.5秒→0.3秒へと短縮されました。

また、何気に他の項目も大きく改善しています(^^;

追加調査

他のテーマでもpng画像の肥大化が起こるか?

なりませんでした。

ローカルにWordPress環境を構築し、Twenty ●●系のデフォルトで入ってるテーマに切り替えて画像アップロード→自動生成されるファイルサイズを確認しましたが、ファイルサイズは小さかったです。

やはり、JINで設定されている画像サイズ自動生成時のみ起きるようでした。

圧縮した画像をアップするとサイズ逆転現象が起きる

png画像を圧縮せずにアップロードすると、自動生成されるピックアップコンテンツ用画像はアップロードされた画像サイズより小さくなるのですが、

圧縮してアップロードした途端にピックアップコンテンツ用画像サイズ(303KB)がアップロードした画像サイズ(117KB)よりも大きくなりました

JIN 高速化

なぜ、こういうことが起きるのかまで特定には至らず。。。

ていうかこれ、JIN使っててpng画像をアップロードし続けたらレンタルサーバの容量圧迫するじゃないですか・・・

今後は、JINを使って大きめの画像をアップロードする時は必ず拡張子を"jpg"にしようと心に決めた出来事でした。

UdemyでサクッとWordPressを学習してみる