EWWW Image Optimizerを使って画像を圧縮、ブログ高速化の設定をしよう

2018年12月2日

タイトル画像

画像が多めのブログ、ありますよね?
うちもそうなのですが、一つの記事に平均して10枚ぐらい画像を入れています。

それは、画像から直感的に分かってもらえるような記事作りを心掛けているからです。
しかし、画像が多くなるとその分読み込み速度が落ちてしまい、結果的に読者離れに繋がってしまうようですね…。

そもそも今、うちのブログって重いのかな

初めてPageSpeed Insights で計測してみました↓↓

モバイルのスコア

激重じゃないか…
ちょっと焦りました。モバイルのスコアが34点て…

このままでは、”ユーザーファースト”と思って書いているのに、結果的にそうではなくなってしまうという悲しい結果になってしまいます。
画像が多くなれば読み込みが遅くなるという理論は分かりますので、プラグインで対策をしたいと思います。

h2タイトル画像

EWWW Image Optimizer

WordPressは本当に便利です。
インストールするだけで、記事に投稿した画像を圧縮してくれて、サイズを軽くしてくれるプラグインが存在するとのこと。
その名もEWWW Image Optimizer(イメージ・オプティマイザー)

こちらのプラグイン、設定さえしておけば、これから投稿される画像は自動的に圧縮してくれるそうです。
更に過去記事に対しても圧縮できる機能が備わっているという優れもの。使わない手はありません。

早速インストールしてみよう

WordPress管理画面からプラグインの新規追加を選択、
検索窓に「EWWW Image Optimizer」と入力して、探してみました。

EWWW Image Optimizer インストール

早速インストールして有効化してみました。
次に設定をしていきます。プラグインの画面から設定をクリック。

設定をクリックする

基本設定画面の説明

以下がEWWW Image Optimizerの基本設定画面です。

基本設定画面

項目一つずつ、概要ではありますが記載していきます。

Optimization API Key

有料のAPIキーを購入してここに入力すると、圧縮率を80%に向上できるそうです。
無料では20%だそうです。

デバッグ

有効にすると、設定ページと一括最適化ページに各ページの下部にデバッグ情報が表示されます。
必要無いと思ったのでチェックしていません。

Remove Metadata

画像がオリジナルであった場合の撮影場所やカメラの情報などを削除します。チェック必須だと思います。

各拡張子における最適化レベル

無料ではPixel Perfectか無圧縮しか選べません。
各拡張子に適した最適化コマンド(JPEGだとjpegtranなど)が発行され、画像が圧縮されるようです。
これがこのプラグインのキモですね。

Convert設定画面の説明

変換画面

コンバージョンリンクを非表示

メディアライブラリに表示されるワンクリック変換リンクを非表示が非表示になるようです。
これによって想定していない拡張子の変換を防ぐことが出来るので、チェックするようにします。

その他の設定画面について

その他、設定する必要がありませんので、変更を保存して設定は完了です。

過去記事の画像を圧縮しよう

設定が済んだので、これから投稿される記事に関しては自動で圧縮してくれます。
過去記事に対しての圧縮は手作業なので、以下の手順を踏みます。

まず、管理画面のメディア⇒一括最適化をクリックします。
次に、最適化されていない画像をスキャンするをクリックします。

過去記事の圧縮

スキャンが終わったら、最適化を開始をクリックします。

最適化を開始

最適化が終わったので、もう一度計測してみました。
さぞ、改善されていることでしょう。

圧縮後

に、2%しか改善しとらんやないかい…
ちなみにパソコンでのスコアは97%

パソコン圧縮後

もう、パソコンで見てください。

モバイル最適化への道が、いまここに始まりました。

今回はここまでです。

Wordpress

Posted by te-yama