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