EWWW Image Optimizerの使い方!画像を圧縮し高速化

ewww image optimizer 使い方

wordpressは専門的な知識がない人でも
便利なプラグインを使用することで、
簡単にブログ運営ができるツールです。

アメブロやFC2、
はてなブログ、
ライブドアブログ…などの、

いわゆる「無料ブログ」
ではないもので作りたい!
という人にとっては、最適なツールです。

初心者でも扱うことができ、
さらに
「SEO対策に強い」
ことで有名です。

wordpressでブログを運営していると、
「あれ?最近、表示が遅いなあ」
と感じることはありませんか?

表示スピードが落ちると、
閲覧者の離脱率が上がり、
検索順位も下がってしまいます。

こんな時こそ、
便利なプラグインの登場です!

ブログが重い原因の一つとして、
画像ファイルサイズが
大きいことが挙げられます。

それを一気に解決してくれる
便利なプラグイン
ewww image optimizerの使い方をご紹介します。

目次

1.なぜブログ表示速度を改善する必要があるのか?
2.表示速度を調べてみよう!
3.ブログが重くなる原因の一つは画像ファイルの大きさ
4.ewww image optimizerで画像をサクッと最適化してみる
5.ewww image optimizerでどのくらい圧縮したのか確認してみよう
6.ewww image optimizerで今までのメディアライブラリの画像を一括で圧縮してみよう
7.再度、表示速度を再計測
8.まとめ

1.なぜブログ表示速度を改善する必要があるのか?

何か調べたい!と思った時に、
インターネットで検索しても

• なかなか表示してくれない
• 開くのに時間がかかる

と思うこと、ありませんか?

そんな時、
サイトに訪問に来たユーザーは
その間待たされてしまうので、

「もういいや」

とそのページを開くことなく
帰ってしまいます。

もっと早く
表示してくれるページを
訪問するようになります。

いくら良質な記事を作ったとしても、
訪問に来るユーザーが
ページを開く前に
帰ってしまっては意味がありません。

表示速度の改善は
ユーザーにとって、

最適な表示なページにするために、
必要不可欠な要素になります。

以下引用:
ページの表示にどれぐらい時間がかかると「遅い」と感じるのか。
約半数のユーザーは、ページ表示の待ち時間が
2秒を超えるとイライラし始めるようです。

ページの読み込みが何秒くらいで終わることを期待するか
という設問に対して、47%の消費者が「2秒」と答えています。

2006年の調査では4秒という判断でしたから、
3年でユーザーはかなりせっかちになっているということですね。

実際のデータでは、最も多かった回答は
「3秒台」ですが、全体の半数に対して
イライラを感じさせないという観点からみると、
2秒台となるわけですね(2秒台以内の合計が47%)。

  • 4秒超 17%
  • 3秒 36%
  • 2秒 30%
  • 1秒 12%
  • 1秒以下 5%

参照元:Web担当者フォーラム

1-1.ページビューが上がる

ブログの表示速度が上がると、
そのページにユーザーが
訪問しやすくなります。

必然的にページを見られることが
多くなるのでページビューも
上がっていきます。

ページビューとは、あるウェブサイトが
一定期間内に閲覧された回数。

参照元:ページビュー

1-2.SEOにも好影響

表示スピードが検索順位に影響が出ることは、
公式に発表されています。

2010年4月、米Googleが
検索順位の決定要素のひとつとして
サイト表示スピードを考慮することを発表しています。

Google incorporating site speed in search rankings
Using site speed in web search ranking

Googleは上記で影響度は
それほど大きくないものの、
ランキング要因の一つであることを
公表しています。

参照元:sitest

サイトの検索順位を決めるには、
クローラーと言われるロボットが
役割を担っています。

このクローラーが、
googleの中を巡回していくため、
表示速度の遅いページ、
いわゆる中身が重いページになると

情報を処理するのに
時間がかかってしまいます。

表示速度を改善することで、
クローラーに巡回してもらいやすい
ページになります。

クローラー(Crawler)とは、
Googleなどのロボット型検索エンジンが
WEB上のファイル(HTML文書だけでなく、
画像・PDFまで含む全般)を
収集するためのプログラムのことです。

クローラーによって収集されたデータが
インデックス化され、巨大な検索データベースが
作成されます。「ロボット」「スパイダー」などとも呼びます。

参照元:SEO HACKS

表示速度を改善して、
クローラーに好かれる
ブログにしていきましょう。

2.表示速度を調べてみよう!

実際に
自分のブログの表示速度は
どのくらいなのか?

チェックできるツールがあるので、
調べてみましょう。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

検証するのは、

  • トップページ
  • 画像の多いページ

のURLを入力して計測します。

  • モバイルの場合の速度
  • パソコンの場合の速度

両方表示されます。

ewww image optimizer 使い方

ewww image optimizer 使い方 X/100でサイト速度が表示されます。

またそれぞれにどこをどう
修正したらいいのかも
教えてくれます。

「修正が必要」として
出てくる項目を見てみます。

ewww image optimizer 使い方

「画像を最適化する」
の下にある

「修正方法を表示」
をクリックすると、

どの画像を修正するといいのかを
表示してくれます。

ewww image optimizer 使い方

修正が必要な箇所を改善していくと、

表示速度が上がる

というわけです。

3.ブログが重くなる原因の一つは画像ファイルの大きさ

ブログの中身の容量を占めているのは、
ほぼ画像ファイルと言っていいでしょう。

重くなる場合は、
このサイズが大きいことが原因です。

