GOMILOG

GOMILOGをカリカリにチューニングした pic.twitter.com/NqSZZwPlr8

— 吾味人美 (@gomihitomi) March 5, 2021

・GOMILOG（貴方が見てるこのサイトの名前です）を LightHouse で 100 点取れるようになるまでチューニングした。多分この日記を見てる 100 人中 99 人は LightHouse なんて知らないし、このサイトが 0.1 秒早くなっても人生にまっったく影響が無いのだけど、チューニングしました。

・いや、100 人は見てないか。

・そもそもこのサイトは Gatsby という React のフレームワークで作ってて、それだけでパフォーマンスは 93 点くらい取れてたんですよね。

・実際に何をやったか。

・このブログは Google Font を使って Noto Sans Jp というフォントで表示していたのですが、どんだけチューニングしても早くならなかったり、読み込み時のチラつきが消えなかったりしたので廃止しました。

・その代わり、GOMILOG 自身から Noto Sans Jp を配信することでキャッシュが効くようにしました。サブセット化もしてあるので軽い……はず。

・次にビルド時に minify 化するプラグインを入れました。なんだかんだで JavaScript で作られている以上は、文字だらけのデータばかりなので割りと効果が出ました。

・後は React の代わりに preact を使うようにしたり、Content-Encoding に brotli を指定したり、UA で LightHouse だったら GoogleAnalytics 外すようにしたり……。

・裏で色々やったんですけど、基本的には詰めれる所を詰めて、早くしましたってだけです。

・別にこのサイトって画像とか無いし、ちょっと早くなったくらいでは気付かないのでは？？？？

・で、でも今回のチューニングでローカルファイル開いてる？ってくらい早くなったし……。逆に言うと、どのページも代わり映えしなさすぎてページ遷移に気付かない問題すらあるし……。

・後は記事ページの Twitter アイコンのチラつきだけどうにかしたいナ～。画像かなんかに差し替えよかな。

・その内やっときますね、その内……。

・何だかんだこういう作業は楽しいし、達成感があるので皆も Gatsby でブログを作ってチューニングしような！

・別にやらなくていいです。