最適化スコアが悪い…なんでだ…
当サイトでずっと悩んできていたことが、Googleの最適化スコアが劇低であることでした。
やれることはすべてやっているつもりなんですが...
それがひょんなことから原因がわかり解決に至りました。
お客様のサイトを作成しているときに…発覚したこと
問い合わせフォームに、電話番号を載せておきたくて、画像を作ったんです。
横幅600pxくらいで作って、アップしたんですけど、実際に表示してみるとガタガタになるんですよ…
この種の問い合わせはよくあります。
画像がガタガタになるのは小さいサイズの画像を大きく引き伸ばすからです。
なので、当初は1000pxくらいまで引き延ばしているんじゃないかと思いました。
しかし、実際見てみると、画像の引き延ばしはやっておらず、600pxのまま(100%での表示設定)としているのに、画像がボケボケガタガタにになっていました。
よくよく調べると、掲載されている画像はWordPressが自動で書き出したリサイズ画像を使っていて、300pxの画像を600pxに引き伸ばしていました。
原因はわかりました。
これを修正しますね。少々お時間ください。
と、回答したのですが。。。結局解決までに半日ほどかけてしまいました。。
原因はWebp画像の書き出しプラグイン
直接の原因は、WebP画像書き出し用プラグインのWebpexpressが原因でした。
どういうことかというと、webpをかき出し、JPGやPNGで構成されている画像を、webpに自動的に置き換えてくれるプラグインなのですが、置き換える際に、imgタグをやめて、pictureタグへ変換して掲載してくれます。
また、そこには最適なサイズ画像を組み入れるように設定されています。
今回作成した画像は600pxで、どうやら600px前後の画像を入れようとした場合に、自動的にWordPressが自動で書き出す中サイズ画像を採用してしまうようでした。
そこで、WordPressのメディアサイズの設定を確認すると、中サイズの画像が、600pxと設定されていることがわかりました。
テーマによっては書き出し不要のものもある
今回のお客様の採用されているテーマは、テーマによって自動的に設定されるサイズ画像があるようで、むしろWordpress標準のリサイズ画像は不要で書き出ししないようにしたほうが良いようでした。
これを書き出し不要とせず、しかも中サイズ300pxという設定のため、書き出してしまい、プラグインが中サイズ画像が存在していることを認識し、300pxの中サイズ画像を書き出し今回はそれを自動採用してしまったのが原因であることがわかりました。
なので、このお客様のサイトのリサイズ画像は書き出し不要の設定を行い、りジェネレート(書き出し画像を一度削除して再度設定に従ってサムネイル画像の書き出しを行う)し、さらにwebp画像も一度すべて削除し再書き出ししました。
これにより、600pxの電話番号画像はそのまま600pxで(webp画像で)表示されるようになりました。
最適化スコアで悪く出ていたところが画像だった件
当サイトのスコアで最も悪く出るのは、サーバーパフォーマンスです。
これについては、結果そういう出方をしているけど、要は反応が遅いから指摘されるわけで、サーバー自身が悪いというよりも、サイトのファイルサイズが、想定より大きいことから来るのが原因ではないかと思っていました。
で、その次に出てくるのが画像のファイルサイズでした。
画像のファイルサイズが大きいという減点をもらっているのは既知の問題でした。
当サイトについては画像はすべてwebpが増加していて、さらには遅延読み込み等を行うことで最大効率化を図っていました。
だから、もうこれが出るのは仕方がないと思っていたのですが、今回、お客様の件を受けて今一度よく調べてみました。
調べてみるといろいろわかってくるもので、実はこの画像表示についてとんでもないミスを犯していました。
必要な最大サイズを大幅に超える画像を使っている
私はあえて、中サイズ画像と大サイズ画像をかねてから作らない設定をしていました。
少なくとも自分がブログ記事などに掲載する画像で中サイズ画像や大サイズ画像を使うことはないからです。
しかし、それがあだとなり、ブログ記事一覧ページなどで表示するアイキャッチ画像が、アップロードサイズで表示されていることにつながってしまっていました。
当サイトについてはすぐに中サイズの画像サイズ設定を行い、書き出ししました。
現在使っているテーマであれば、中サイズ→630pxで設定することでアーカイブ一覧などのアイキャッチ画像が630pxの画像を採用するようです。
これにより、一気に最適化スコアが上昇し、かなり良好なスコア干支変化しました。
今後クロールされるのが楽しみですね。