はじめに
こんにちは、エイじーです。
前に表示スピードの計測したら、改善すべき点として、画像圧縮をする必要がありとでたんだが・・・・
画像圧縮する方法でよい方法はないかな。
そうね、初心者でも簡単に使えるプラグインがあるわ。
EWWW Image Optimizer プラグインよ。
と言うことで、今回は「EWWW Image Optimizer」プラグインをインストールした後にファイル容量がどの程度になるのか、ブログの表示スピードがどの程度向上するのかについて紹介したいと思います。なお、使用しているパソコンのOSはWindows10です。
圧縮する前の画像ファイルの容量
圧縮前の画像ファイルの容量がどの程度あるか調べておきましょう。
WordPressのトップの左メニューから「ツール」の「サイトヘルス」をクリックします。さらに、サイトヘルス画面で、「ステータス」と「情報」タブがあるので、「情報」タブをクリックします。下に出てくる「サイトヘルス情報」の「ディレクトリーとサイズ」をクリックします。下の画面のようなディレクトリーごとの容量が表示されます。
画像ファイルは、赤で囲んだ「アップロードディレクトリ」内に保存されているので、その下の緑で囲んだ部分を見ると、16.65GBとなっています。
EWWW Image Optimizer プラグインのインストール
プラグインのインストールは、ここでは細かい説明は省きます。
詳細を知りたいのであれば、次の記事の「初心者におすすめなプラグイン」の「プラグインのインストール」を参照ください。
EWWW Image Optimizerの設定
EWWW Image Optimizerの設定か所は、色々ありますが、細かな設定に関する記事を見つけることができませんでした。そこで、他の記事に倣って設定か所は次の2つのみにしました。例えば、次の記事を参照ください。
「メタデータを削除」にチェックが入っていることを確認。デフォルトのままでよい。下の画像で赤で囲んだ部分にチェックが付いていることを確認して下さい。そして、「変更を保存」をクリックして下さい。
赤で囲んだ「コンバージョンリンクを非表示」にチェックをいれます。そして、「変更を保存」をクリックして下さい。
EWWW Image Optimizerによる画像圧縮変換（最適化）
さて、いよいよ画像圧縮変換（最適化）に入りますが、その前にファイルマネージャ、FTPソフトなどで画像フォルダー全てのバックアップを取っておいてください。何か、圧縮変換途中でトラブルが起きた場合に、画像データが壊れたりして、戻せなくなる可能性があるからです。なお、有料版であれば、バックアップを取ってもらえるようですが、無料版で使う以上は、自分の責任でバックアップは必ず取られたほうが良いと思います。
ここでは、そのバックアップの方法などは省きますが、例えば、次の記事などにWordPressの全体のバック方法などが書かれていますが、この中の画像のみのバックアップをすればよろしいかと思います。もちろん、全体のバックアップでもかまいません。
それでは、実際に一括で画像の圧縮変換を行ってみましょう。WordPressの左に表示されるトップメニューから「メディア」の「一括最適化」をくリクして下さい。
一括最適化の画面が出てきたら、「最適化されていない画像をスキャンする」をクリックして下さい。一括最適化の画面が切り替わり、次の画面が現れます。この画面で「5610点の画像を最適化」をクリックして下さい。5610個の画像があることが分かります。非常に多くの画像があったことにびっくりしています。
この一括最適化に要する時間が非常に長くかかりました。10時間ぐらいでしょうか。今回のように最適化する画像が多い場合は、他の方法を考えたほうが良いと感じました。
最適化後の画像ファイルの容量
WordPressのトップの左メニューから「ツール」の「サイトヘルス」をクリックします。さらに、サイトヘルス画面で、「ステータス」と「情報」タブがあるので、「情報」タブをクリックします。下に出てくる「サイトヘルス情報」の「ディレクトリーとサイズ」をクリックします。下の画面のようなディレクトリーごとの容量が表示されます。
最適化後の画像容量は、緑で囲んだ16.43GBとなりました。最適化前の画像容量が16.65GBでしたので、ほとんど圧縮されていないことになります。圧縮率を計算すると（16.65-16.43）÷16.65×100 ≒1.3%となります。
画像を圧縮して容量を小さくしたいのであれば、他の方法を考えた方が良いと感じました。
画像最適化後の表示スピードの計測
PageSpeed InsightsとGTmetrixの2つの方法で計測してみました。これらの計測の仕方などについては、次の記事を参考にしてください。
この記事中に書いていますが、画像圧縮後の表示スピードと比較するために画像圧縮前の表示スピードを下に示しておきます。
- PageSpeed Insightsの結果
モバイルでの表示スピード ： 60点
パソコンでの表示スピード ： 77点 - GTmetrixの結果
ページスピードスコア ： E (44%)ランク
Yスロースコア ： A（91％）ランク
先ず、画像圧縮（最適化）後のPageSpeed Insightsの結果です。
上の画像の70点は、モバイルの表示スピードです。パソコンの表示スピードにすると79点でした。圧縮前の表示スピードは、モバイルで60点、パソコンで77点でしたので、多少改善されていますが、まだまだ、改善の余地があることを示しています。
次が、画像圧縮（最適化）後のGTmetrixの結果です。
最適化前の表示スピードと比較すると
ページスピードスコアがE（55％）⇒D(64%)、YスロースコアA（91％）⇒A（91％）とページスピードスコアが1ランクアップして改善が認められましたが、まだまだ改善の余地があることを示しています。
おわりに
EWWW Image Optimizerをインストールして、既にWordPressの中にある画像を圧縮（最適化）し、また表示スピードを計測した結果のまとめは次の通りでした。
- EWWW Image Optimizerで画像圧縮（最適化）の結果はそれほど圧縮の効果が見られなかった。しかも、画像ファイルが多い場合、最適化に要する時間が非常が長くかかった。（私の場合、5600程度の画像ファイルで約10時間を要した。）
- 画像圧縮でもっと画像容量を小さくしたいのであれば、他の方法を考えたほうが良い。
- EWWW Image Optimizerで画像圧縮（最適化）後の表示スピードをPageSpeed InsightsとGTmetrixで計測して、圧縮（最適化）前の表示スピードと比較した結果、多少の改善は見られたものの、まだまだ改善する余地があることが分かった。（私の場合、PageSpeed Insightsの結果は、モバイルで60点⇒70点、パソコンで77点⇒79点となり、GTmetrixの結果は、ページスピードスコアでE（55％）⇒Ｄ（64％）、YスロースコアでA（91％）⇒A（91％）となり、どちらも多少の改善が見られた。）
以上です。
コメント