デジタルマーケティングTips

ケーススタディ：WebP/AVIF変換用WordPressプラグインでサイト表示を高速化

記事タイトル画像：ケーススタディ：WebP/AVIF変換用WordPressプラグインでサイト表示を高速化

Webサイトの読み込み高速化がSEOの必須要素となった昨今、CMSでもWebPやAVIF等の新世代画像形式への対応が必要になっています。WordPress用画像変換プラグインを使ってサイトの性能を改善した事例を紹介しつつ、需要の背景・プラグインの例・注意点等を解説します。

要点

メルマガでも情報を配信中です！　ぜひご登録ください。

課題：SEOに必要な画像の軽量化・新形式移行をCMSでどう実現するか

画像の新形式移行はSEOの必須要素になっている

近年のGoogle検索では、初期画面表示の高速化が検索順位を決める評価指標の一つに挙げられています。検索順位を上げたければ、表示速度向上・軽量化のチューニングは避けて通れません。

そこで問題になるのが、JPEG・PNG・GIFといった古い形式の画像です。PageSpeed Insightsでサイトを診断すると、JPEG・PNG・GIF等の旧型式画像は、WebPやAVIF等の軽量・高圧縮な新世代画像形式に移行するよう勧められます。

WebPやAVIFが各種主要ブラウザに一通りサポートされた現在では、古くから使い慣れたJPEG・PNG・GIFから順次WebPやAVIFに移行すべき段階にきています。

CMSでWebPやAVIFの変換に対応するなら、プラグインで自動変換すると楽

とはいえ、WebPやAVIFはブラウザ表示こそ万人向けに環境が整ったものの、それを作成できる環境は必ずしも追いついていません。

WebPやAVIFへの変換には基本的にPhotoshopやGIMP等のPC用画像編集ソフト(場合によってはプラグインも)が必要であるため、ソフトインストールを制限された企業管理PCや、スマートフォンからのサイト更新には不向きな場合があります。

複数人体制で日々更新を行う中規模以上のサイトでは、コンテンツ管理システム(CMS)上で画像の自動変換を行う機能を搭載すると、新世代形式への変換・圧縮が簡単になり、サイトパフォーマンスの一貫性を保ちやすくなります。

WordPress用画像変換・圧縮プラグインの例

WordPressでは無料で使用できる画像変換・圧縮プラグインが豊富に揃っています。総合的な用途に応じて選択していくのがおすすめです。

Performance Lab

Performance LabはWordPress開発チームが自ら開発・提供する、パフォーマンス向上系ツールの集合体です。パフォーマンス最適化に関わるツールをプラグインとして導入できます。

画像関連の最適化機能として、JPEG画像をWordPress内に新規アップロードする際にWebPに自動変換する機能が搭載されています。

注意点

  • PNG画像のアップロード時変換、既にライブラリにある画像の一括変換はPerformance Labの対応範囲外です(3.0.0時点)。必要な場合は別のプラグインを使用する必要があります。
  • 1.6.0以降、アップロード後のデフォルト出力形式はWebPのみになりました。JPEGも一緒に生成したい場合は、設定変更が必要です。
  • Performance Labの機能は、WordPress本体の機能として正式採用された場合、プラグイン内から順次削除されます。その場合は、WP本体の方で改めて設定が必要です。

※参照：Performance Lab
　https://ja.wordpress.org/plugins/performance-lab/新しいウィンドウで開きます

EWWW Image Optimizer

EWWW Image Optimizerは、画像最適化用定番プラグインの一つです。JPEG/PNGからWebPへのアップロード時自動変換・ライブラリ内一括変換に対応し、Performance Labに比べてWebP変換対応範囲が広くなっています。そのほか、デバイス別個別サイズ生成、遅延読み込み、PDF内画像の圧縮等幅広い機能に対応します。

他の各種プラグインと高い連携性を持つのも魅力の一つです。他プラグインで扱う画像に対して自動変換・圧縮機能を追加するのにも向いています。

※参照：EWWW Image Optimizer
　https://ja.wordpress.org/plugins/ewww-image-optimizer/新しいウィンドウで開きます
　https://docs.ewww.io/article/84-plugin-compatibility新しいウィンドウで開きます

Converter for Media

Converter for Media(旧称：WebP Converter for Media)は、AVIFへの自動変換に対応する数少ないプラグインです。(有料版のみ)

無料版でもWebPへの自動変換機能を持っており、既存画像の一括変換、新規アップロード画像の自動変換に対応します。

※参照：Converter for Media
　https://ja.wordpress.org/plugins/webp-converter-for-media/新しいウィンドウで開きます

Movable Type用画像変換・圧縮プラグインの例

Movable Typeでも、WordPressに比べて選択肢は限られるものの、WebPへの自動変換プラグインが提供されています。

WebPfy for Movable Type

「WebPfy」は、Movable TypeでWebP画像の自動生成・一括変換に対応するプラグインです。新規アップロード画像を自動変換(元画像と別に追加登録)するほか、サイト内に既にあるPNG・JPEG画像(全画像もしくは選択した画像)をWebPに一括変換できます。

有料での提供(初期ライセンス費用・次年度以降年間メンテナンス費用、価格は提供元サイトを参照)となっていますが、60日間有効な試用版も提供されています。

※参照：WebPfy
　https://plugins.movabletype.jp/cherry-pick/post-174.html新しいウィンドウで開きます

実際のパフォーマンス改善例

LCP待ち時間の半減に成功

過去にマックスマウスが関わった事例では、WordPressプラグイン導入(EWWW Image Optimizer＆Performance Lab)のほか、画像縦横サイズの調整や表示要素の整理を併せて行った結果、「最大コンテンツ描画(LCP)」の時間をGoogleシミュレーション環境値で半分以下に抑えることに成功しました。

注意点

プラグインの無駄な重複を避ける

WordPressのプラグインは、基本的に導入数を増やすほど、少しずつ処理や応答が重くなります。表示の高速化という観点では、機能的に必要なものだけを絞り込んで導入・有効化できるとベストです。

まとめ

画像変換プラグインが活用できると、CMSを導入したサイトでもWebコンテンツのWebP移行が進めやすくなります。表示速度チューニングやSEOに行き詰まりを感じている場合は、活用してみることをおすすめします。

関連記事

関連サービス

Content Management System

CMS導入・運用支援

Webサイト運用の効率化や安定化を、
コンテンツ管理システム
(Content Management System, CMS)の
導入により実現いたします。

Operation

Webサイト運用

大規模なコーポレートサイトや
ECサイトも効率的に運用します。
Webサイトの品質維持と価値向上のために、
計画（PLAN）・実行（DO）・評価（CHECK）
・改善（ACTION）のサイクルを確立し、
Webサイトを継続的に改善していきます。

マックスマウスからのお知らせ

CMS導入・運用に役立つ情報をメールマガジンでお届け！

CMS導入・運用を始めとして、Webサイトでの情報発信の安定化・効率化、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。

いますぐご登録ください！

その他のサービス