PageSpeed Insightsを使ってWebサイト（ページ）の表示速度を測ってみると、パソコン版のスコアが70、モバイル版のスコアが84、とパソコン版はもう少し改善したい数値。サイトの表示速度が遅いと、SEOに不利になる可能性やユーザーの離脱率が上がってしまうなどの影響もあるので対策をしてみました
サイトの表示速度の改善として「キャッシュの活用」と「画像の最適化」が比較的効果を出しやすいのではないでしょうか。今回は、WordPressプラグインの EWWW Image Optimizer で画像を最適化したところ、表示速度のスコアが改善されたので、 EWWW Image Optimizer の設定方法や使い方を中心に紹介していきます
目次
[aside type=”boader”]- ■ EWWW Image Optimizerで出来ること
- ■ 画像処理前と画像処理後のサイトの表示速度の比較
- ■ EWWW Image Optimizerのインストール
- ■ EWWW Image Optimizerの設定方法
- ■ EWWW Image Optimizerの使い方
- ■ 画像の最適化で表示速度が改善
EWWW Image Optimizerで出来ること
EWWW Image Optimizerで出来ることはWordPress内の画像のファイルサイズを縮小できます
新しくアップロードする画像は自動的に縮小化され、既にアップロードしている画像は一括での縮小の処理が可能なので大変便利です
以前はTinyPNGというプラグインを使っていましたが、既存画像の処理などをしていたら無料版の月500枚の制限に引っかかってしまったのでEWWW Image Optimizerに変更しました。ただ、新しくアップロードする画像の処理だけなら500枚で充分だとは思います。使い勝手はTinyPNGも良かったので、ご自身のサイトにあったものを使ってください
画像処理前と画像処理後のサイトの表示速度の比較
PageSpeed Insights を使って EWWW Image Optimizer での画像処理前後の表示速度数値を比較してみました。
表示速度を計測するWebサイトはこちら
PageSpeed Insights- Google Developers
パソコン
画像処理前（71 / 100）
画像処理後（80 / 100）
モバイル
画像処理前（84 / 100）
画像処理後（85 / 100）
表示速度を比較した結果
結果は
・パソコンは 9ポイント上昇（71→80）
・モバイルは 1ポイント上昇（84→85）
EWWW Image Optimizer の表示速度の改善効果はありです
EWWW Image Optimizerのインストール
サイドバーの[プラグイン]から[新規追加]を選択して、右上の検索ボックスに[ EWWW Image Optimizer ]と入力
[ EWWW Image Optimizer ] の[今すぐインストール]を選択して、[有効にする] を選択してください
EWWW Image Optimizerの設定方法
専門知識のある方は詳細な選択もできますが、基本的に設定は何も変更せずに充分に使えます。今回は、最低限の項目のみを確認します
1. 基本設定
[メタデータを削除]を選択してください。画像自体とは関係のない日時や位置情報などのデータを削除して軽量化します
2. 高度な設定
[無効にする pngout] にチェックを入れましょう
PNG画像を最適化するには[ PNGOUT ] [ OptiPNG ] [ DeflOpt ] などのソフトがありますが[ PNGOUT ] の設定は面倒なので、デフォルトで設定されている[ OptiPNG ] をそのまま使います。
[aside type=”boader”]プラグインの説明より
3. 変換設定
[ コンバージョンリンクを非表示 ] を選択しますこれを選択しないと
・JPGからPNG
・PNGからJPG
・GIFからPNG
と自動的に拡張子を変えられてしまうことがあります。[ コンバージョンリンクを非表示 ] を選択すれば、これを防ぐことができます
4. WebP 設定
WebPはGoogleが開発しているフォーマットです。対応していないソフトが多いために今回は使用しないので、すべてのチェックは外します
以上で EWWW Image Optimizer の設定は終わりです
EWWW Image Optimizerの使い方
EWWW Image Optimizer の基本的な使い方の機能は2つ
・画像をアップロード時に自動で最適化する
・既にアップロードしている画像をまとめて最適化する
以下でそれぞれについて説明します
1. 画像をアップロード時に自動で最適化
今まで通り、メディアライブラリなどから [新規追加] で画像をアップロードすれば、 EWWW Image Optimizer が自動で画像を最適化してくれます
最適化の結果はメディアライブラリで確認できます
2. 画像を一括最適化
既にアップロードしてある画像をまとめて最適化してくれる機能です
使い方は
1. サイドバーのメディアから [ 一括最速化 ] を選択し、[ 最適化されていない画像をスキャンする ] を選択
2. [ 最適化を開始 ] を選択
あとは、終わるのを待てば画像の最適化が完了です
画像の最適化で表示速度が改善
EWWW Image Optimizer による画像最適化によって、サイトの表示速度が改善されました。
表示速度の改善については、キャッシュを活用してWebサイトの表示速度をあげる方法も紹介しているので、興味のある方は合わせて下記の記事もご覧ください
WP Fastest Cacheの設定方法と使い方 – WordPressキャッシュプラグイン
表示速度の改善に効果のある方法は、各Webサイトによっても様々です。まだ、当サイトでも試していないことは多いので、効果のある方法があれば紹介していきます