WordPressブログで画像をWebPに対応しサイト表示速度を改善する方法

WordPressブログで画像をWebPに対応しサイト表示速度を改善する方法

モバイルサイトの読み込みに「3秒以上」かかると「53%」の人が閲覧を止めて離脱し、時間が長くなるほど直帰率も高くなる!

Google神

Google神が発表しているように、サイトの表示速度が遅いと、皆さん待ちきれずに別サイトに行ってしまう傾向にあるようです。せっかく見に来てくれたのに、これではもったいないですよね…

サイトの表示速度を改善する方法はいくつかありますが、一番ネックになるのは「画像」です。

画像の圧縮や、リサイズも有名な手法ですが、今回はGoogle神が推奨している「次世代フォーマットでの画像の配信」に挑戦すべく、サイト内の画像を全て、WebP(うぇっぴー)に変換したいと思います!

もぐもぐ

うぇっぴーって名前、可愛いねぇ!
私もやってみたいけど、簡単に対応できるのー?

運用ちゃん

大丈夫!プラグインを使えば、比較的簡単に対応できるよ!

サイト評価もあがります!

Googleのページ速度チェックツール 「PageSpeed Insights」 で「改善できる項目」に「次世代フォーマットでの画像の配信」と指摘された方も、下記の方法を実践するだけで改善されますので、是非とも挑戦してみてください!

WebP(うぇっぴー)とは?

WebPとはGoogle神が主導となって開発している新しい画像形式です。

WebPの特徴

WebP 最大の特徴は「画質綺麗なのに軽い」という事!

Google神の情報によると、PNGに比べ26%軽く、JPGより25〜34%軽くなるそうです。
ファイルの拡張子はそのままですが「○○○.webp」 となります。

WebP対応ブラウザー

Can I Use によると、主要ブラウザ―(Edge、Firefox、Chrome、Opera)では対応していますが、Apple社のSafariは、まだ未対応のようですね。(2020年3月現在)

AppleはWebPとは違い、独自の画像フォーマットを開発しているようなので、今後どうなるのかは不明ですが、一般的な画像フォーマットとして扱われる事への期待は高まっています。

WebP形式に変換する方法(WordPressではない人向け)

Google神が作成した画像変換サイト「squoosh」で変換するのが一番楽かと思います。

ブラウザー上で画像ファイルを選択、または、ドラッグ&ドロップをする事で、変換ができます。
変換可能な形式としては、JPEG、PNG、WebP等が選択可能で、スマホからでも利用可能です。

WebP導入時の注意点 (WordPressではない人向け )

上記でもご紹介したように、WebP未対応ブラウザーが存在します。この未対応ブラウザーでWebP画像を閲覧した際は、当然画像が見れなくなってしまうので、対策が必要となります。

今回は、WordPressのプラグインで対応を行うため、この設定は不要となりますが、WordPress以外の方は参考になるかと思いますので、概念(仕組み)だけご紹介します。

画像を表示する際、HTMLの「picture」タグを利用することにより、WebP対応ブラウザならWebP、WebP未対応ならJPEGやPNGという書き方ができます!

<picture>
   <source type="image/webp" srcset="image.webp" />
   <img src="image.png" />
</picture>

これだけで、WebP化の対応は完了です。

サイト内のすべての画像を変換するのは大変だよ…という方は、最低でもメインとなる大きいヘッダー画像等の変換だけはやっておきましょう!

WebPの設定方法(WordPress向け)

WordPressで設定する場合、EWWW Image Optimizerというプラグインを利用すれば、簡単にWebP化できます。

運用ちゃん

途中、1箇所だけ慎重に作業する必要はありますが、手順通り進めていけば大丈夫です!

プラグイン「EWWW Image Optimizer」とは

画像を劣化させる事なく、ファイルアップ時に自動でサイズを圧縮してくれる有能プラグイン「EWWW Image Optimizer」を利用します。

