当ブログでは、エンジニア経験者の夫婦がそれぞれの経験に基づいた情報を、不定期に発信しております。

【解説】ページを高速化!次世代フォーマットへの対応方法とは??

こんにちは、ゆめたろうです。

 

SEO対策において、ページ読み込み速度を高速化させる事は重要ですよね。

とはいえ、見た目にも凝りたいとなると、画像の使用は欠かせません。

 

ただし、残念ながら画像はコンテンツの中でもデータサイズが大きく、速度低下に繋がりやすい要素であることは明確です。

 

今回は、ページ読み込み速度の低下を最小限に抑えるべく、画像を最適化していく方法について解説しようと思います。

 

次世代フォーマットでの画像の配信とは

皆さんはページ読み込み速度を測定する際に、PageSpeed Insightsを使用される事が多いのではないでしょうか?

 

そして、実際に測定してみると、採点結果の少し下の方に『改善できる項目』という形で、速度改善が期待出来る対応について、様々な提案がGoogleからなされるのですが…

この中に『ひときわ目立つ項目』があると思います。

 

それが、以下の画像の『次世代フォーマットでの画像の配信』という項目です。

改善できる項目として、『次世代フォーマットでの画像の配信』を提案されている様子

 

Google公式の開発者向けの解説文章には、次のような記載があります。

JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

<訳>JPEG 2000、JPEG XR、およびWebPは、以前のJPEGおよびPNGに比べて優れた圧縮および品質特性を持つ画像フォーマットです。JPEGやPNGではなく、これらの形式で画像をエンコードすると、読み込みが速くなり、携帯データの消費量が少なくなります。

Google Developers

Reference documentation for the "Serve Images in Next-Ge…

 

ふむふむ。

上記の文章からも読み取れるように、この『次世代フォーマットでの画像の配信』とやらに対応する事によって、読み込み速度を高速化出来るようですね。

 

という事で、これらのフォーマットの中から、Googleが開発・推奨している「WebP」と呼ばれるフォーマットに対応させる方法について、これから解説していきたいと思います。

※「WebP」=「ウェッピー」と読むそうです。

 

次世代フォーマット『WebP』に対応させるにはこのプラグインを使おう!

今回、次世代フォーマットに対応していくために使用するのは、こちらのプラグインとなります。

WordPress.org 日本語

Speed up your website to better connect with your visitors. …

 

という事で、Wordpressのプラグイン追加画面で「EWWW Image Optimizer」を検索して、早速インストールして有効化してみましょう!

設定手順1

 

「EWWW Image Optimizer」の設定手順

有効化させると、設定メニューの中に「EWWW Image Optimizer」の項目が出てきますので、そちらを選択して設定画面を開きましょう。

設定手順2

 

そうすると、次のような画面が出てきますので、真ん中の方にある「WebP」というタブを選択して下さい。

設定手順3

 

「WebP」タブを開いたら、一番上の項目の「JPG,PNG から WebP」にチェックを付けて、左下の「変更を保存」を押下しましょう。

設定手順4

 

設定を終えると、画面下部に次のようなコードが表示されます。

設定手順5

 

下の方にある『リライトルールを挿入する』を使って、[.htaccess]ファイルに記述しても良いのですが、自動記述はトラブルを誘発するケースがあるので、手動でコピーすることをお勧めいたします。

 

このコードを記述する事により、ブラウザが次世代フォーマットに対応しているかどうかで、WebPフォーマットを使用するかどうか自動判断してくれるようになります。

 

使用しているテーマやレンタルサーバによって、記載手順が異なりますが…

私が使用しているテーマ自体には、[.htaccessファイル]を編集する機能がありませんので、レンタルサーバ側の管理画面から直接編集してみたいと思います。

 

私が使用しているレンタルサーバはMixhostですので、このページではMixhostベースで解説していきたいと思います。

まずはePanelにアクセスしてファイルマネージャーを開きましょう。

設定手順5-1

 

ファイルマネージャーを使って、[public_html]→[ドメイン名]と階層を辿っていくと[.htaccess]ファイルがあると思いますので、こちらを編集モードで開きます。

 

そして、下記画像の赤枠部分のように、先ほど設定画面に記載されていたコードをコピーしましょう。

設定手順5-2

 

念のため、コピーしたコードを転記しておきますね。

# BEGIN EWWWIO<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_URI}.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
# END EWWWIO

 

併せて、同じファイル内の下の方に、ブラウザキャッシュに関する設定がありますので、こちらに次世代フォーマットである「WebP」の設定行を追加しておくと良いでしょう。

設定手順5-3

 

追記したコードはこちらです。

ExpiresByType image/webp “access plus 1 month”

 

“access plus 1 month”の部分については、キャッシュ設定期間になりますので、1週間にしたいのであれば”access plus 1 weeks”と言った形で、あなたのサイトに合った設定に書き換えてあげましょう。

 

これで[.htaccess]ファイルの編集はオッケーです。

 

正常に設定が完了していれば、先ほどの設定画面の下にあったPNGマーク

pngマーク

 

こちらが、次のWebPマークへ変わっているはずです。

webpマーク

 

これで設定は完了となりますので、従来のフォーマットから次世代フォーマットへ変換してみましょう!

 

次世代フォーマットへの変換

それでは早速、次世代フォーマットへ変換する手順を解説していきたいと思います。

 

まずは、「メディア」の中に新しく追加されている「一括最適化」というボタンを押下しましょう。

設定手順6

 

そして、初めて最適化する場合にのみ、「最適化を強制」にチェックを入れて、最適化されていない画像をスキャンしてください。

※2回目以降は、基本的にチェック不要です。

設定手順7

 

これで最適化の準備が完了となりますので、最後に最適化を開始ボタンを押して、しばらく待つだけで完了となります!

※大量の画像を一気に最適化すると、サーバに負荷がかかりますので注意しましょうね。

設定手順8

 

設定さえ終わってしまえば、後は非常に簡単な作業ですね♪

 

まとめ

という事で、今回は「EWWW Image Optimizer」というプラグインを活用して、『次世代フォーマットでの画像の配信』に対応する方法を解説しましたが、いかがでしたでしょうか?

 

「次世代」と言いつつも、仕様公表自体は2010年にされているので、そこまで大層なものではないのですが…

最近はGoogle Chrome以外にも、様々なブラウザが「WebP」に対応してきているので、しっかり活用しておいて損はないはずです。

 

なお、プラグインを新しく追加する際は、ちゃんとサーバーのバックアップを取った上で、プラグインの競合等に気を付けながら作業するようにしてくださいね。

 

あなたのサイトがより軽量になり、素早くページを表示できるようになってSEO対策的にも良い結果が出る事を願っております( *´艸`)

 

それでは今回はここまでとなります。

ありがとうございました!

記事はいかがでしたか?

こちらには記事を読んで頂いた方に対して最も適した広告が表示されます。

<スポンサーリンク>


スピードが凄く早いイメージ
宜しければフォローして下さると嬉しいです!