こんにちは、おひとりさまブロガー和泉です！
私のブログ、最近、表示速度が重いな…となんとなく感じていたんですが。。
昨日、Googleの「PageSpeed Tools」で表示速度を調べたらなんと「３３」！
ヤバ過ぎる。ヒド過ぎる。悪すぎる。
表示速度もwebサイトのSEO評価に繋がる項目なのでとても重要です。
ということで、今回は一番の悪さをしている「画像」を「Compress JPEG & PNG images」プラグインを活用して最適化してみたので、解説していくよ！
- ワードプレスの表示速度が遅い方
- 画像をたくさん使ってる方
に向けて書いている記事です。
目次
画像最適化で有名なEWWW Image Optimizerプラグインでは対応しきれない
「EWWW Image Optimizer」は、画像をアップロードするときに自動的に圧縮してくれて便利な有名プラグインのですが、私のワードプレスはこれだけでは対応しきれていないようです。
私のワードプレスは画像が多めなので仕方ない部分もあるかもですが、でも「33」という数字のままにしていくわけにはいかないですよね。。。
なので、「EWWW Image Optimizer」プラグいでは最適化しきれない画像を、「Compress JPEG & PNG images」プラグインを使って今回は最適化していきたいと思います。
では、以下から解説していきます！
「Compress JPEG & PNG images」プラグインとは？
「Compress JPEG & PNG images」とは、「EWWW Image Optimizer」と同じで自動的に画像を圧縮してくれる便利なプラグインです。
ですので、「Compress JPEG & PNG images」プラグインを導入するだけで自動的に圧縮され最適化されていきます。
- ただ、無料の範囲では月500枚までしか圧縮することが出来ません。
その以上になると、有料になります。でも、なかなか月500枚も増えることはないかなと。
- 使ってみて思ったのが、圧縮に結構時間がかかる・・・。
１枚につき30秒近くかかっている印象です。
そこがちょっとだけストレスになるかもです。
どれくらい圧縮されるか？
「Compress JPEG & PNG images」プラグインを導入することでどれくらい圧縮できるか、比較してみます。
- 導入前のファイルサイズ 101KB
- 導入前のファイルサイズ 22KB
めちゃくちゃサイズが軽くなってるよ！
Compress JPEG & PNG imagesプラグインなかなかやるね。
では、早速、導入していきましょう。
ステップ１．まずは、PageSpeed Toolsで最適化が必要な画像を確認する
「Compress JPEG & PNG images」プラグインを導入する前に、まずは、Googleの「PageSpeed Tools」を使って、最適化すべき画像を確認してみましょう。
「PageSpeed Tools」とは？
Googleが提供する無料ツールで、対象のURLを入れると、スマホ・パソコンの「表示速度」を確認することが出来ます。
表示速度とは、webサイトが開くまでにかかる時間です。
表示速度が悪いと、サイト評価にも影響が出てくるようになります。
- 今回はトップページの表示速度を計測しました。
- 以下は、トップページで最適化が必要な画像の一覧です。
こうやって“何の画像を最適化すべきなのか”という点がわかるのはとても助かりますよね。
では、早速、「Compress JPEG & PNG images」プラグインを使って、最適化させていきましょう！
ステップ２．Compress JPEG & PNG imagesプラグインを導入
今回は、「Compress JPEG & PNG images」プラグインを導入して、画像を圧縮して最適化をはかりたいと思います。
まずは、TinyPNGサイトでAPI KEYを取得しておきます。
「Compress JPEG & PNG images」プラグインに必要なAPI Keyを、「TinyPNG」サイトで先に取得しておきましょう。
▼TinyPNGサイト
１．名前(ローマ字)とメールアドレスを入力して、「GET your API Key」をクリック
３．メールに以下のようなものが届きますので開封します。
４．「Visit your dashbord」をクリックします。
５．API Key が出てくるので、コピーしておきます。
API Keyはプラグインの設定で使用します。
続いて、プラグインの設定
APIkeyを取得したら、「Compress JPEG & PNG images」プラグインを導入していきます。
１．Compress JPEG & PNG imagesプラグインをインストール
２．Compress JPEG & PNG imagesプラグインを有効化
３．Compress JPEG & PNG imagesプラグインの「Settings」をクリック
４．上のほうに出ている「 Please register or provide an API key to start compressing images」のリンクをクリック
５．「Already have an account」に先ほど取得したAPI keyを入れましょう。
６．以下の表記が出ればOK
これで特に何か設定をするところはありません。
プラグイン導入後の画像は自動的に圧縮されていきます！
ただ、導入前の過去の画像は圧縮されていませんので、以下で解説しますね。
ステップ３．「Compress JPEG & PNG images」プラグイン導入前の画像を圧縮する
ここからは、「Compress JPEG & PNG images」プラグイン導入前の画像を最適化していく方法を解説します。
一括で圧縮
ただ、一括の圧縮だと相当時間が掛かりそうです。。。
それを踏まえてやってみてください。
１．ダッシュボード⇒メディア⇒「Bulk Optimization」
２．「Start Bulk Optimization」をクリック
注意点として、無料で出来るのが月500枚までなので、それ以降は有料になるので気を付ける必要があります。
指定した画像のみ圧縮
最適化する必要のある画像だけをする場合は、指定の画像のみをやるという方法もあります。
１．メディアライブラリの表示形式を変えます。
以下のような形式になります。
２．「Compress」を押すことで個別圧縮できます。
Googleの「PageSpeed Tools」でどの画像を最適化したほうが良いというのが出るので、その画像を１つ１つ圧縮していくときに便利だと思います。
さて、肝心の表示速度はどうなったかな？
さて、「Compress JPEG & PNG images」プラグインを導入したことで、トップページの表示速度は果たして改善したのでしょうか？！
気になりますよね。
ということで、再び、Googleの「PageSpeed Tools」で測定！
おお！２５％も改善！！すごい！
「３３」⇒「５８」に。
ただ、「５８」では、まだまだ改善したとは言えないんですよね。。。
まだまだ改善項目がたくさんある・・・
今回は「Compress JPEG & PNG images」プラグインで画像を圧縮して最適化してきましたが、実は、まだまだ改善すべき項目はたくさんあるんですよね。
CSSやHTMLの縮小、キャッシュなど、やることはいっぱいです。
今後、表示速度の改善方法として、この記事をシリーズ化させていきます！
- 「CSS・HTML・JavaScript縮小」の最適化は「Autoptimizeプラグインは危険！？CSS・HTML・JavaScript縮小には便利ですが」記事を読んでみてください。
|
|
