【特集】WordPress高速化への挑戦!

WordPress高速化!全画像を一括圧縮するEWWW Image Optimizerの使い方!!

「いいね!」するビジネスウーマン

WordPressを高速化するために画像を圧縮するという対策があります。

これからブログを作っていこうということならまだしも、

既に作っているブログ、それも過去膨大なコンテンツを作ってきたブログに対して

1つ1つ画像を圧縮するなどということは無謀なことです。

 

で、今回はアップロード済みの画像もこれからアップロードする画像も全て

一括で自動的に圧縮してくれるEWWW Image Optimizerという

プラグインの使い方を紹介します。

 

また、このプラグインを使ってどの程度高速化の効果があったかについても

最後にお伝えしておきますね。

EWWW Image Optimizerとは?

EWWW Image Optimizerは、画像の質を劣化させることなく圧縮してくれる

WordPressのプラグインです。

導入後にアップロードする画像はもちろん、

既にアップロードしている画像も一括で圧縮してくれる優れモノです。

さらに、WordPressテーマが持つ画像も圧縮できるのです。

 

ところで、

なぜ画像を圧縮する必要があるのでしょうか?

 

WordPressのサイトを読み込むとき、当然画像も読み込まないといけません。

画像の数が多く、さらに1つ1つの画像サイズが大きければ

それだけ読み込みに時間がかかります。

 

これはユーザにとって非常にストレスを感じることです。

見たいサイトがなかなか表示されないという経験は、あなたにもあるのでは?

それを思い起こせば、読み込みに時間がかかることの問題の大きさが

理解できると思います。

 

ということで、EWWW Image Optimizerを使って

画像を圧縮してサイトを最適化していく方法を見ていきましょう。

EWWW Image Optimizerのインストール

プラグインの探し方

WordPressのプラグインの新規追加画面で「EWWW」で検索しましょう。

それですぐに見つかります。

 

EWWW Image Optimizerインストール画面

 

Cloudとつくプラグインもありますが、それは違います。

「EWWW Image Optimizer」を選んでください。

 icon-external-link 【参考】EWWW Image Optimizer公式サイト

プラグインの設定

次にプラグインの設定に入ります。

とはいえ、デフォルトのままでOKで、一応確認する程度です。

1か所だけ設定変更する箇所があるだけです。

 

WordPressの設定メニューから「EWWW Image Optimizer」を選んでください。

 

まずは、基本設定。

ここでは「メタデータを削除」にチェックが入っていることを確認すれば

他はデフォルトのままでOKです。

EWWW Image Optimizer-基本設定

 

次、高度な設定。

ここも「無効にする pngout」にチェックが入っていることを確認するだけ。

他はデフォルトのままでよいです。

EWWW Image Optimizer-高度な設定

 

最後に変換設定ですが、ここは1か所設定を変えます。

「コンバージョンリンクを非表示」にはチェックが入っていないと思いますので、

チェックをいれてください。

圧縮による画像の劣化を抑えるために有効にしておきます。

EWWW Image Optimizer-変換設定

 

WebPは無視していいです。

以上で設定は終わり。

実際に画像を圧縮してみましょう。

【広告】

アップロード済みの画像を一括で圧縮する

WordPressのメディアメニューに「一括最適化」という項目が追加されていますので

それをクリックします。

EWWW Image Optimizer-一括最適化①

 

初めて使うときは、「最適化されていない画像をスキャンする」をクリックします。

何度か使っていて、あらためてすべての画像を最適化し直したい場合は、

「再最適化を強制」にチェックを入れておいてください。

 

クリックすると、最適化の対象となる画像を探し始めます。

画像が見つかるとこのような画面になります。

下の例では、608個が最適化の対象として見つかりました。

EWWW Image Optimizer-一括最適化②

 

「最適化を開始」ボタンをクリックしましょう。

これで画像の最適化(圧縮)が開始されます。

最適化処理中は、時間がかかりますので気長に待ってください。

 

処理が完了すると結果が表示されます。

