サイトを”超絶”軽くしよう！～画像の圧縮・リサイズの全てをまとめてみた～

こんにちわ！ブログ初心者の仏の顔もＴ．Ｔですヽ(´▽｀)/

[Twitter：hotokeT_T　　CTime：仏の顔もT.T]

みんな！サイト軽くしてるかーーい？？

重いと読者やGoogleに嫌われちゃうんだからねっ！

特に何もしてないよ！って方の為に今回は私がサイトを軽くする為に行ってきた事をまとめてみましたので、良かったら、参考にしてみて下さい(*ﾟ▽ﾟ*)♪

一緒にサクサクになろうぜ！！

仏くん

今回のテーマはファイルを圧縮すること！だから、トップ絵は「Ｘファイル」にかけて「圧縮ファイル」！気づいたかな？？

ホトケルダー捜査官とスカリー捜査官だよ！

ホトケルダーは強引過ぎないかΣ(ﾟдﾟlll)！？

でも、確かにいつもの仏くんより、少しホリが深いΣ(ﾟдﾟlll)！？

＜こんな人にオススメ＞
・画像を圧縮してない方
・画像をリサイズしていない方
・サイトを軽くしたい方
・Xファイルが好きな方（本編には全く関係ございません）

サイトを”超絶”軽くしよう！
1. 改善前の私のサイトスピード
軽くする為にやったこと①圧縮
軽くする為にやったこと②リサイズ
結果発表～！
まとめ

サイトを”超絶”軽くしよう！

ブログを始めた頃は、PageSpeed Insightsで９６点とかとってたのですが、気づいたら重くなってた私のサイト！

確かに画像をたくさん使っていますが、わずか２ヶ月程でこんなに重くなるとは！

「最近チェックしてないなー」って方は調べてみるべきですよ！

危険！サイトが重いと読者やGoogle神から見放されるよ|ﾟДﾟ)))

こんにちわ！ブログ初心者の仏の顔もＴ．Ｔですヽ(´▽｀)/ ブログやサイトを運営している皆さん！自分のサイトの「表示される速さ」をご存知ですか？あなたのサイト、気付いたら遅くなってるかもしれませんよ！なかなか表示されないサイトにイライラ...

改善前の私のサイトスピード

＜PageSpeed Insights＞

＜Test My Site＞※モバイルのみ

点数的にはギリギリセーフではありますが、このままでは危ない！と思い、とにかく一番の原因である、「画像が重い」を解決する為に動きます！！

軽くする為にやったこと①圧縮

画像の容量を減らすには、圧縮がいいと知りました。

しかも、圧縮しても画質はそんなに変わらない！それならやった方が得ですよね♪

だけど調べてみたら、圧縮の「やり方」がたくさんありましたΣ(ﾟдﾟlll)

ブラウザ上で圧縮

画像の圧縮は超簡単♪無料！登録なし！ブラウザ上で使えるTinyPNGヽ(´▽｀)/

こんにちわ！ブログ初心者の仏の顔もＴ．Ｔですヽ(´▽｀)/ 先日書いた記事↓で私のサイトが画像で重くなっていることが判明しました。そこで解決方法を「プラグインを使わない方法」と「プラグインを使った方法」の２種類に分けて紹介したいと思います...

WordPressを使っていなくても、ネット環境さえあれば誰でも使えます。

パソコンに保存している写真を軽くするのに使ったりもできます♪

WordPress上で圧縮

WordPressの場合はプラグインを使って圧縮します。オススメの３選はこちら↓

簡単に画像を圧縮できる！オススメWordPressプラグイン３選(*ﾟ▽ﾟ*)

こんにちわ！ブログ初心者の仏の顔もＴ．Ｔですヽ(´▽｀)/ 自分のサイトが重くなっていたので、画像を軽くしよう！と圧縮について調べてきました♪ 今回は「プラグインを使う方法」を紹介する前に、たくさんある圧縮プラグインの中でも人気のプラグイン...

３選の中から私が選んだのは、ブラウザ上での圧縮と同じメーカーの

＜Compress JPEG & PNG images＞

憎めないパンダのキャラクターでお馴染みですヽ(´▽｀)/

「Compress JPEG & PNG images」の導入方法、初期設定についてはこちら↓

プラグインを使って画像を圧縮しよう！Compress JPEG & PNG imagesの設定

「Compress JPEG & PNG images」での一括圧縮、個別圧縮のやり方についてはこちら↓

すでにアップロードした画像を圧縮してスッキリしよう(*ﾟ▽ﾟ*)

こんにちわ！ブログ初心者の仏の顔もＴ．Ｔですヽ(´▽｀)/ あなたのサイト、画像が重くて開くのが遅い！そんな事になっていませんか？？「Compress JPEG & PNG images」プラグインを使って、今回はすでにWordPre...

プラグインで圧縮する前にバックアップは必要か？

