Light Houseでperfomanceを99にした話

tl;dr

gatsbyjsとnetlifyを使いましょうって話。

このブログでやったこと

Webフォントをベースに作っていたんですが、サイトタイトルなどの一部分をのぞいてWebフォント自体やめました。 あとは基本的にNetlifyとGatsby使ってれば↑の点数までいきました。

現状LifeCycleを必要とするpageやcomponent自体なかったので、基本的にすべてFunctional Componentで実装してますが、Domも少ないしメインの処理は40msとかっぽいし特にパフォーマンス的には誤差っぽいですね。

ともかくGatsbyJSが勝手にSSRしてCodeSplitingとかprefetchも勝手にやってくれるからほんとうに大したことはしてないです。

最大の速度対策

画面に機能やコンテンツを入れすぎないこと。 一画面あたりの情報量や機能を一定量以下にして、ある程度増え今度は画面を分割して、、、っていうのが多分Webのあるべきだと個人的には思います。

Webのいいところって「見たい情報だけを見れること」だと思うんですよね。 そういう面でもコンテンツが増えた段階でページを分割していった方が、速度＋UX的にも良さそう。 まぁ、このサイトは多分ブログの記事以外は増えないけど。

今後の施策

GatsbyのプラグインでTypescript入れるとcss modulesらへんうまく型ファイルを自動生成できなかった。。。 Typescriptはいずれ本腰入れて対応しようと思うので、次はフォームを作るかworkboxでPWAやろうと思います。