Light Houseでperformanceを99にした話

この記事はArchiveされているため、情報が更新されていない可能性があります。

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 やろうと思います。