「ResizeCDN」で無料ブログの画像をWebP(ウェッピー)変換したら表示速度は改善するのか?

2021/04/14

WEBツール

WebP化の仕組みとメリット

今回は画像のCDN化に特化した「ResizeCDN」というWebサイト支援ツールのレビューだ!

正直CDN(コンテンツ・デリバリーネットワーク)とかよく分からない。

コンテンツを?オリジンサーバー以外の?ネットワーク上(キャッシュサーバ)から配信する?、、、みたいないイメージ。

ようするに画像の表示って大仕事だから、誰か(ResizeCDN)に手伝って貰おうって話だよね。

最強無料ブログサービス”Google Blogger”のサーバーはとても安定しているが、画像が増えるほどページの表示速度は遅くなっていく。

多くのブロガーにとって周知の事実だが、改善が難しい部分でもある。

解決策はざっくり2つ。

画像の品質を落とさない範囲で圧縮する、次世代画像フォーマット”WebP(ウェッピー)”などに乗り換える。

ブログは画像の扱い次第で新世界に突入できる、、、ぴよ。

無料ブログでも綺麗な画像を高速表示したい理由

僕はブログでイラスト素材の配布をしているが、画像の綺麗さやサイズには制約を感じている。それはページ表示にかかる負荷とトレードオフの関係。

画像のデータサイズは、テキスト等とは比べものにならないくらい大きい。これをいかに速く読み込んでページに表示させるか?

ブログで収益化を目指す場合、コンテンツ内でユーザーにアクションを起こして貰うことが最終目的となるが。

この段階で、広告やLP(ランディングページ)画像の読み込みに時間を取られてしまうと大きな機会損失となる。

たった2秒待たせただけで大半のユーザーはページから離脱する、、、というデータが存在する。

訪問したユーザーに対してより多くのページを見てもらえれば、必然的に収益は増えていくのである。

PVの増加に対して収益のUPが望めるアドセンスがいい例だ。

現状、セツナワールドのページ表示速度は安定しているが画像の表示速度に関しては、「PageSpeed Insights」にて減点となるページが多い。

今後もイラスト素材の配布を続けていくなら、この問題の解決策を知っておく必要はある。

ResizeCDNを導入してPNG画像をWebP変換した結果

こちらのページの画像容量は合計約1.3MBだったが、「ResizeCDN」を導入した結果、PNG画像がWebP画像に変換され以下のように改善された。

導入前

導入後

・次世代フォーマットでの画像の配信が、3.6s→0.15sに短縮。

・適切なサイズの画像が、1.95s→0.3sに短縮。

この2つの項目の合計で、5s程度も速度(レンダリング)が改善されたことになる。

光回線ではその恩恵をあまり感じないかもしれないが、これが3Gや4G回線となれば体感速度で大きな差が出てくるのは間違いない。
※追記:ブログ画像の大半をCDN化した結果、低速回線でも劇的にページの表示速度が改善した;;

CDN側が正常に機能している前提では、ページの表示速度が低下する事は考えにくい。

※ページの画像容量は、1.3MB→約920KBに圧縮された。

ダウンロード利用する画像にWebPを適用しない方法

画像をWebP変換すると確かにページの表示速度は向上する。ただしWebPは画質ではPNGの綺麗さには勝てない。

そこまで都合が良いフォーマットではない。

イラスト素材の場合、WebPで表示しおいてダウンロードはPNG(またはJPEG)ってのが望ましい。

Bloggerで「ResizeCDN」を利用する場合、次のような方法が考えられるので紹介する。

CDN自動変換ツールの使い方(Blogger編)

Bloggerの場合、画像のHTMLは以下のような形式で出力される。なおURLの部分は長すぎるので省略している。

このソースをコピペして、CDN自動変換ツールに貼り付ければ画像がCDN化される。

変換された<picture>タグ内のURLが、Bloggerから”resizecdn.com”に置き換えられているのが分かる。

この場合ページ上ではWebP画像で表示されるが、画像のリンクを開いて保存などする場合はPNG画像となる。

ようするに一般的な方法でCDN化すれば、ダウンロードで保存する画像フォーマットはオリジナルのモノになる。
(※オリジンサーバーの画像が取得される。)

ただし、<div>タグや、<a>タグを含めず<img>タグのみを変換した場合は、ダウンロードした画像もWebPに置き換えられる。

※PHP製のライブラリを組み込んで、一括でCDN化することも可能とのこと。詳しくは公式サイトを確認して欲しい。

ResizeCDNは有料サービスなんだが、、、

スペースナビ株式会社が提供する「ResizeCDN」は有料サービスである。

固定費なし完全従量課金制(前払いチャージ)で転送量(通信量)に応じて月々の料金が決まる。

公式サイトでオンライン見積もりが出来るのは地味に便利。

例えば、月間10,000pvで1ページ平均の画像容量が1MBだった場合、月々の費用は約72円。

当ブログであれば、月間3,000pv(直近3ヶ月平均)、1ページ平均の画像容量が500KB~1MB程度。この条件では約16円となる。

それは想像していたより遥かに安かった。

アカウント作成で1,000円分の通信料金!?

2021年4月現在、「ResizeCDN 」にアカウント登録することで1,000円分の通信料金がゲット(チャージ)出来る。

僕のブログの規模なら、1,000円あれば余裕で1年位は賄えそうだ。

現在アクセス数や画像が多い記事を選んでCDN化しているが、4日ほど経過しても通信量は1円のまま。

それもそのはず、ResizeCDNのデータ転送料金は8円/1GBとなっている。

1円あたりでは125MBの画像データを転送出来る計算になる。仮に毎日1GB使ったとしても、、、月額240円!?

僕がブログで良く利用する画像(サイズ:800x500px / 容量:100KB前後)だと、ざっくり1万枚ほど転送すれば1GBに到達する計算になる。

それはもう「西遊記」でいうところの天竺への道のりを思わせる。

今後は徐々に画像のCDN化を拡大しながら、コスト(料金)の推移などチェックしてみようと思う。

※通信量のチャージにはクレジットカードが必要。
(デビットカードも可能)

ブログの収益化を目指すなら?

WEBサイトの表示速度は、ユーザーの利便性と直結している事からもSEOにおける重要な要素だと言われている。

_速いに越したことはない。

ページ速度は離脱率や成約率に大きな影響を与える。

画像のCDN化技術は、アクセス数に依存しないマネタイズを実践している場合でも、最小のコストで最大限の利益を生み出す可能性があると言える。

  • B!

QooQ