番外編として、一括圧縮する前にバックアップが必要かどうか？も書きました↓

WordPressのバックアップは必要なのか？

こんにちわ！ブログ初心者の仏の顔もＴ．Ｔですヽ(´▽｀)/ 先日、オススメの画像圧縮プラグイン３選を紹介したので、私も実際にプラグインをインストールして圧縮しようとしたら、そこである事に気づきます。「あれ？これバックアップしとかないといけ...

仏くん

これで画像の圧縮に関してはバッチリだな！これらの記事を書く上で、参考にしたサイトは５０は下らないな！おかげで少し詳しくなったぜ♪

みんなは私のサイト見てサクサク進めて、無駄な時間を使わないようにした方がいいぞ！タイム伊豆マネーだからな！

急に静岡県の観光スポット出てきたΣ(ﾟдﾟlll)！！

軽くする為にやったこと②リサイズ

リサイズとは画像のサイズを最適化することです。

サイズが小さ過ぎると、引き伸ばした時に画質が悪くなりますし、

サイズが大きすぎると、無駄に容量を使い、さらにサイトスピードが下がります《ﾟДﾟ》

なので、あなたのサイトに最適なサイズを調べ、画像を調整する必要があります。

リサイズについてはこちら↓

画像のサイズを最適化しよう！レッツ、リサイズヽ(*´∀｀)ノ

こんにちわ！ブログ初心者の仏の顔もＴ．Ｔですヽ(´▽｀)/ 「ねぇねぇ奥さん！知ってる？？実は、圧縮とリサイズは違うんですよ|ﾟДﾟ)))」画像圧縮に関する記事をたくさん書いてきましたけど、リサイズ（画像の最適化）に関しての記事を書いてな...

リサイズもブラウザ上でやるとか、プラグインを使うとか色々あるんですねー（´∀｀）

仏くん

圧縮とは違うけど、リサイズも画像の容量を削ることができるから、両方やっておくといいよね♪

もう画像をアップロードする時にリサイズする習慣をつけた方がいいな！習うより慣れろって感じ？

私はWordPressにアップロードした時に毎回、サイズと容量はチェックしてますヽ(*´∀｀)ノ

結果発表～！

さて、今回はとにかく「画像を軽くする」対策をしてきました！

その結果どれぐらい軽くなったか？見てみましょうヽ(´▽｀)/♪

＜Compress JPEG & PNG images＞

プラグインによる圧縮は以下の通り↓

圧縮した画像総数：1031枚

減った容量：96.09MB⇒46.72MB　51.4％の削減

凄い！半分以上容量を減らせましたヽ(*´∀｀)ノ♪

これで無料なのは本当にすごいΣ(ﾟдﾟlll)！！

＜PageSpeed Insights＞

パソコン：８９点⇒８６点

モバイル：５５点⇒５７点

パソコンの方、下がってるΣ(ﾟдﾟlll)！？

モバイルも大して変わってないじゃんΣ(ﾟдﾟlll)！

ん～容量は確実に減ってるんですけどねぇ。。。

ただ、この改善作業を１ヶ月ぐらいかけてやっていたので、その間に記事や画像が増えていますので、それのせいかも…？？

＜Test My Site＞※モバイルのみ

モバイル：2.4秒⇒1.5秒

おぉ～！！こっちはだいぶ速くなってるo(^▽^)o♪

どちらもモバイルが速くなってるのは間違いないようですね！

なぜこんなに結果が違うのか？

両方ともGoogleが出している無料のツールなのですが、実はTestMySiteはモバイルファーストを進めるGoogleが新しく出したサイトスピードチェックなんです。

じゃあ、TestMySiteの方が新しいんだから正確か！？と思ったらそういうコトでもないんです。

GooglePagespeed Insightsは、サイト構造などだけを見て問題が無いか？を判断しています。

つまり、サイトの改善点を探すツールに近いですね。

TestMySiteは、回線速度や他サイトとの比較など全体を見て判断しています。
３G、４G、Wi-Fiなども考慮し、他サイトと比べて速いかどうかもチェックしてくれています。

つまり、違う目的で作られた、全く別の調査をするツールなわけです。

サイトスピードと言っても何を基準に調べるか？によって大きく違うというわけですね。

仏くん

まあ、結果としてモバイルは確実に速くなっているのは間違いないっしょー。そこだけ見て、後は忘れよう！とりあえず、寝よう！

まとめ

サイトを”超絶”軽くしよう！
1. 改善前の私のサイトスピード
軽くする為にやったこと①圧縮
1. ブラウザ上で圧縮
2. WordPress上で圧縮
3. プラグインで圧縮する前にバックアップは必要か？
軽くする為にやったこと②リサイズ
結果発表～！
1. ＜Compress JPEG & PNG images＞
2. ＜PageSpeed Insights＞
3. ＜Test My Site＞※モバイルのみ
4. なぜ結果が違うのか？