こんにちは、みよし之です。
今回は、PageSpeed Insightsにおいて適切なサイズの画像の項目を減らすことを記事にしてみました。
PageSpeed Insightsは、スマホやパソコンでサイト表示される際のパフォーマンスなどを計測してくれるものです。
色々な項目が問題を指摘されている・・・・
ブログを始めてから、日が浅い私にとって、意味が全く分かりませんでした。
そこで、何が問題だったのかを調べてみることにしました。
なお、私の場合は、EWWW Image Optimizerというプラグインによるものだったので、このプラグインを導入していない人は参考にならないかもしれません。
この記事を書いてから、いろいろとブログの画像に関する知識も多少増えてきました。
それらを踏まえて、問題の解消につながればと思います。
適切なサイズの画像ってなに？
今回、問題となった画像はアイキャッチ画像でした。
適切なサイズの画像という項目を展開すると、問題となる画像が表示されています。
これを見ても意味が分かりません・・・
そうなんです。ここでは、何を意味しているか分からないんですよね。
そこで、サイトで使われている記事内の画像を検証してみましょう。
問題となる画像を右クリック Edgeだと開発者ツールで調査する・chromeだと検証をクリック
クリックすると、左右に画面が分かれて表示されているのが分かりますか。
画面の右側上にコードが書かれてあります。このコードの中に表示されているimgの文字に注目してみてください。
そして、その周辺をマウスカーソルで動かすと、記事上で使われている画像が表示されます。
私の場合を例にとってみます。
| 描写サイズ | 75×35 |
| 実際のサイズ | 1024×476 |
| ファイルサイズ | 44.3KB |
| 描写サイズ | 75×75 |
| 実際のサイズ | 150×150 |
| ファイルサイズ | 3.5KB |
問題となるサイズは、長方形となっています。一方で、修正後のサイズは正方形となっています。
私の場合、メインコンテンツに画像をアップロードする場合は、このような問題が起こったことはありません。
これはアイキャッチ画像なのです。アイキャッチ画像はCanvaを使って、1200×630で作成しています。
上記のサイズが、1024×476となっているのは、EWWW Image Optimizeの設定で、最大描写を1024に設定しているためです。
実際に、メディアライブラリで確認してみると、画像は長方形になっています。
ただ、それ以前にアップロードしたアイキャッチ画像は、正方形となっています。
この原因はよくわかりませんが、これを正方形に変える方法がありましたので、それを次でお伝えします。
なお、余談にはなりますが、この表で注目してほしい場所があります。
メインコンテンツなどにアップロードする画像は、実際のサイズに影響してきます。ファイルサイズを押さえたい場合は、こちらもチェックしておきましょう。
適切なサイズの画像にしてみましょう
それでは、アイキャッチ画像を適切なサイズの画像にしていきます。
方法は簡単です。
- EWWW Image Optimizerを無効化する
- 無効化した後にアイキャッチ画像をアップロードする
- EWWW Image Optimizerを有効化する
- メディアライブラリを開く
- 画像を最適化する
再び、PageSpeed Insightsで計測をしてみると、適切なサイズの画像の項目がなくなっていると思います。
私の場合は、この方法で適切なサイズの画像の項目をなくすことができました。
なお、これによってPageSpeed Insightsのパフォーマンスが変わったかというとほとんど変化はありませんでした。
たくさんあれば別だと思いますが、1つではこのような結果になりますので参考にしてみてください。
一方で、アイキャッチ画像以外でも、この項目にいくつか表示されています。実際のファイルや縦横のピクセル数が関係しているような気もしますが、なにか分かれば記事に付け足してみます。
また、画像のピクセルサイズ変更は、メディアライブラリからも編集することができます。
こちらの記事では、編集する時の注意事項なども書いています。
まとめ
今回は、EWWW Image Optimizerというプラグインを無効化した上で、アイキャッチ画像をアップロードするとことにより、PageSpeed Insightsの適切なサイズの画像の項目をなくすことができました。
他の画像圧縮プラグインを使っている方で同じような項目に悩んでいる人は、手順が簡単なのでやってみる価値はありそうです。無効化→画像のアップロード→有効化だけです。
また、画像のファイルサイズは気になるところです。詳しいことはここで触れていませんが、メディアライブラリからも編集できますので活用してみてください。
最後まで読んでいただきありがとうございました。