最適化された画像の名前と減少したサイズが表示されていますね。

EWWW Image Optimizer-一括最適化③

 

なお、EWWW Image Optimizerを導入した後にアップロードした画像は

特に何もしなくても自動で圧縮されるんです。

めっちゃ使い勝手がいいですね!!

画像を圧縮した効果

EWWW Image Optimizerで画像を圧縮したことで

どれくらいサイトの高速化に貢献できたのでしょうか。

GoogleのPageSpeed Insightsのスコアで見てみることにしましょう。

 

画像圧縮前後のモバイルの結果です。

EWWW Image Optimizer導入前-モバイル

↓ 

EWWW Image Optimizer導入後-モバイル

 

次に、パソコンの結果です。

EWWW Image Optimizer導入前-パソコン

↓ 

EWWW Image Optimizer導入後-パソコン

 

モバイルではスコアに変動ありませんが、パソコンで3ポイントの改善です。

そもそも画像はすべて圧縮してからアップロードして使っていましたので

大きな効果がないのは当然と言えば当然です。

 

こういう改善は少しずつの積み重ねです。

常に最適化できる環境にしておくことで、良いパフォーマンスを維持できることに

つながりますね。

まとめ

画像が大きすぎるとサイトが重くなる大きな原因になります。

圧縮することはもちろんのこと、JPEG、PNG、GIFをうまく使い分けることも有効です。

これについては、また別の記事で。

【広告】

関連記事

  1. すべてを許したくなるエンジェル笑顔

    WordPressで投稿済みの記事を一括置換できるSearch Regexの使い方!!

  2. 指をさすビジネスウーマン

    HTML・JavaScript・CSSを縮小するAutoptimizeの使い方と効果を検証

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

WordPressテーマ「SKIN(TCD046)」

人気記事

  1. 目を閉じるたびに思い出す
  2. はい、正解は私でした
  3. 休日を読書で過ごす女性
  4. ごめん、待たせちゃった・・・
  5. イケメンにフィッシュオン!
  6. 指をさすビジネスウーマン
  7. 「いいね!」するビジネスウーマン
  8. 「問い合わせ先はコチラ!」と告知する地方局のアナウンサー
  9. スマホで健康管理を行う意識の高い女性
  10. SNSで流れてきた商品をポチろうか悩んでいる女子

広告




おすすめ記事

  1. ランタンを見つめる文学美女 WordPress最適化をした結果PageSpeed Insightsスコアはど…
  2. SNSで流れてきた商品をポチろうか悩んでいる女子 ブログの表示速度を遅くしないための広告の貼り方とは!?
  3. 「OK、そういうこと!」と締めくくるキラキラ女子 賢威7を使ってココが良かったと思う3つのこと(投稿画面編)
  4. 目を閉じるたびに思い出す PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!…
  5. はい、正解は私でした 賢威7サイトタイトルとトップページタイトルの違いを易しく説明します!!
  6. メモを取る女性 お名前.comからエックスサーバーへのドメイン移管手続き備忘録
  7. すべてを許したくなるエンジェル笑顔 WordPressで投稿済みの記事を一括置換できるSearch Regexの使い…

特集記事

  1. SNSで流れてきた商品をポチろうか悩んでいる女子 ブログの表示速度を遅くしないための広告の貼り方とは!?
  2. ごめん、待たせちゃった・・・ deflateを使用してリソースを圧縮する方法!WordPressが劇的に高速化…
  3. 「いいね!」するビジネスウーマン WordPress高速化!全画像を一括圧縮するEWWW Image Optimi…
  4. イケメンにフィッシュオン! WordPress高速化のための最適なJPEG/PNG/GIF使い分けはこれだ!…
  5. 目を閉じるたびに思い出す PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!…
  6. 指をさすビジネスウーマン HTML・JavaScript・CSSを縮小するAutoptimizeの使い方と…
  7. 休日を読書で過ごす女性 ブラウザのキャッシュを活用する-たったの5分で改善する方法!!
PAGE TOP