「次世代フォーマットでの画像の配信」はResizeCDNで簡単に解決出来る！！
インターネットを作る、全てを人たちが抱える
画像の悩みを解放する。をビジョンに掲げ
ResizeCDNを開発・運営をしている
スペースナビ株式会社の松岡宗谷です。
さて、今回は「PageSpeed Insights」でサイトの評価を調べてみると必ずと言っていいほど表示される「次世代フォーマットでの画像の配信」。こやつを修正して評価点数を上げたいですよね。
ResizeCDNを利用してカンタンに解決するか、自力でWebp変換を行なって解決する2つの方法を今回は説明してまいります。
- PageSpeed Insightsとは？
- 「次世代フォーマットでの画像の配信」問題をを解決したい！
- それ、ResizeCDNで簡単に解決できちゃいます
- DBに記事のHTMLが入っている場合は「RsizeCDN ライブラリ」を使おう
- HTMLファイルでページがある時は「CDN自動変換ツール」を使おう
- 「次世代フォーマットでの画像の配信」を自力で解決したい！
- まずは既存の画像でWebp画像を作ろう！
- 次はWebp画像を配置しよう！
- 最後に既存のimgタグを変更しよう！
- まとめ
目次
PageSpeed Insightsとは？
ウェブページのコンテンツを解析し、ページの読み込み時間の短縮方法を生成できるSEOで便利なツールでございます。Google製。
超便利なのでBtoBであるSEOサービス「UXSEO」としても愛用しております。
「次世代フォーマットでの画像の配信」問題をを解決したい！
おそらく普通にサイトを運営しているだけだとPageSpeed Insightsから100%指摘されてしまう「次世代フォーマットでの画像の配信」問題。
いつのまにかそんな基準指標ができたんだよって感じですが、Google様様と取り決めた評価ですので大人しく修正してSEOでの評価を上げましょう。
それ、ResizeCDNで簡単に解決できちゃいます
1つ1つ既存の画像でWebp画像をせっせと作って、配置して、HTML変更して・・・って1ページのみのサイトなら問題ないですが、30ページ以上あるサイトでは正直とっても大変だと思うんです。
そこで「ResizeCDN」を利用すれば一瞬で解決できちゃうんです。
DBにHTMLが入ってたら一瞬で解決できますし
HTMLファイルで作成していてもそこまで時間をかけずに画像をCDN化を行い、自動でWebp配信できる仕組みです。
DBに記事のHTMLが入っている場合は「RsizeCDN ライブラリ」を使おう
ResizeCDNに登録とログインをすっとばして申し訳ないですが、こちらはログイン後の画面です。
で、そのログイン画面の左に「RsizeCDN ライブラリ」っていうリンクボタンがありますのでそちらをクリックしてもらうと上記のようなページに移動します。
その中に「RsizeCDNライブラリ1.0.min ダウンロード」って言うリンクがありますのでこちらをクリックすると「RsizeCDN ライブラリ」がダウンロードできます。
[ダウンロードしたRsizeCDN ライブラリのフォルダ構成] resizecdn-1.0.min(フォルダ) ∟resizecdn-1.0.min.php
ダウンロードしたら場所はどこでもいいです！好きな場所に配置してください。
そしたら次は変換したいページのphpファイルでResizeCDNを読み込んで画像を自動でCDN化しちゃいましょう！
<?php
// ResizeCDN読み込み
require_once 'var/www/html/resizecdn-1.0.min.php'; // 例えばの配置
// インスタンスを生成
$ResizeCDN = new ResizeCDN();
// resizecdn_idをセット
$ResizeCDN->set_resizecdn_id('登録したResizeCDNのid');
/*******************************************/
// 記事HTMLをDBから持ってきてください
$article_html = // ここの記述は各サイト構成やCMSによって変わります;
// htmlにある画像をCDN化
$article_html = $ResizeCDN->html_conversion($article_html);
?>
これだけです。
最小4行追加するだけで画像をCDNで配信、自動で圧縮、更には本記事の狙いであるWebp配信が自動で出来ちゃいます！
HTMLファイルでページがある時は「CDN自動変換ツール」を使おう
PHPやWordPressを使ってない場合でもResizeCDNはちゃんと使えちゃいます。
変換したいimgタグを含んだHTMLをコピーして上記の順番で進んでいくだけで先ほど説明した「RsizeCDN ライブラリ」と同等の自動生成が行われます。便利。
具体的にはどんな変換がされるかと言いますと
<!-- 変換前 -->
<img src="https://resizecdn.com/assets/img/media/article/36.png">
↓
<!-- 変換後 -->
<picture>
<source type="image/webp" srcset="https://resizecdn.com/direct/img/?resizecdn_id=resizecdn_id&url=https://resizecdn.com/assets/img/media/article/36.png&type=webp&w=1800">
<img src="https://resizecdn.com/direct/img/?resizecdn_id=resizecdn_id&url=https://resizecdn.com/assets/img/media/article/36.png&type=png&w=1800" width="1800" height="980" decoding="async" loading="lazy">
</picture>
やばいっすね。めっちゃ長いHTMLができました。ですが、画像に関する様々な対処ができる超最新のSEO対応タグですので是非是非ResizeCDNをご利用くださいませ。
「次世代フォーマットでの画像の配信」を自力で解決したい！
とはいうものの自力で解決したい！って方もいらっしゃるかと思われます。
そんな方のためにも1から説明いたします。
まずは既存の画像でWebp画像を作ろう！
できれば一括変換ができるツールがいいと思いますので各自お好きなソフトやツールを使用して変換を行なってください。個人的にはCLIでささっと変換をしてしまいますが、Webでお手軽に変換するならサルワカさんのツールがお手軽な気が致します。
次はWebp画像を配置しよう！
サルワカさんのツールを使っている前提でお話を進まさせていただきます。フォルダ一式を変換したzipをダウンロードした中身を同じ場所に移動してください。
例えば
var/www/html/img/common
のフォルダの中身が
1.png
だったら
1.png 1.webp
の構成にしましょう。
最後に既存のimgタグを変更しよう！
そしたら最後に既存のimgタグを変えていくわけですが、ゴリゴリに変えていかないとwebp対応できないので一番厄介なのがここの箇所ですね。
<!-- 変換前 -->
<img src="https://resizecdn.com/assets/img/common/1.png">
↓
<!-- 変換後 -->
<picture>
<source type="image/webp" srcset="https://resizecdn.com/assets/img/common/1.webp">
<img src="https://resizecdn.com/assets/img/common/1.png" width="1800" height="980" decoding="async" loading="lazy">
</picture>
Webp対応するにはこのHTMLが2021年5月23日時点でのベストプラクティスなわけですが、正直手書きで対応するにはちょっと・・・厳しい印象がありますよね。もちろん手書きというかテキストエディタの機能である「クリップ」機能などで補完できるので問題ないと言えば問題ないかと思われますが、量が大量にある場合はResizeCDNなどの自動変換してくれるサービスはツールをご利用することをお勧めいたします。
まとめ
次々と新しい技術が増えていくフロントエンド でついていくのが大変なわけですが、画像まわりを最新技術に対応する事によってUXやSEOに効いてくるくる事間違いなしです。
インターネットで商売をさせていただいてGoogleにタダ乗せさせてもらっている事もありますし、対応してまいりましょう。
以上、PageSpeed Insightsで「次世代フォーマットでの画像の配信」の改善を求められてる件を解決できるトピックスでした。
- 圧縮はもちろん最新画像フォーマットにも対応
ResizeCDNを利用すると圧縮・最新画像フォーマットに自動対応して配信できます。
- 全体対応・特定の箇所のみと柔軟なCDN配信が可能
プッシュ型ならでは柔軟な対応とハイスピード最短1分でCDN化ができます。