Optimizerを使って画像の圧縮とWebP対応をしてみたついに、Googleがモバイルファーストインデックスを導入しましたね。Console開いたら「対応したで!」って通知きてました。私のこのブログはほとんどPCからのアクセスなのですが、モバイルファーストとGoogle様がいうので対応しなければなりません。Insightの点数も80点前後なのですが、モバイルは20点という謎の差が発生していました。モバイルの点数、19点。次世代フォーマットでの画像の配信の3つ。次世代フォーマットでの画像の配信はプラグイン1つ入れれば解消できそうだったので、こちらから対応することにしました。画像の圧縮とWebP対応オフスクリーン画像の遅延読み込みもはや解説する必要はないと思いますが、ユーザーがページにアクセスした時にそのページに必要な画像を全て読み込むのではなく、一旦ファーストビューにだけ必要な画像を読み込み、そのあとは画像が必要な場所までユーザーがきた時点で読み込むということです。Loadと呼ばれるものですね。基本的に画像はJPGかPNGを使用していると思うのですが、次世代フォーマットというのはJPG,PNGなど以外のもっと容量を減らせてかつ高画質で提供できるような画像フォーマットをさします。有名なのはGoogleさんの作ったWebPです。2018年あたりまでは、対応ブラウザが少ないということでWebP対応を見送っていましたが、最近対応しているブラウザも増えてきたのでそろそろフォーマットを変更してもいいかなと思います。FireFoxは対応済み。Safariとかはまだなはずなので、スマホユーザーが多いサイトはまだ対応いらないんじゃないかと。私のブログの場合はほどんどがPCかつChromeなので対応することにしました。今回は下記の条件でプラグインを探しました。Optimizerだったので、今回はこちらをインストール!Bulkで圧縮できるのが嬉しいです。ここから既存画像をスキャンして圧縮してくれるので「最適化されていない画像をスキャンする」をクリックして進めてください。私は900枚強あり、1時間かかりました。時間に余裕がある時がおすすめです。これ、どのサイトを読んでも見つけられなかったのですが、最新版ではクレジットがないと圧縮できなくなったのかもしれません。プラグインを有効化した時に「データを送るのを許可しますか?許可したら500枚分の画像クレジットあげます」という旨のメッセージが出てきますので、Yesにしてください。APIキーを受け取るためのメールが届きます。KeyにAPIキーを入力すると、500枚分の画像クレジットが受け取れます。私は今回このクレジットを使用して圧縮しました。WebP画像に変換する次に、画像をWebPに変換します。変換すると言っても、対応していないブラウザに対してはJPG、PNGで今まで通り出してくれるので心配しなくて大丈夫です。メニューの「WebP」を選び、「JPG,PNGからWebP」にチェックを入れます。「変更を保存」を押すと、ブラウザごとに画像を出し分けるためのコードを提案してくれるので挿入。右下に「PNG」と赤いアイコンが出ていますが、webP対応が完了するとこれが緑色になります。WebP対応はこれで完了です。Load」という項目があるので、チェックを入れます。Loadはこれで完了です。既存でLazyLoadプラグインを入れている場合は、バッティングする可能性があるので気をつけてくださいね。Insightはどれくらい上がるのか?ここまでの対応を全てして、再度測ってみました。画像に関する項目が全て無くなるので、さぞかし点数が上がるに違いない。え?1点しか上がってない。確かに画像系はなくなったのですが、代わりにサーバー応答時間の短縮とウェブフォントがきています...。これ、この項目を一気に解消したからと言ってめちゃ上がるわけではないんですね。サーバー応答時間は何かな...プラグインが重かったのかな...。Adsenseの広告が引っかかっていました。SEOを考えて広告を減らすことに!TOPページの広告をオフにした結果がこちら。Adsenseでした。ここに対する対策は何かしら打てるものがあるのだろうか?引き続き調査することにします。Insightの画像の項目を全て解消したからと言って、点数が上がるわけではない。最新の記事まみたす1992年生まれ。知識ゼロ文系女子からSEになっているところ。カメラ、猫、お酒、旅行がすきです。2019年5月18日この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。MeCatstagram。