WordPressサイトの表示速度を早くするならまずWebP対応しよう

WordPress

WordPressサイトの表示速度アップ

WordPressでサイト・ブログを作っているけど、なんだか表示が遅くなってきている…なんてことはありませんか?

とくに画像をたくさん使うようなサイトだと、表示速度も次第に遅くなってきてしまいます。

画面が完全に表示されるまでに3秒かかると、50%以上のユーザーが離脱してしまうと言われていますので、積極的に表示速度は改善していきたい項目です。

今回は、手っ取り早くサイトの表示速度改善を試すことができる、画像のWebP対応について紹介していきます。

WebP対応にはプラグインが便利

WebPとはGoogleが開発・推奨している画像の形式で、JPEG画像よりも25~34%ほど縮小されるものになっています。

WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

https://developers.google.com/speed/webp

つまり、これまでサイトで使ってきたJPEGやPING画像をWebP形式に変える必要があるのですが、ひとつひとつ変更するのは非常に手間ですよね。

そこで、WordPressにはEWWW Image Optimizerというプラグインがあるので、これを使って手早くWebP対応していくことができます。

EWWW Image Optimizer の設定

まずはざっと手順を紹介します。

①プラグインのページから、 EWWW Image Optimizer をインストール。

② EWWW Image Optimizer の設定画面にあるWebPタブを開き、「JPG,PNGからWebP」にチェックを入れて、変更を保存。

③画面下にあるコードをコピーして、.htaccessに貼り付ける。

④メディアの「一般最適化」で「再最適化を強制」にチェックを入れて、最適化されていない画像をスキャンする。

⑤ブラウザの開発者ツールでWebPになっていることを確認。

それでは順番に見ていきます。

EWWW Image Optimizer をインストール

①のプラグインのページから、 EWWW Image Optimizer をインストールについてです。

プラグインの新規追加ページにいって、検索ボックスに「 EWWW Image Optimizer 」と入力します。

すると対象のプラグインが出てきますので、「今すぐインストール」をして、有効化します。

EWWW Image Optimizer の設定

プラグインのWebP設定

②の EWWW Image Optimizer の設定画面にあるWebPタブを開き、「JPG,PNGからWebP」にチェックを入れて、変更を保存についてです。

EWWW Image Optimizer を有効化すると、WordPress管理画面の左メニュー一覧にある「設定」の中に EWWW Image Optimizer という項目が追加されています。

そこを開くと、画像のような設定画面が表示されます。

EWWW Image Optimizer の設定

設定内容がこの画像と同じようにしてください。

WebPタブを開いて、「JPG,PNGからWebP」にチェックを入れて変更を保存します。

これで、アップロードした画像がWebPに変わるようになります。

未対応ブラウザへの対策

手順③の 画面下にあるコードをコピーして、.htaccessに貼り付けるについてです。

WebPはsafariなどに対応していません。

このままでは画像が表示されないユーザーが出てきてしまいますので、対策をしていきます。

手順②を行った設定ページの下に、コードが表示されたと思います。

EWWW Image Optimizer の設定

このコードをコピーして、.htaccessファイルに追記します。

ファイルの先頭に追加しないとうまく設定できないと言われていますので、1行目に貼り付けましょう。

EWWW Image Optimizer の設定

既にアップロードしてある画像をWebP対応する

手順④の メディアの「一般最適化」で「再最適化を強制」にチェックを入れて、最適化されていない画像をスキャンする についてです。

もうアップロードしてしまっている画像をWebPに対応させなければいけません。

非常に簡単なので、サクッと行います。

まずはWordPress管理画面左メニューの「メディア」の中に「一括最適化」という項目が追加されているので、そちらをクリックします。

アップロードされている画像の最適化設定ページが表示されます。

EWWW Image Optimizer の設定

「再最適化の強制」にチェックを入れて、「最適化されていない画像をスキャンする」ボタンをクリックします。

すると、「xx点の画像を最適化」というボタンが表示されるので、クリックして最適化されるのを待ちます。

WebP対応されたか確認する

手順⑤の ブラウザの開発者ツールでWebPになっていることを確認についてです。

最適化が終わったら、実際にWebP対応されているか確認します。

自分のサイトを開いて、「F12」キーを押します。

DevToolという画面が表示されたら、「NetWork」タブをクリックして、All,XHR,JS…と並んでいる中の「Img」を選択します。

自分のサイトを更新してください。(F5キーやCtr+R、リロードボタンなどなんでもOK)

先程のDevToolの画面に画像の一覧が表示されます。

Typeの項目がwebpになっていたら、成功です。

EWWW Image Optimizer の設定

まとめ

WordPressであれば画像の縮小はプラグインを少し触ることで簡単に行えました。

Webサイトやブログが重くなってきたなと感じている人は、ぜひ試してみて下さい。

もし「難しいよ!」という場合には、Wist Web Supportがあなたの代わりに設定します。

詳しくはWebサイト保守ページをご覧ください。

Wist Web Support サイト保守
柴山 摩亜玖

Wist Web Support の柴山です。
Web開発、WordPress開発を行っています。

関連記事

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