Piez拡張機能で見える化！Image & Video Managerの驚きの最適化効果
はじめに
近年、ウェブサイトやアプリケーションでの画像や動画の使用が急増し、データ容量の管理が重要な課題となっています。特に、最適化されていないメディアファイルはページ速度を低下させ、ユーザー体験やSEOに悪影響を与えます。ウェブサイトのパフォーマンス最適化は、ユーザー体験の向上や検索エンジン最適化(SEO)において非常に重要な要素です。特に、画像や動画などの大容量メディアファイルの最適化は、ページの読み込み速度に大きな影響を与えます。
Akamaiが提供するImage & Video Managerは、このような課題に対する強力なソリューションですが、その効果を具体的に把握し、関係者に説明することは簡単ではありませんでした。そこで今回は、Piez拡張機能を使用してImage & Video Managerの最適化効果を可視化する方法をご紹介します。PiezはAkamaiのサービスがもたらす最適化効果を簡単に確認できるChrome拡張機能で、特にImage & Video Managerの効果を数値で明確に示すことができます。
この記事では、Piez拡張機能のインストール方法や使用方法、さらに得られる具体的な最適化効果とその解釈について詳しく解説します。これにより、SEOやユーザー体験の向上に役立つ知識を提供します。Piezを活用することで、最適化の重要性を関係者に分かりやすく説明したり、さらなる改善点を見つけたりすることが容易になリます。
ウェブパフォーマンスの改善に取り組むエンジニアやマネージャーの皆様にとって、この情報がSEO対策やユーザー体験向上に役立つことを願っています。
Image & Video Managerとは
Akamaiが提供するImage & Video Manager は、 クラウドベースのSoftware as a Service（SaaS）ソリューションです。ユーザーが設定したポリシーに基づいて、画像、アニメーションGIF、動画を自動的に最適化し、強化します。Web サイトやモバイルアプリにアクセスする際に使用しているデバイス、ブラウザー、ネットワーク接続に応じ、品質、形式、サイズの最適な組み合わせを提供します。Image & Video Managerは、Akamaiのコンテンツデリバリーネットワーク（CDN）と統合されており、追加のハードウェアやソフトウェアのインストールなしで利用できます。
Image & Video Managerは、特定のデバイスやブラウザに対して最適なフォーマットを提供し、メディアの互換性を向上させる機能を持っています。インタラクティブなズームやパン、色と透明度の変更、オーバーレイ、透かし、サイズ変更、トリミングなど、30 種類以上のアーティスティック変換の適用を、ポリシーの選択的な適用によって行うことができます。
Image & Video Managerの導入方法
Image & Video Managerの導入は以下の一般的なステップで行われます。
- Akamaiのアカウントを取得し、Image & Video Managerを有効化します。
- Akamai Property Managerで新しいプロパティを作成するか、既存のプロパティを編集します。
- Image & Video Manager機能を有効にし、最適化ポリシーを設定します。
- オリジンサーバーの設定を行い、Akamaiのエッジサーバーと連携させます。
- テストを実施し、最適化が正しく機能していることを確認します。
詳細な導入手順については、Akamaiの公式ドキュメントを参照してください。
https://techdocs.akamai.com/home
https://www.akamai.com/ja/products/image-and-video-manager
Image & Video Managerの主な機能
Image & Video Managerは以下のような高度な最適化機能を提供しています。
- AI駆動の自動画質調整
- 画像の視覚的品質を維持しながら、ファイルサイズを大幅に削減します。一般的には50%程度の削減が見られますが、画像の内容や元のフォーマット、圧縮設定によっては、70%以上の削減も可能です。
- 画像の最新フォーマット自動変換
- ブラウザの対応状況に応じて、WebPやAVIFなどの最新フォーマットに自動変換します。これにより、さらなるファイルサイズの削減と画質の向上が実現できます。
- レスポンシブ画像最適化
- デバイスの画面サイズやピクセル密度に応じて、最適なサイズと解像度の画像を動的に生成します。これにより、不必要なデータ転送を削減しつつ、各デバイスで最適な表示が可能になります。
- 適応型動画ストリーミング
- ネットワーク状況に応じて動画品質を自動調整し、バッファリングを最小限に抑えます。これにより、視聴者は途切れのないスムーズな動画体験を得ることができます。
これらの機能を活用することで、Akamaiの顧客企業ではページ読み込み時間の短縮やユーザーエンゲージメントの向上が報告されています。例えば、カナダの小売企業Linen Chest社では、Image & Video Manager導入後に新たなトラフィックソースを追加することなく、ページビュー、セッション数、コンバージョン数の増加が見られ、特にコンバージョン率が19%向上したという具体的な成果が報告されています。同社のeコマース部門ディレクターであったRiaz Faride氏は、「Akamaiとイメージマネージャーの機能がこの成長に重要な役割を果たした」と述べています。また、高品質の2倍解像度の画像を、顧客側の遅延の問題を心配することなく提供できるようになりました。ただし、実際の改善効果は、ウェブサイトの構造や元のコンテンツ、ユーザーの環境などによって大きく異なる場合があります。最適な結果を得るためには、個々のウェブサイトやアプリケーションに合わせて設定を調整することが重要です。
https://www.akamai.com/resources/customer-story/linen-chest
Piez拡張機能とは
Piez拡張機能は、ChromeやFirefoxで利用できるブラウザ拡張機能で、AkamaiのImage & Video Managerを含むさまざまな最適化サービスによる最適化効果を可視化するツールです。特に、Image & Video Managerを使用して最適化されたページの総バイト削減量を確認することができます。この拡張機能を使用することで、開発者は以下の情報を簡単に確認できます。
- 最適化前後のファイルサイズの差分
- 節約できたバイト数の合計
- 画像や動画の最適化詳細
Piezは、ウェブ開発者がAkamaiの最適化サービスの効果を具体的に把握し、パフォーマンス改善の成果を数値で確認するのに役立ちます。
インストール方法
- Chrome ウェブストアにアクセス
- 検索バーに「Piez」と入力し、拡張機能が存在するかをご確認
- 検索結果から「Piez」を選択
- 「Chromeに追加」ボタンをクリック
- 確認ダイアログが表示されたら「拡張機能を追加」をクリック
- インストールが完了すると、ブラウザ右上に拡張機能のアイコンが表示されます
使用方法
- Chrome右上の拡張機能アイコン（パズルピースのアイコン）をクリック
- Piezのアイコンをクリックして有効化（アイコンの色が青色に変わることが確認できれば、有効化が成功したことを示しています）
- 最適化効果を確認したいウェブページにアクセス
- Chromeの開発者ツールを開く（通常はF12キーまたはCommand + Option + Iを使用しますが、環境によって異なる場合がありますので、必要に応じてChromeのヘルプドキュメントを参照してください）
- 開発者ツール内の「Piez」タブを選択
最適化効果の確認
Piezタブでは、以下の情報が表示されます。
- Total Bytes Saved: 節約されたバイト数と割合
- ◯Videos: ページ内の総ビデオ数及び節約されたバイト数と割合
- ◯Images: ページ内の総イメージ数及び節約されたバイト数と割合
-
Image Optimization Details: 個別の画像情報
- Image URL: 元のファイル名
- Transformed Type: 適用された最適化タイプ（例：WebP変換、JPEG圧縮など
- Original Size: 元のファイルサイズ
- Transformed Size: 最適化後のファイルサイズ
- Bytes Change: 節約されたバイト数と割合
最適化のメリット
-
ページ読み込み速度の向上:
- 軽量化された画像・動画により、ページの読み込みが高速化
- ユーザー体験の向上につながる
-
帯域幅使用量の削減:
- サーバーからクライアントへの転送データ量が減少
- ホスティングコストの削減につながる可能性がある
-
モバイルユーザーのデータ通信量削減:
- 特に通信速度が遅い環境や通信量制限のあるユーザーにとって有益
- モバイルでのユーザー体験向上につながる
-
SEOパフォーマンスの改善:
- ページ速度はGoogleのランキング要因の一つ
- 最適化によるページ速度向上がSEO改善に寄与する可能性がある
Piez拡張機能を使用して最適化を実感しましょう
Piez拡張機能を使用して最適化を実感する方法
-
テストサイトの選択:
Image & Video Managerが適用されているウェブサイトを選びます。
画像や動画が豊富なページを選択すると、効果が分かりやすくなります。
-
Piez拡張機能の有効化:
- Chrome右上の拡張機能アイコンをクリックし、Piezを有効にします。
- アイコンが青色になっていることを確認します。
-
ページの読み込み:
- 選択したテストサイトを新しいタブで開きます。
- ページが完全に読み込まれるまで待ちます。
-
開発者ツールの起動:
- F12キー（Macの場合はCommand + Option + I）を押して開発者ツールを開きます。
- 「Piez」タブを選択します。
-
最適化効果の確認:
- 「Total Bytes Saved」で全体の節約量を確認します。
- 「Images」セクションで画像の最適化詳細を確認します。
- 個別の画像情報で、元のサイズと最適化後のサイズを比較します。
-
Before/After比較:
- Piezを無効にしてページをリロードし、元のサイズを確認します。
- 再度Piezを有効にしてリロードし、最適化後のサイズと比較します。
-
異なるデバイスでのテスト:
- 開発者ツールのデバイスエミュレーション機能を使用して、モバイルデバイスでの最適化効果も確認します。（開発者ツールのデバイスエミュレーション機能を使用するには、開発者ツールを開いた後、デバイスツールバーを有効にし、モバイルデバイスを選択してページをリロードします。これにより、モバイルデバイスでの最適化効果を確認できます）
-
結果の分析:
- 節約されたデータ量、最適化率、適用された最適化タイプなどを分析します。
- これらの情報を基に、Image & Video Managerの効果を具体的に把握します。
驚きの最適化効果
実際にPiezを使用して最適化効果を確認したところ、6枚の画像合計で、パソコンでは65%、iPhone 14 Pro Maxでは67.1%削減されていることが分かりました。
具体例として、左から3枚目の画像（ファイル名：https://**e3.jpg、オリジナルサイズ2.8MB）では、パソコンでは1.0MB（63.8%削減）、iPhone 14 Pro Maxでは926.9KB（66.6%削減）に最適化されていました。さらに、最適化タイプも元のjpgファイルから、パソコンではavifに、iPhone 14 Pro Maxではimage/jpegに変換されていることも確認できました。このように、デバイスによって最適化後のサイズと形式が異なり、全体として高い削減率が達成されていることが明らかになりました。
以下の画像は、それぞれのデバイスでの最適化結果を示しています。
異なるデバイスでのテスト（パソコン）
異なるデバイスでのテスト（iPhone 14 Pro Max）
Piez拡張機能を使用して最適化を実感できない場合の処理
Piez拡張機能の最適化効果が確認できない場合、拡張機能がうまく動作していない可能性があります。以下の点を確認してみましょう。
Piez拡張機能の最適化効果が確認できない場合、以下の点を確認してみましょう。これらの手順は、拡張機能の動作を正常化し、最適化効果を実感するために重要です。
- キャッシュをクリアする
- ブラウザのキャッシュをクリアし、ページを再読み込みする
- 拡張機能の再インストール
- Piez拡張機能を一度削除し、再インストールしてみる
- 別のブラウザで試す
- ChromeだけでなくFirefoxなど他のブラウザでも確認する
- 時間をおいて再度確認
- 設定の反映に時間がかかる場合もあるため、しばらく時間をおいてから再度試す
まとめ
Piez拡張機能を使用することで、Image & Video Managerの驚くべき最適化効果を簡単に可視化できます。この見える化により、最適化の重要性をステークホルダーに説得力を持って説明することができ、さらなるパフォーマンス改善への取り組みを促進することができるでしょう。ウェブサイトのパフォーマンス向上に取り組む皆さま、ぜひPiez拡張機能を活用して、Image & Video Managerの威力を体感してみてください。
