サイトを画像形式WebPに対応した

どうもー．最近ブログの新記事執筆をサボっているポッターです．

早速ですがあなたは普段，画像の拡張子(.jpgや.pngなど)にこだわりを持っていますか？

「そもそも拡張子ってな～に？」って人も居るかも知れませんし，実用上の知識・経験が豊富な人，圧縮アルゴリズムを把握しているスゴイ人も居るでしょう．

ITに疎い方はまず以下3点を理解してもらえればOKです．

そして本題に入っていきますが，基本的にWEBサイトで一番重たいコンテンツは画像です．

つまり，ブログ運営では画像を軽量化することが大事であり，拡張子には拘りを持つべきなのです．

今回は，今までjpegで妥協してきた僕のサイトにWebPという次世代の風を吹かす作業を行った話を書こうと思います．

キッカケ：今月に入って突然LCPが悪化

新記事執筆をサボっているナマケモノの僕がWebP化にノリノリになったキッカケは，LCD(Largest Contentful Paint)という指標が突然だだ下がりしたことでした．

LCDは日本語で「最大視覚コンテンツの描画」と訳され，「ユーザーの視界に入るコンテンツの中で一番大きいものが表示されるまでの時間」という意味だそうです．

LCDはGoogleが出している指標で，最近はChromeを使っている人が自分のサイトにアクセスしたときに時間を計測しているみたいです．
~~(Chrome使っている時にこんな情報も集められているんですよ～．怖くね？)~~

ちなみに最大コンテンツがどうやって判定されるのか正直よく分かっていませんが，PageSpeed InsightsというGoogleが提供しているスピード計測のページを使えば知ることができます．

まぁ基本的には画像ですね．

画像の拡張子を知っている人ならjpeg, gif, pngの3つの形式くらいは知っている人も多いのではないでしょうか．

それぞれザックリ言うと

という特徴があります．

今回僕が使用することにした拡張子であるWebPは，なんと上に挙げた特徴全部を持っています．

jpegのように画像を劣化させる代わりに大幅に軽量化したり，gifのようにアニメーションを大幅軽量化したり，pngのように透過処理や劣化なし圧縮も可能です．

しかも同じくらいの画質だったら，どの拡張子よりも容量が小さくなるという完全上位互換です．

つまり，WEBサイト上のほぼ全部の画像がWebPに置き換えできちゃうし，置き換えたらサイトが軽くなるという最強の子です．

画像の読み込み時間で悩んでいる今，使えそうなら画像を全部WebP化するしかねぇと思いました．

嬉々として解説を書いたWebPですが，実は2, 3年くらい前から存在と概要を知っていました．

何でやっていなかったかというと「iPhoneでよく使われるブラウザのSafariがWebPに対応してない．iPhoneユーザーが多い今は辞めておこう」と考えていたからです．

ですが今日の朝WebPについて調べてみたら，なんと既にSafariもWebPに対応しているじゃありませんか．

しかも，そもそも「WebPに対応している人にはWebPで表示．非対応なら元のファイルを表示」という処理が割と簡単にできるそうです．

ということで古い知識と既成概念で手を出すことを躊躇っていたWebPを採用することを決めました．

思い込みって怖いね．

もう日記書くのに疲れたのでやり方はググって欲しいのですが，EWWW Image Optimizerを使ったら無料で簡単にできました．

大体のプラグインはこれからアップロードする画像を自動でWebP化するものが多かったのですが，EWWWは今まで上げた記事も自動でWebP化できました．やったね．

1点注意点としては「遅延読み込み」って部分はチェックを外しましょう．

デフォルトでチェックが入っているんですけど，僕の環境ではこの部分のチェックを外さないと画像が表示されませんでした．

作業中にGoogle Analyticsのリアルタイム報告を付けていましたが，画像が表示されない残念な状態の時に5人くらい来てました．悲しい．

広い知識を持つことは重要だと思うけど，中途半端に知識を持っているのも考え物ですね．

もしWebPのことを全く知らずにブログ運営を始めていたら，すんなりとEWWWを入れてWebP対応していたかも知れませんね．

思い返してみると「昔はダメだった手法が，実は今だったら大したことせずできる」って場面はIT関連だとよくあることですね．

ダメだと思った手法を調べ直すのは時間の無駄だと思って，つい思考から消してしまうことが多いんですよね…．

既成概念に囚われないようにすることが今後の課題だと思いました．