みやちサイト制作所

未経験でもWEBサイト制作で稼ぐためのノウハウまとめ

閉じる

「EWWW Image Optimizer」の有効な設定方法〜webp画像で読み込み速度を改善

ewww image optimizer

サイトの読み込み速度を左右する鍵となるのは、間違いなく「画像」です。

実際に、サイトの読み込みに必要な容量の約80%が画像とも言われており、画像の管理をしっかりしていないとあっという間にサイトが重くなります。

ただし、何をどうしたら「画像を入れてもサイトが重くならないか」はわからないですよね。

trouble
画像の読み込みに時間がかかって、サイトが重い…

と悩んだことがある方には、WordPressのプラグイン「EWWW Image Optimizer」が断然オススメです。

このプラグインを入れて、適切に設定をしておくだけで読み込み速度がかなり改善されます。

実際に、数秒単位で読み込みが早くなることも多いです。

miyachi2
プラグインの入れ方から設定方法までをまとめたので、誰でも簡単にサイトの読み込み速度を改善できるよ

【この記事の目次】

プラグイン「EWWW Image Optimizer」でできること

プラグイン「EWWW Image Optimizer」では、主に以下のことができます。

  • WordPressサイトで使われている画像のサイズを最適化
  • 読み込みが早いwebp形式の画像を利用
ポイント

webp(ウェッピー)とは、Googleが推奨している画像形式の一つ。jpg, png, gifなどの一種で「画質は綺麗だが軽い」ことが特徴

このプラグインは、導入前にサイトに入れた画像もまとめて最適化してくれる優れものです。

miyachi
WordPressを使っているのであれば、間違いなく導入したほうがいいプラグインの一つだよ!

WordPressサイトにプラグイン「EWWW Image Optimizer」を入れる方法

管理画面の「プラグイン」メニューをクリックします。

プラグインの新規追加

タイトルの横にある「新規追加」をクリックしてください。

プラグインを検索・追加

表示された画面の右上にある検索欄に「EWWW Image Optimizer」と入れ、出てきたプラグインの「今すぐインストール」をクリックします。

しばらくすると「有効化」という青いボタンに変わるので、再度クリックすればOKです。

※「EWWW Image Optimizer Cloud」の方ではないので注意してください。

EWWW Image Optimizerの有効な設定方法

EWWW Image Optimizerを有効化したあとは、きちんとプラグインが効果をあげられるように設定する必要があります。

プラグインを有効化したあとに、設定する項目は3つあります。

  • Basic
  • Convert
  • webp

設定画面は、管理画面の「設定」にある「EWWW Image Optimizer」です。

EWWW Image Optimizer

設定すべき項目を一つずつ説明してきますね。

EWWW Image Optimizerの「Basic」設定

EWWW Image Optimizerのbasic設定

Basicタブでは、「Remove Metadata」にチェックを入れて「変更を保存」ボタンを押します。

メタデータというのが、画像の撮影場所やカメラ情報など「画面上には出てこないシステムデータ」です。

サイトには必要ない情報ですが、メタデータがあるだけで画像が重くなるので消しておきましょう。

EWWW Image Optimizerの「Convert」設定

EWWW Image OptimizerのConvert設定

Convertタブでは「コンバージョンリンクを非表示」にチェックをいれて「変更を保存」ボタンを押します。

ここにチェックを入れておかないと、サイトが勝手にjpg画像をpng画像にするなどの不要な変換を行ってしまいます。

不必要に変換した画像は画質が下がってしまう可能性があるので、無駄な変換をしないようにチェックをいれておく形です。

EWWW Image Optimizerの「webp」設定

EWWW Image Optimizerのwebp設定

webpタブでは「JPG, PNGからWebP」にチェックを入れて、「変更を保存」ボタンをクリックします。

これで、サイト上で軽量のwebp形式で画像を表示する準備が整いました。

EWWW Image Optimizerがきちんと動くために.htaccessを編集する

