サイト内の画像をすべてWebPに変えてやった

おれは、自分の記事が他人から面白くないと言われることは別に構わないと思っている。 というのも、頭の悪い人(第一世界、左側の人たち)に読んでほしいと思って書いているわけではないからだ。

この世の形「3つの世界」

ただし、グーグルが自身の検索エンジンが人類にとってデファクト・スタンダードとなった今でも 恣意的な検索アルゴリズムの変更を行い、 人類が知り得る情報を恣意的にコントロールしていることには全く賛成出来ない。 これを許してしまうと、地球を支配出来てしまうからだ。

それはともかく、サイトの良さを測る絶対的な指標としてサイトの軽さ(メカニカルと呼ぶことにしよう)にはこだわりたいと思っていて、 これが静的ジェネレータのhugoを使っている理由である。 この点では、今まで画像の軽さにそこまでこだわっていなかったことは矛盾があった。

状況は、JPEGならばまだ良いが、一部はなぜかくそ重いPNGが使われていた。 いつか画像の軽量化をしようと思ってはいたのだが、今のいままで先延ばしになっていたわけで、 こうして4連休の最終日に一気にやってしまおうと奮起して、一気にやってしまった。

次世代画像圧縮フォーマットとしてはいくつか候補があるのだが、 WebP(ウェブピーではなく、ウェッピーと呼ぶらしい。だっさ)を使うことにした。 これはグーグルが開発したフォーマットで、いつ開発されたのかは知らないが、 2013年には記事が見つかるのでかなり前から存在していたことは確かで、 少しずつブラウザのサポートが進んでいき、つい最近Safariがバージョン14でサポートを実装した。 これでまともなブラウザはすべてWebPをサポートしたことになる。

WebPを選択したのは、グーグルに「お前らの考えた最強のフォーマットを使ってるんだから評価してくださいよ」 という気持ちもある。実際に、そういうこともあるだろう。 さきほど、グーグルが検索を支配してるのは悪いことだとか言ったわけだが、 それは内容について恣意的なコントロールをすることが悪だと言ったまでであって、 内容以外のこの場合メカニカルな部分について良いものを良いと評価することについては異論はない。

というか遅いサイトは地球にとって二酸化炭素なんかよりもっともっと害悪だからもっと順位を下げてほしいとも思う。 静的ジェネレータによって構築された爆速サイトがより評価された方が健全だ。 Core Vitalというのが完全に緑なので、速さを評価しようとしていることは伺えるが、 もっと過激になってほしい。グーグルのエンジニアって性能野郎ばっかじゃないのか。

こうして、すべてをWebPにしたわけであるが、 その方法は、brewでcwebpというコマンドをインストールして、 画像ファイルをすべてWebPに変換し、 サイトに埋め込んである画像へのリンクを一目散に書き換えるだけである。 (実際にはwebpというショートコードを実装したため作業は幾分楽になった) 時間は単純作業だけで2時間かかった。

cwebpのオプションを一切いじらずに使って WebPを生成すると、JPEGと比較してだいたい半分か3分の1くらいのサイズになる。 画質の差は、人間の目にはわからないと思う。 最適化の結果、ゲーム方面のブログであるGAAブログはもともとモバイルのSpeedスコアが63しかなかったのだが、80になった。 ブラウザの方は97くらい。まぁまぁ良い方だ。

サイトの改良として次に何を考えているかというと、 関連のある記事間の内部リンクをたどりやすくしたいと思っている。 hugoにはRelated Contentsという機能があって、今はそれを使って関連のある記事 を推薦してるのだけど、これはすごく適当な作りをしていて、あまり精度が良くない。 ではどうするかというと、サイト内の記事を機械学習によってクラスタリングするなり、 キーワード抽出(tf-idfとか)するなりして、本格的に関連を明らかにする方法を考えている。 このためには、サイトのコンテンツをhugoの外からコントロール出来る必要があり、 そのためのコードも書いている。そこまでやるならばwordpressにするという案もあるのだが、 静的ジェネレータで行くという方針自体はどうしても譲るわけにはいかない。

どうすれば関連コンテンツをより見てもらえるようになるかについてはまだ決めかねるところがあるが、 とりあえず実装して実験するところまではやって、また報告すると思う。ばいちゃ。

comments powered by Disqus
Built with Hugo
テーマ StackJimmy によって設計されています。