ブログの速度が測れる「PageSpeed Insights」で試した結果「適切なサイズの画像」という項目の出たので改善してみました
今回は、圧縮ソフトを使って投稿済の画像を、さらに縮小してサーバーにアップロードする方法です
使用するソフトは無料の「squoosh」
またそれとは別に、投稿前の画像圧縮や形式変換にも便利な「iLoveIMG 」も紹介していきます
適切なサイズの画像にする方法PageSpeed Insights
まずはPageSpeed Insightsでブログの速度を測ってみましょう
検索窓に自分のURLを入れて分析
モバイルとパソコンのタブが出ますが、最近はモバイルファーストが主流なのでモバイルの数字を参考にします
測ってみた結果はたぶん、パソコンよりモバイルの方が低かったんじゃないでしょうか
最近は、モバイルでサイトを訪れるユーザーが多いので、モバイルの閲覧速度が遅いとすぐに離脱されてしまうことに
そうならないためにも改善が必要になってきますが、初心者はむやみにコードを書き替えたりしてはダメです
サイトが真っ白になるだけではなく、サイト自体に入れなくなる可能性も出てくるからです
なのでここは画像などを縮小してサイトのスピードを上げるのが得策でしょう
ねこまちはコードをいじってサイトが真っ白になったよ
【初心者用】WordPressのバックアップをサーバーから取る方法
「適切なサイズの画像」を保存する
すでにサイトでアップロード（公開）されている画像を「適切なサイズの画像」にする方法です
「squoosh」で画像を圧縮する
続いて、画像をもっと圧縮するために無料ソフトを使っていきます
「squoosh」を立ち上げ「select an image」をクリック
先ほど保存したファイルを開きます
真ん中の◀▶を左右に移動させると、画質を比べることができます
よくわからない場合は◀▶でめいっぱい左に移動してみてください
すると、右側が荒くなっているのがわかるかと思います
この画像の粗さでは極端すぎてアップロードはできないですが、このように左右で比べながら圧縮できるのが「squoosh」の良いところです
では、とりあえずこのくらいの圧縮率にして「ダウンロード」してみます
サーバーに画像をアップロード
エックスサーバーの「ファイルマネージャー」へログインします
画像が入っている場所の確認方法は
の順番です
この画像で言うと、
そこの階層まで行けたら
ファイルのアップロードで「ファイルを選択」をクリック
先ほど圧縮した画像を選び「アップロード」をクリックします
「PageSpeed Insights」で更新する
PageSpeed Insightsに戻り、更新します
「合格した監査」内に「適切なサイズの画像」が入っていることがわかりますね
これで一応の合格となりました
これからブログにアップロードする画像の場合
先ほどまでは投稿済みの画像のアップロード方法でしたが、これから投稿する画像にも同じようにソフトで圧縮してWordPressのメディアにアップロードすれば大丈夫です
圧縮できる無料ソフトはこの他にもたくさんありますが、個人的に好きなのが、iLove IMGという無料ソフト
iLove IMGの良いところは、PNGなどの大きい容量の画像をJPGに形式変換してくれたり、さらに圧縮もできる一石二鳥なソフトになっています
使い方はとっても簡単だよ
まとめ
一旦ブログに投稿してしまった画像でも、再圧縮してサーバーにアップロードすれば軽くなります
「PageSpeed Insights」での検証も、通信速度の環境やキャッシュ、プラグインなどでも結果でも違ってくるので何回か試してみるのがいいかもしれません
ではまた
