WordPressに仕様する画像はJPGではなくWebpにして軽量化がSEO対策の基本

EWWWプラグインの使い方
目次

画像を表示する拡張子を.jpgから.webpにする

Googleのアルゴリズムに対応をする為には、ページの表示速度を出来る限りに早くする必要があります。

以前Googleのお偉いさんが「ユーザーがページの読み込みにストレスを感じ出すのは2秒が限界だ」というとても難しいお話をしていました。

その為に、画像が一番WEBサイトに利用するデータとして重い可能性があるので、まずは画像データを別のデータに書き直して表示させてしまおう。という大作戦です。

今では画像のWebp化はSEO対策の必須条件でもある位対策が必要ですので、説明とあわせてやり方を記載していきますね。

上手なWEBサイト制作の場合にはこれ位の点数が取れます

現在制作途中の「ユーチューバーになろう

試しに自分で今制作途中のサイトを計測してみましたが、とにかくページの表示速度を軽くする為の工夫が必要です。デザインばかりにこだわるホームページ制作代行会社等はこういったユーザーにとって優しくない、時代遅れな構成をする事が多いため注意して下さい。

先に流れを簡単に説明しちゃいます

STEP
一括変換プラグインの導入

EWWWww Image Optimizerというプラグインを使用すれば、既にサイト内で使用している画像を自動でWebPへ変換してくれます。管理画面内のプラグイン→新規追加→名称をコピーして検索→インストール→有効化。でOKです。

STEP
ルートディレクトリにある.htaccessを編集する

FTPソフト等でサーバーに入り、.htaccessファイルをダウンロードし、メモ帳ではなくTerapad等で開きます。そして以下のコードを最下部に追加で張り付け保存、そしてまた同じルートディレクトリにアップロードして上書きします。

#EWWW Image Optimizer|WebP変換コード
<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
#/EWWW Image Optimizer|WebP変換コード

この作業で何をしているかと説明をすると、WebPに対応していないブラウザの場合にはJPGを表示する様に自動的に対応しろ!という指示を与えてあげています。

STEP
EWWWww Image Optimizerの設定を変更

設定画面を開くとWebPというタブがあるのでそれをクリック→「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」という左側のチェックボックスにチェックを入れ変更を保存して下さい。

STEP
WordPress管理画面内のメディア部分に一括変換が表示される

一括変換をする前にきちんとバックアップを取ってから画像の一括変換をボタンをぽちっと押して数分間まっているだけでハイ終了。これだけでJPGファイルからWebPファイルに自動的に切り替わり、EWWWの管理TOPにてどれくらいの容量が削減されたかの容量も確認出来ます。

画像一括変換

ちなみにとんでもない数字で驚くと思いますが、次世代画像ファイルは本当に優秀ですね!

STEP
WEBサイトを確認し、正常に表示されているか確認

これで正常に表示されていたら完璧です。更に表示速度を上げる為のポイントとしては、画像の読み込みを遅延させるようなプラグインや設定をONにしてあげると、更に表示速度は改善されます。

画像ファイルを一括変換してページ速度を向上させよう

如何でしたか?作業自体はめーっちゃ簡単です。ホームページを制作した事がない方にとっては少し慣れない用語が並び、難しく感じるかもしれませんが、ステップに合わせて作業をするだけで慣れている人であれば「5分」で作業が終わります。

是非皆さんが楽しいWEBライフを送れる様に、また楽しい記事を更新していきますね!見て頂き有難うございました!

EWWWプラグインの使い方

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントを残す

目次
閉じる