【高速化】画像を圧縮(最適化)してワードプレスの速度を改善

【高速化】画像を圧縮(最適化)してワードプレスの速度を改善

どうも、飲んべいです。

先日、ワードプレスのテーマを「Simplicity2」→「ライオンブログ」に変更をしました。

ライオンブログは、高機能・表示速度が速いテーマになっています。

さっそく「 PageSpeed Insights 」で計測をした所、モバイルが90点、パソコンが68点と言う評価でした。

ライオンブログは、プラグインなしで、AMPに対応させることができますが、この得点なら、まだ対応させなくても大丈夫か。

なぜか、モバイルとパソコンの点数が違いすぎる。と思いながら一週間ほど気にせず使っていましたが、何記事か投稿していくにつれて、パソコンの点数が60~59点をさまよい始めた。

このままだと、どんどん点数が下がっていきそうなので、まずいかなっと思い、改善していくことに決めました。

スポンサーリンク

PageSpeed Insights で再び計測

計測した結果、いつもの「JavaScript/CSS を排除・ブラウザのキャッシュ・画像を最適化」と表示が現れました。

しかし、「JavaScript/CSS を排除・ブラウザのキャッシュ」はこれ以上最適化することもできませんので、画像を最適化していこうと思います。

画像を最適化する方法

私は画像を最適化するために、プラグイン「EWWW Image Optimizer」を使っています。

 

EWWW Image Optimizer

使い方

 

このプラグインを使って、画像を最適化していましたが、PageSpeed Insightsでは、まだ最適化できる画像がありますよ、と表示されました。

その画像の数は10個ほどの「PNG/JPEG」形式の画像です。

要は、今以上に画像を圧縮して、最適化することにより、サイトが軽くなると言うことでしょう。

「EWWW Image Optimizer」を使っていたことにより、最適化する画像が少なくて済みました。よかった。

ですが、この10個ほどの画像を圧縮して、点数が上がるのか?と少々疑問に思います。

たった10個の画像で、点数上がんのか?

まずは、「PNG」画像を今以上に圧縮していきます。もちろんプラグインなどではなく、手動で。

PNG画像は「TinyPNG」

TinyPNG」はプラグインで取り込むことも可能です。

TinyPNGは「PNG/JPEG」の画像を無料(1ヶ月に圧縮できる枚数に上限がある)で圧縮が行えます。

プラグインは確か、1か月に500枚ほどの画像が上限だったような。

私は、画像の枚数が少なかったので、プラグインを取り込むこともなく、直接TinyPNGのサイトにいって、圧縮を行いました。

使い方

使い方は簡単です。

圧縮したい画像を、「ドラッグ&ドロップ」で「Drop your .png or .jpg files here!」に移動し、圧縮された画像をダウンロードするだけです。

※対応の最大画像サイズは2MB・一度に画像の数は20個まで。

圧縮前と圧縮後では、これほどまでにKBが違うとは。

こちらで、先ほどの圧縮をしなさいと言われた、10個の画像(PNG/JPEG)を全て、圧縮を行いました。

結果

画像の圧縮が終わり、アイキャッチや、投稿に使っていた画像を全て、圧縮後の画像に直して「 PageSpeed Insights 」で再度計測をしました。

その結果、たった10個の画像で変わるのか?と思っていた自分を反省します。

モバイル

点数が90点→95点と改善される。モバイルは5点上がりました。

そして、パソコンの点数に、目を疑ってしまいます。

パソコン

何と、60点→96点と大幅に改善されていました。

こんな変わんの?と驚きです。

たった10個の画像ですよ。画像を圧縮して最適化することが、これほどまでに大事だったとは、思いもよりませんでした。

まとめ

今回、「EWWW Image Optimizer」で足りなかった、画像の圧縮を「TinyPNG」でさらに圧縮を行った所、大幅に改善されました。

パソコン・モバイルの両方の得点が、90点台と言う結果になって本当にうれしいです。

たった10個の画像を甘く見ては、いけなかったです。

速度や点数が改善しない方は、画像の圧縮を行うことをおすすめします。

これほどまでに、改善されるのでしたら、早めに圧縮をしておいた方がよかったと思いました。

画像の圧縮、ぜひ試してみてください。

 

関連

参考→【初心者】アフィリエイトの始め方 用意する物

参考→便利なプラグイン追加【Jetpack】実は重かった

参考→間違いない!WordPress初心者 おすすめプラグイン

参考→WordPressテーマを変更するには注意が必要?変更してから確認も!

参考→WordPressのテーマを「Simplicity2」から「LION BLOG」に変更しました

参考→WordPress(ワードプレス)初心者 テーマはこれで決まりSimplicity2