webp画像は、まだすべてのブラウザで表示することができません

具体的にはSafariやIEではいまだ未対応となっています。

Safariでは試験的に表示を検討しているとの話もありますが、2019年7月現在、まだ難しい状況です。

そこで、webpに未対応のブラウザでは変わらずpngやjpgで画像を表示する必要があります。

サーバーにある.htaccessに「ブラウザによってwebpか否かの表示コントロールをしてね」とお願いを書き込んでおくのです。

ポイント

.htaccessとは、サーバーの設定ファイル。表示するページの制御や、リダイレクトの設定ができる

差し込むコードは、ページの一番下に表示されています。

htaccessに差し込むコード

左下ににある「リライトルールを挿入する」というボタンを押すと、サーバー上にある.htaccessファイルを探し出して自動挿入してくれます。

ただし、場合によっては重大なエラーを招く可能性があるので、できれば手動での挿入をオススメします。

.htaccessの編集方法は、利用しているサーバーによって異なるので注意してください。

Xserverで.htaccessを編集する

.htaccessによるアクセス制御 – さくらのサポート情報

.htaccessによるアクセス制御 – さくらのサポート情報

.htaccessを配置することで、ウェブアクセスに関わる設定を行なう事ができます。 前提条件 .htaccessファイルの作成方法 mod_rewriteを使ったアクセス制御 U…

.htaccess利用法 / サーバー・プログラム / マニュアル - レンタルサーバーならロリポップ!

.htaccess利用法 / サーバー・プログラム / マニュアル – レンタルサーバーならロリポップ!

ロリポップ!レンタルサーバーのご利用マニュアル ロリポップ!レンタルサーバーでの.htaccessの設定などを説明したマニュアルページです。

スターサーバー「.htaccess」の場所はココだ!

スターサーバー「.htaccess」の場所はココだ!

スターサーバーのサイト上で「.htaccess」に辿り着く方法をご紹介します。

コードを差し込む場所は、

# BEGIN WordPress

と書かれた場所の前です。

具体的にはこうなります。

htaccessに差し込み

※「#BEGIN WordPress」 の前に何が書かれているかはサイトによって異なります。

挿入後、WordPressにあるEWWW Image Optimizerの設定画面に移動してください。

画面の一番下にあった赤い「PNG」画像が、緑の「WEBP」画像に変わっていたら成功です。

EWWW Image Optimizerの設定状況
miyachi
これでEWWW Image Optimizerの設定はすべて完了!

EWWW Image Optimizerの設定が終わったあとは、これまでにサイトに上げた画像をまとめて最適化する

ここまででEWWW Image Optimizerはすべて完了したので、設定をこれまでにサイトで使った画像にも適用させます。

画像の一括最適化

「メディア」のサブメニュー「一括最適化」を選び、右側に表示されたものの中にある「最適化されていない画像をスキャンする」をクリックします。

すると自動で既存の画像を最適化してくれます。

miyachi2
これで画像の飲み込み速度が変わるよ

WordPressを利用しているならEWWW Image Optimizerを入れて画像の最適化をしておく

サイトの読み込みが遅くなる原因の第1位は間違いなく「大きすぎる画像」です。

手動で一つずつサイズを調整するのは大変ですし、そもそもきちんとした知識がないと難しいもの。

trouble
サイトが重いな…

と思ったら、まずはプラグイン「EWWW Image Optimizer」を導入してください。

  • 表示するのに最適な画像サイズになるよう調整
  • ウェブ表示に最適化されたwebp形式の画像を利用

などを一括で行ってくれます。

miyachi2
読み込み速度はサイトの離脱率に大きく影響するので、早めの対策を!

サイトを効率的に作るための
秘蔵ノウハウを発信中

note

開発の基本的な部分はもちろん、コードをより素早く理解して書くための「コツ」をまとめました。15年の開発経験に裏付けられたノウハウをどうぞ!

詳しくはこちら

記事をシェア