こんにちは！やさしいワードプレス集客の田中です。
あなたはワードプレスをGoogle「PageSpeed Insights」を使って表示スピードを計測したら「次世代フォーマットでの画像の配信」と表示されてお困りではありませんか？？
この記事では、「次世代フォーマットでの画像の配信」と表示されてお困りの方へ、ワードプレスプラグイン「EWWW Image Optimize」を使った表示スピードアップさせる方法をご紹介します。
表示スピードアップさせることで、SEOだけでなく様々なメリットがあるので、ぜひ対策されてくださいね。
目次
次世代フォーマットでの画像の配信とは？
なぜ改善できる項目に「次世代フォーマットでの画像の配信」が出てくるのか？？
簡単にお伝えすると、「画像の容量が重くて、サイトを表示させるスピードが遅いですよ！」ということです。
画像というと「PNG」「JPEG」「GIF」などがありますが、次世代の画像には「WebP」「JPEG200」「JPEG-XR」という種類があります。
次世代の画像の「WebP」「JPEG200」「JPEG-XR」は圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができると言われています。（よくわからない人は「そんなものがあるんだな…」くらいで大丈夫です）
なので、次世代画像へ変換するか、現在の画像を圧縮するなどの対策で表示スピードをアップさせることが可能です！
表示スピードを改善させることのメリット
そもそも表示スピードを改善させるメリットは何か？？
結論からお伝えすると、SEO対策に有効だからです！
実際にGoogleは下記の３種類の表示スピードを計測しています。
サイトの速度レポートでは、以下の 3 種類の反応時間を測定します。
・サイト上でサンプルに設定したページビューの表示時間。複数のディメンションを基準にデータを表示し、さまざまな観点からページの読み込み速度を確認できます（ブラウザ別、国別など）。これらのデータはページ速度レポートに表示されます。
・トラッキングの対象にしている個々のクリック、イベント、ユーザー操作の実行速度または読み込み時間（画像の表示時間やボタンのクリックの反応時間など）。カスタム速度レポートで参照できます。
・ブラウザがドキュメントを解析し、ユーザーの操作が可能になるまでの時間。このデータを参照するのに追加の設定は必要ありません。このデータは、[ページ速度] レポートの [DOM 速度] サブタブで参照できます。
【引用元：Googleアナリティクスヘルプ「サイトの速度について」より】
以上のように画像の表示時間も関係していることがわかると思います。
その他にも、表示スピードをアップさせることで「離脱率」といって、すぐにページを閉じる数字も改善されるだけでなく、ユーザーのストレス軽減につながってきます。
なので、サイトは必ず表示スピードをアップさせる対策をしておきましょう！
こちらの記事も表示スピードを改善させる対策になるので併せてお役立てください。
プラグイン「EWWW Image Optimize」
では画像を圧縮して表示スピードをアップさせるにはどうすればいいのか？？
WordPressプラグイン「EWWW Image Optimize」を使うと初心者でも簡単です！
実際に画像を圧縮するまでは２ステップです。
（１）「EWWW Image Optimize」の設定
（２）メディアで「一括最適化」を行う
それでは早速されぞれ解説していきましょう。
「EWWW Image Optimize」の設定方法
まずはプラグイン「EWWW Image Optimize」を新規追加して有効化にします。
ワードプレスダッシュボードの編集画面の「設定」から「EWWW Image Optimize」を選択します。
「簡単モード」と「Enable Ludicrous Mode」を選ぶことができるので、「Enable Ludicrous Mode」を選択しましょう。
＜簡単モードの画像＞
「Enable Ludicrous Mode」にすると下記の画像になり、まずは基本設定からになります。
＜Enable Ludicrous Modeの画像＞
・「今は無料モードのままにする」
・「EXIF やコメント、カラープロファイルなどピクセルデータでないすべてのメタデータを削除します」
こちらの２箇所にチェックして「変更を保存」します。
次は「変換」項目の設定をします。
＜Enable Ludicrous Mode変換項目の画像＞
・「サイトやネットワークの管理者は、以下の設定を無視するメディアライブラリの変換リンクを、他のユーザーが使えないようにできます。」
こちらの１箇所にチェックを入れ変更保存をすれば設定は完了です。
メディアで一括最適化して画像を圧縮
「EWWW Image Optimize」の設定が完了したら、次は実際に画像を圧縮していきます。
ワードプレス編集画面より「メディア→一括最適化」をクリックします。
「最適化されていない画像をスキャンする」を押すと、最適化されていないつまり圧縮されていない画像が自動で出てきます。
あとは「画像を最適化」をボタンをおすと自動で圧縮してくれます。
実際の効果の確認
設定が完了したら、実際にGoogle「PageSpeed Insights」を使って表示スピードや対策されているか確認します。
「EWWW Image Optimize」の設定以前と比べて、ポイントが改善されていればOKです！
これだけでも表示スピードをアップさせる改善には効果的ですよ！
下記の画像が「次世代フォーマットでの画像の配信」の合格している画面です。
合格の画面が確認できれば作業は完了になります。
完全に「webP」化する
ここまでの作業でもかなり表示スピードの改善はできますが、先ほどの「次世代フォーマットでの画像の配信」にまだ合格していない方も多いのかもしれません。
ここでは「webP」化に完全に移行する対策をご紹介します！
少し中級者向けになるので、あまり自信がない初心者の方は様子を見られてくださいね。
では早速、どういった作業をしていけばいいのか解説していきます。
先ほどの「EWWW Image Optimize」設定画面の基本項目より「webP変換」の項目にチェックをいれます。
「リライトルールを挿入」をクリックすると自動的に挿入されるケースもあるようですが、多くの場合は手動での作業が必要になります。
まずは「webPの配信方法」にあるコードをコピーします。
コピー後に、それぞれが契約しているレンタルサーバーの「.htaccess」に追記します。（※「.htaccess」に追加する際は、他の箇所に十分注意されてくださいね。）
追記すると下記の画面のように「PNG→WEBP」に文字が変更され緑色になれば設定完了です。
メディア一括最適化で「webP」へ
次にワードプレス編集画面の「メディア→一括最適化」の画面へ移行します。
webPのみ「圧縮をスキップし、webP変換のみを試みます。」の箇所にチェックをいれ、最適化されていない画像をスキャンすれば自動で最適化されていない写真が出てくるの「最適化」すれば作業完了です！
まとめ
「EWWW Image Optimizerで表示スピードを改善する方法」はいかがだったでしょうか？？
（１）EWWW Image Optimizerを設定する
（２）一括最適化で画像を圧縮する
（３）時間があれば「webP」化まで進めてみる
この３ステップだけで表示スピードをアップさせることが可能です！
表示スピードを改善することで、SEO対策だけでなくユーザーがすぐにページを離れる「離脱率」を改善する効果もあります。
何よりユーザーがストレスなく快適に読めるので、常に改善を繰り返して表示スピードを高めるように対策してみてくださいね。
この記事がワードプレスのサイト改善の何かきっかけになれば幸いです。
最後まで読んでいただきありがとうございます。
この記事へのコメントはありません。