画像が重いなら EWWW Image Optimizer で解決

ブログ運営と改善

画像が重くて表示が遅いなら EWWW Image Optimizer で解決

この記事は約 4 分で読めます。

ユウキです。

サイト表示速度が遅い場合、画像が重いことが原因の可能性で代表的です。

画像が原因の場合、Lighthouse 検査するとパフォーマンスのチェック項目に Serve images in next-gen formats と指摘されますが、

これを解決してサイト表示速度を改善したいなら、 EWWW Image Optimizer を使って画像形式を WebP に変換すれば解決します。

この記事が役に立つ読者
  • 重い画像を軽くして、サイト表示速度を改善したい人
  • EWWW Image Optimizer を使って WebP を表示される方法を知りたい人
  • やってみたけど、なぜか WebP が表示されずに悩んでいる人

プラグインのインストール

はじめに WordPress のプラグインから新規追加で EWWW Image Optimizer を検索してインストール、有効化します。

検索結果に同じ画像が 2 つ表示されるので、間違えないように注意してください。

EWWW Image Optimizer をインストールする

EWWW Image Optimizer の設定

プラグインを有効化したら、以下の手順で設定を進めます。

ベーシックのタブを選んで、【メタデータを削除】にチェック。画像に付与されている余計な情報を取り除いてくれます。

ベーシックのメタデータを削除にチェックする

変換のコンバージョンリンクを非表示にチェックする。人為的な誤変換を防ぐための設定です。

変換のコンバージョンリンクを非表示にチェックする

WebP タブに移動して、【 JPG、PNG から WebP 】にチェックして保存すると、下に .htaccess へ追加するためのコードが表示されるので、コピーしておきます。

WebP タブの JPG、PNG から  WebP にチェックして、コードをコピーする

エックスサーバーのサーバーパネル内、 .htaccess 編集へ移動して、

サーバーパネルの .htaccess 編集へ移動する

【 # BEGIN WORDPRESS 】の直前にコピーしておいたコードを張り付けて保存する。

.htaccess の編集はバックアップを取って、間違えないよう十分に注意してください。

# END WordPress の直前にコードを張り付ける

EWWW Image Optimizer の設定画面右下の表示が緑色で WebP となっていればサーバーパネル側の編集は大丈夫です。

設定画面右下に緑色で WebP と表示される

メディアに【一括最適化】というメニューが増えているので、そこから【最適化されていない画像をスキャンする】をクリックして設定完了です。

メディアの一括最適化から、最適化されていない画像をスキャンする

設定しても WebP が表示されない場合

設定完了後、WebP が正しく表示されているか確認する方法は 2 つあります。

ひとつは Chrome の検証機能を使います。

【Network】→【Img】を選んで、ページを更新すると、【Type】に画像形式が表示されます。

検証で WebP 表示を確認

もうひとつは、Lighthouse で確認した際に【Serve images in next-gen formats】の表示が出なければ設定完了しています。

時々、設定は正しくできているはずなのに、WebP が表示されない場合があります。

その場合は、ブラウザキャッシュをクリアすると解決します。

.htaccess に追加したコードが消えてしまう場合

EWWW Image Optimizer を使って WebP を表示するために .htaccess の変更をしたのに、追加したコードが削除されてしまう場合、

【# BEGIN WORDPRESS】と【# END WORDPRESS】の間に追加していることが原因です。

# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。

上記の通り、注意書きとして記載されているので、編集内容を確認してみてください。

定期的に Lighthouse で確認すると、不具合があっても早期に発見しやすいのでおすすめします。

Safari の WebP 対応について

現時点(2020年5月17日時点)では、Safari のブラウザで WebP の画像形式が未対応のため表示できないようです。

ですが、設定で .htaccess に追加したコードによって、未対応ブラウザに対してはこれまで通り、PNG や JPEG が表示されるので安心して大丈夫ください。

各ブラウザの WebP 対応状況を確認する場合はテキストリンクを参考にどうぞ。

まとめ

サイトによっては画像形式を WebP に変更するだけでも、モバイル表示速度が劇的に改善します。

手軽にできるのに、得られるリターンは魅力的なので、必ず取り入れておきたいカスタマイズですね。

以下の記事と併せて設定すると、サイト表示速度の大幅改善が見込めますので参考にしてみてください。

では今回はこの辺で。

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

この記事のタイトルとURLをコピーする

関連記事

  1. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決

    ブログ運営と改善

    WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決

    ユウキです。コンタクトフォーム 7 などで設定されている自動送信メ…

  2. Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ブログ運営と改善

    Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ユウキです。今回は、Autoptimize を使ってコードの最適化…

  3. TCD は SEO に弱いのか? H タグの使い方と修正方法

    ブログ運営と改善

    TCD は SEO に弱いのか? H タグの使い方と修正方法

    ユウキです。「 TCD のテーマって SEO 対策で不利って聞いた…

  4. WordPress の head 内を整理してモバイル表示速度を改善する

    ブログ運営と改善

    WordPress の head 内を整理してモバイル表示速度を改善する

    ユウキです。今回は WordPress でつくった Web サイト…

  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    ブログ運営と改善

    WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    ユウキです。WordPress のセキュリティ対策ってされています…

  6. TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

    ブログ運営と改善

    TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

    ユウキです。TCD「Be」のウィジェットに設置できるオリジナルのプ…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。(しょぼ笑)

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
  3. Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin
惹きつけるブログはデザインから生まれる
WordPress テーマ Be(TCD076)のレビュー
PAGE TOP