サイトを作成＆運営していると、どうしても気になるのが「Page Speed Insights」のサイトのスコア。
中でも「パフォーマンススコア」は少しの変更でも下がってしまう事がありますが、そんな中で「適切なサイズの画像」で大きくスコアを下げてしまっています。
どうにかならないもんかと、サイトを改善してみました。
Google Page Speed Insightsとは？
「Google Page Speed Insights（ページスピードインサイト）」はモバイル、パソコンに対してのウェブページの読み込み速度をスコア測定してくれるツール。
「どうにかならないかな」と思って、今回は自分なりにサイトを改善してみる事に挑戦してみました。
画像の「リサイズ検知」
ワードプレスのプラグインで画像を圧縮して表示速度を高速化するプラグイン 「EWWW Image Optimizer」の設定の中に「リサイズ検知」機能が設定できます。
指摘された画像は「Google Page Speed Insights（ページスピードインサイト）」で出てきた「適切なサイズの画像」と一致している事がわかり、画像を加工して設定し、サイトベージを更新すると「リサイズ検知」が消えるかどうかで判断し、最終的には「Google Page Speed Insights」で検証してみると言う事にしました。
画像チェック開始
トップ画面で「リサイズ検知」で青く囲まれた画像もあるが、囲まれていない画像もある。
ここに表示される画像は「アイキャッチ」で表示されている画像。
サイトの画像はアップする前に「TinyPNG」で圧縮しサイト内のサムネイルに合わせて「Regenerate Thumbnails」でサムネイル制作し「EWWW Image Optimizer」で圧縮もしているので、「適切すぎる画像」と言ってもいいくらいなのだが結果は「ダメ」
もっと軽く！
と言う訳で外部サイトの「Squoosh」で画像を加工するも・・・変わらず。
最後の手段に出てみた！！
画像サイズの変更
「リサイズ検知」でチェックが付いてる画像は基本小さい！
800から1005ピクセルでのアップだが、アップ時にサイト表示の画像はサムネイルに合わせてリサイズされている物だと思っていたが、アイキャッチで表示された画像サイズがそのままトップページに表示されているようだ！
ん～～～～・・・わからん！
何か設定があるのかもしれないが（さすが初心者です）よくわからないので、リサイズチェックが付いていない画像のサイズに変更した。
サイト管理メニューからメディア➡ライブラリへ移動し、アイキャッチで表示されている画像を編集で小さいサイズに変更した。
画像サイズを変更し、更新
再びリサイズし、その際使用していない画像は排除する設定。
なんだかんだでアイキャッチを編集し「リサイズ検知」も引っかからなくなったので、再度「Google Page Speed Insights」でチェック！
あらら？？
改善しています！！！
これが正しいやり方かどうかは初心者にはわかりません
しかし、アイキャッチはそんなに大きな画像が必要と言う訳でもなさそうですので、これでいいかなと思ってしまいました。
今回の方法は「一つに方法」として見ていただけるようお願いします！
以上『Page Speed Insightsの『適切なサイズの画像』を改善編』でした。
コメント