小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

PageSpeed Insightsの「画像を最適化する」が消えない! ~サイズ指定を見直してみましょう

カスタマイズ&プラグイン
この記事は約3分で読めます。

本記事は、どんなに画像を圧縮しても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は、画像の単純なファイルサイズでなく指定解像度に応じた圧縮度合いかファイルサイズで判断しているっぽい。
このことも合わせて勉強になりました。

スポンサーリンク

まとめ

解答者の写真
カスタマイズするときはサムネイルサイズの指定を忘れずにね
サイズをちゃんと合わせた上で画像圧縮していたら、ちゃんと注意が消えるから
 
ブログやサイトを始めたい・引っ越したい方へ

レンタルサーバーWING。
KUSANAGI&WEXALが使えるVPS。
どちらでも高速でコスパに優れたConoHaで始めるのがおすすめです。
もっと知りたい方はボタンをクリックしてください。
(ボタン経由で入会した場合、1000円分のクーポンがもらえます)

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
カスタマイズ&プラグイン
スポンサーリンク

コメント

タイトルとURLをコピーしました