また、このプラグインの良い所としては、新しい画像をアップロードする時に、自動圧縮してくれるだけでなく、既にアップ済みの画像も一括圧縮できちゃうので、非常に便利なプラグインです。

プラグイン「EWWW Image Optimizer」のインストール

1.サイドメニューの「プラグイン」▶「新規追加」をクリック
画面上の方にある「新規追加」ボタンを押下します。

2.EWWW Image Optimizerを検索して「今すぐインストール」▶「有効化」
検索窓に「EWWW Image Optimizer」と入力してプグインを検索します。
Cloudの方は日本語化対応していないらしいので、左側のプラグインをインストールしよう!

インストールが終わると、ボタンが「有効化」というボタンに切り替わりますので、有効化してください。

プラグイン「EWWW Image Optimizer」の設定方法

1.EWWW Image Optimizerをクリック
無事インストールが完了すると、サイドメニューの「設定」の中に「EWWW Image Optimizer」というメニューが追加されています。クリックして詳細画面を表示しましょう。

2.「メタデータを削除」をチェックする
ベーシック」タブを開き「メタデータを削除」にチェックを入れます。

メタデータとは画像の詳細情報みたいなもので、撮影場所や日時、場所、カメラ情報などが画像に埋め込まれています。

これらの情報が入った画像をサイトにUPするのはセキュアではありませんし、サイト上不要な情報となりますので、削ぎ落として圧縮してもらいましょう。

チェック後は必ず保存!

3.「コンバージョンリンクを非表示」をチェックする
つぎに「変換」タブを開き「コンバージョンリンクを非表示」にチェックを入れます。

このチェックを入れておくことで、拡張子の自動変換が行われないので、JPGでUPしたものがPNGに変換されたりするのを防ぐ事ができる。

不用意に自動変換されてしまうと画質の劣化につがなる恐れがあるので、必ずチェックしておこう。

チェック後は必ず保存!

3.「JPG、PNGからWebP」をチェックする

最後に「WebP」タブを開き「JPG、PNGからWebP」にチェックを入れます。

チェック後は必ず保存!

.htaccessファイルに追記する

上記の設定を終えると、「WebP」タブの下の方に、下記のようなコードが表示され、さらに右下にPNG」と赤色で表示されます。(設定が完了するとPNGの所がWebPに変わります

1.「.htaccessファイル」に追記する

この作業はレンタルサーバーによってやり方が異なります。

主要なレンタルサーバーであれば、管理画面からWeb上で「.htaccess」を編集可能だと思います。もし無理な場合は、FTPクライアントを利用し編集すると良いと思います。

編集できる所までたどり着いたら、下記のコードをファイルの冒頭に追記します。
(既存コードは消さないでね!)

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

これを追記する事により、WebP対応ブラウザならWebP、WebP未対応ならJPEGやPNGという切り分けを勝手にやってくれるようになります。

既存の画像ファイルをWebP形式へ一括変換

サイト内の既存ファイル(PNGやJPGファイル)を一括変換機能でWebP化します。

1.「最適化されてない画像をスキャンする」をクリック

サイドメニューの「メディア」の中に「一括最適化」というメニューがありますのでクリックします。

画面を開くと「最適化されていない画像をスキャンする」というボタンがありますので、スキャンして全て最適化しちゃいましょう!(画像が多いと時間がかかります)

WebPに変換されているかの確認

再び「EWWW Image Optimizer」にもどり「WebP」タブの最下部を見てみましょう!
先程まで「PNG」と表示されていたものが「WebP」になっていれば成功です!!

もぐちゃん

やったー!緑になってるぅぅぅ♪

運用ちゃん

おめでとう~!上記が、全部設定できていれば、今後アップする画像は自動で「WebP化」してくれるので、もう記事の軽量化はバッチリだね!

まとめ

一応、WebP化する事で、GoogleのPageSpeed Insightsで95点を獲得する事ができました。
みなさんも是非、挑戦してみてください!