ken-j’s diary

大衆の人が「なるほど」と言えるようなブログは書けない。でも少数が「なるほど」って言える記事をつくる。それがこのブログです。

『サイト速度を上げるには?』次世代フォーマット【JPEG 2000、JPEG XR、WebP】の知識を取り入れよう。

次世代フォーマットを使いこなすには時期尚早か。

ken-jです。

 

少し前、Googleサーチコンソールに『サイト速度』をチェックできる項目が追加されましたね。

 

場所は後に紹介しましたがサイト速度をチェックしてみました。

そうすると記事の一つで大きく遅延が起きていることが分かりました。

f:id:ken-j:20191218065205j:plain

当ブログでは売れ筋記事なのでどうにかしなければと思い検証してみることに。

 

先に申し上げると結論はでておりません。

しかし調べていく中でまた知らなかったワードが出てきました。

 

今回の記事は次世代の画像フォーマットを知るきっかけづくりとして作成します。

 

最後に専門的でわかりやすかったサイトをリンク貼りするので確認してみて下さい。

調べる経緯から話していきたいと思います。

Googleサーチコンソール内【速度(実験的)】

ちょっとマニアックなタイトルを付けているので、閲覧されている方はもう導入されていると思いますが。

 

Googleサーチコンソールを使っていますか?

一応リンクを載せておきますね。

https://search.google.com/search-console/about?hl=ja

導入はわかりやすく手順通りに進めば出来ると思います。

 

さて、記事をすすめていきます。

 

Googleサーチコンソール内にサイト速度をチェックできる項目が追加されました。

そして、サイト速度を確認した画像がこちらです。

f:id:ken-j:20191218060441j:plain

モバイルに遅延が大きな遅延が発生していることがわかります。

(数値は公開しない方がよいとのことなので、非公開です)

 

続きまして、レポートを開き「詳細」を確認します。

遅延理由は一つの記事だった

詳細から確認していくとたどり着いたのは過去記事たった一つ。

f:id:ken-j:20191218061802j:plain

Webについて素人とあまりわからないぼくにとってはなんでなのか全く分からない。

今後も調査検証を実行するのですが、先に進んでいけるので進んでみていくことに。

PageSpeed Insights(速度解析サイト)

当ブログでは何度か紹介しているサイトにたどり着きます。

www.ken-j.work

結果はこんな感じです。

f:id:ken-j:20191218064047p:plain

ボロボロですね。。

 

本題はここからです。

少し下にスクロールすると

「次世代フォーマットで画像を提供する」

という文字が。

 

内容は

JPEG 2000、JPEG XR、WebPなどの画像形式は、PNGやJPEGよりも圧縮率が高い場合が多いため、ダウンロードが速くなり、データの消費量が少なくなります。

なんだそれはとなりました。

 

気になりませんか?

次世代フォーマットで画像を提供する

 ここでいうフォーマットというのは、写真の拡張子のことですね。

『〇〇〇.jpg』

とか

『〇〇〇.png』

など。

 

引用にて少し触れましたが

次世代フォーマットを活用することで画像データを大幅に抑えることができるそうです。

 

次世代フォーマットは3つあるそうです。

  • JPEG2000
  • JPG XR
  • WebP

どのフォーマットもこれまでの画像データに比べてデータ容量を節約できるそうです。

 

使用するにはそれぞれ注意が必要です。

閲覧するブラウザによって表示できたり出来なかったりとあるようです。

*1

 

結論としては『WebP』が今後主流になる見込みがあるようですね。

 

もし興味があればわかりやすく説明してあった記事を載せておくので確認して見て下さい。

magnets.jp

jill-tone.com

まとめ

Googleコンチソールの確認から始まった今回の記事。

 

本当は『次世代フォーマットへ変換して記事を投稿してみた』という内容にするつもりでした。

 

ですが、推奨されている次世代フォーマット『webP』を活用しても閲覧できないブラウザがあるとのことなので、やめておきました。

 

今後はきっと主流になっていくであろう次世代フォーマット。

 

今のうちに少しでも知識を取り入れておきませんか?

 

最後までお読み頂き、ありがとうございました。

*1:ブラウザとは・・【appleでいうと「safari」】 【Microsoftでいうと「IE」「Edge」】 【Googleでいうと「Chrome」】