ブログを運営していくにあたって、
画像は重要な役割をしているので
なくすわけにもいかないですよね。

かといって、一つ一つを修正するのは
とても時間がかかります。

また、今後も
画像をアップするたびに、
画像ファイルサイズを圧縮して…
という手間をかけるのも

ちょっと面倒くさい…

そんな時にプラグインが便利なんです!

4.ewww image optimizerで画像をサクッと最適化してみる

ewww image optimizerプラグインの
いいところは、画像ファイルをメディアに
アップロードする時点で
自動的に圧縮してくれます。

また、過去にアップした画像も
全てクリック一つで

最適なサイズにしてくれる

という優れもの。

ファイルサイズが小さくなるから、
画像が劣化するんじゃないの?
という心配もいりません。

デフォルトでは、
見た目の見分けはつきません。

4-1.ewww image optimizerができること

  • 画像を圧縮して最適化してくれる
  • メディアにアップするものを自動的に最適化
  • すでにメディアにある画像も最適化
  • 画像の劣化が見た目で見分けがつかないほどない

では、早速使っていきましょう。

4-2.ewww image optimizerのインストール

インストール手順
WordPressのダーシュボードに行きます

左のメニューから「プラグイン」をクリック

「新規追加」をクリック

ewww image optimizer 使い方


右上の検索窓に
ewww image optimizer」を入力してクリック

ewww image optimizer 使い方


ewww image optimizer
「今すぐインストール」をクリック

「今すぐインストール」が
「有効化」ボタンに変わるので、
「有効化」をクリック

ewww image optimizer
インストールができました!

4-3.ewww image optimizerの設定

設定画面

ewww image optimizer 使い方

表示は日本語化しています。
英語表記の場合も設定は同じです。

4-3-1.「基本設定」

まず、最初の画面「基本設定」から。
「メタデータを削除」にチェックを入れますが
すでにデフォルトでチェックが入っています。

ewww image optimizer 使い方

これは、画像に何か使わない文章が
ついている場合は、自動で削除してくれ、
サイズを圧縮してくれます。

4-3-2.「高度な設定」

デフォルトでOK

ewww image optimizer 使い方

4-3-3.「変換設定」

「コンバージョンリンクを非表示」
チェックを入れます。

ewww image optimizer 使い方

これは、
ewww image optimizerを有効化すると、
画像をアップしたメディアライブラリで
ボタンを押すとJPG画像をPNG画像に
変換できるようになります。

この機能は、
おそらく必要になることが
ほとんどありません。

これをチェックすると、
JPG画像をPNG画像に変換できるボタンが
表示されなくなります。

不必要な表示はいらないので、
チェックして非表示にしておきます。

もちろん、
PNG画像に変換したい人は
チェックはいりません。

4-3-4.デフォルトのままでOK

他の設定は何もしなくて、
デフォルトのままでOKです。

最後に
「変更を保存」を押して
設定完了です。

5.ewww image optimizerでどのくらい圧縮したのか確認してみよう

EWWW Image Optimizerは、
設定完了した後、

画像を新しくメディアにアップすると
自動ですぐに圧縮してくれます。

左メニューから
「メディア」をクリックし、
新規に画像ファイルを
アップロードしてみましょう。

右側に表示が出てきます。

ewww image optimizer 使い方

どのくらい圧縮したのか、
圧縮後のファイルサイズの
容量も表示されます。

(+)をクリックすると、
さらに詳しい画像サイズと
圧縮した割合が表示されます。

ewww image optimizer 使い方

成功!

6.ewww image optimizerで今までのメディアライブラリの画像を一括で圧縮してみよう

メディアライブラリで、
EWWW Image Optimizerを設定する前に
アップロードしたものを見てみると

「今すぐ最適化!」
ボタンがあります。

ewww image optimizer 使い方

これをクリックすると、
画像が圧縮されるのですが
一つ一つ押していては、
日が暮れてしまいます。

そこで、
EWWW Image Optimizerの便利な機能
「一括最適化」
を使います。

ewww image optimizer 使い方

左のメニューから「メディア」をクリック

「一括最適化」をクリック

「最適化されていない画像をスキャンする」
ボタンをクリックすると、

これだけの画像最適化されていませんよ、
という数字が出てきます。

「最適化を開始」ボタンに変わるので、
クリックすると最適化開始です。

ewww image optimizer 使い方

「完了」の表示が出たら、
無事成功!

メディアライブラリに戻って
圧縮されたか確認してみてください。

先ほどと同じように
右側にどのくらい圧縮されたのか
画像最適化の表示が出ているはずです。

7.再度、表示速度を再計測

先ほどのツールを使用して、
再度計測してみます。

PageSpeed Insights

すると、結果、
数字が上がってます!

ewww image optimizer 使い方

ewww image optimizer 使い方

8.まとめ

サイト表示速度のスピードを上げることで、
ページビューが上がり、
検索順位で優位になります。

表示速度が遅い原因は、
ブログが重いからです。

重い容量を占めているのは、
画像ファイルのサイズであることが
ほとんどです。

wordpressの便利なプラグイン
ewww image optimizerを使って、
サクッと画像を圧縮、最適化
しちゃいましょう。

ewww image optimizerは

  • 過去のアップロードした画像
  • これからアップロードする画像

を簡単に圧縮できるプラグインです。

サクサク表示できる
ユーザーに最適な閲覧環境を
作り上げてください。

合わせて読みたい

コメントを書いてお友達と情報を共有しましょう!