本記事は、どんなに画像を圧縮してもPageSpeed Insights の「画像を最適化する」が消えなかったところ、思わぬところに罠があったという話です。
「画像を最適化する」が消えない！
「画像を最適化する」の項目は、通常において、画像圧縮をすれば消えます。
しかし私の場合、カスタマイズ途中から何故か消えなくなりました。
その途中にやった作業というのが大問題。
「表示可能コンテンツの優先順位を決定する」を何とかするため、コードの大整理をしてみました。
元々がツギハギだらけになってしまってましたし、構文も間違ってたり。
直した結果、改善はありました。
しかし別のトラブルが持ち上がったわけで。
ただ問題があるのは大きく表示している先頭固定記事の画像のみ。
サイトの表示速度自体に問題はないから、まあいいかと。
コードを再び見直す
しかし、いつまでも放置するわけにはいきません。
コードを再び見直しました。
今度は関数の一つ一つを自分で作るつもりでチェックしながら。
とりあえずは動いている。
各要素も見直したし、おかしかったところや無駄だったところは直したはず。
いったい何が問題なのか……。
とりあえず画像の問題がなくなった場合のスコアはいくらになるのか知りたい。
PageSpeed Insightsの結果後に出る修正用の画像をダウンロード。
画像をSFTPで上げてブラウザリロード……ん？
どうして画像がこんなに粗いの！？
ダウンロードされていたのは150サイズのサムネイル。
ということは……原因がわかりました。
「画像を最適化する」が消えなかった原因はサムネイルサイズの設定忘れ
原因は、このコードです。
<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,medium, true); ?>
wp get attachment image srcはサムネイルの高さと幅を返す関数。
この第二因数を、私の場合はmediumで設定しないといけないのが抜けていました。
こんな感じ。
wp_get_attachment_image_src($image_id, true);
どうやら素の画像が表示されていて、一方でデフォルトのサイズ指定は150のため、150の画像を渡してきていたようです。
テーマの分岐がやたら多いので、自分で書き換えて簡略化したのですが、その際に抜けてしまったようで。
ミディアムに訂正して再び測定したところ無事に消えました。
どうやらPageSpeed Insightsは、画像の単純なファイルサイズでなく指定解像度に応じた圧縮度合いかファイルサイズで判断しているっぽい。
このことも合わせて勉強になりました。
まとめ
カスタマイズするときはサムネイルサイズの指定を忘れずにね
サイズをちゃんと合わせた上で画像圧縮していたら、ちゃんと注意が消えるから
