祝 満点
インフラ・サーバー・フロントエンドをバランスよく学びし者に与えられる称号、Lighthouse4冠を達成するまでWebをこねくり回した時の振り返りです。
そもそも何作ったの？
エンジニアが作りがちな個人サイトです。
大した機能はなく、自己紹介に使えればいいかな程度のサイトです。
元々Lighthouseで高得点を狙うつもりでは作っていませんでした。
主な機能
- テーマ切り替え対応
- API経由でのGithubの草情報表示
- Discordステータス表示
- Qiita RSSでの最新記事表示
ざっくり技術スタック
インフラ
- Cloudflare Workers
- Cloudflare KV
コンピューティングはWorkersで行い、KVはGithubの草とQiita RSSのレスポンスを1日キャッシュします。
画像配信
- Cloudflare R2
サブドメインで配信します。
Web
- Hono
- ReactRouterv7
ReactRouterv7のフレームワークモードで、/apiにマッチするリクエストをHonoに置き換えて使います。
Web標準だからこそなせる技です。
Lighthouseが出した警告対応まとめ
パフォーマンス
- Render blocking requests
- 並列データロードする
- 可能な限りSSRする
- Use efficient cache lifetimes
- CDNに載せる
- R2 StorageのTTLを伸ばす
- Improve image delivery
- pngのままだと怒られたのでwebpに変換して対応
アクセシビリティ
- Image elements do not have [alt] attributes
- つけるだけ
- Links do not have a discernible name
- つけるだけ
- Background and foreground colors do not have a sufficient contrast ratio.
- 全部合格するまで色を変える
ベストプラクティス
- third party cookie
- discordのAvatarを直リンクしたらcookieついたので対応
- imgタグに
referrerPolicy="no-referrer"で抑制
- Browser errors were logged to the console
- hydration mismatch対策でcookieをつかってテーマ管理する
SEO
- robots.txt is not valid
- Cloudflareが付与するrobots.txtの仕様が新すぎたので無効化
満点をとった感想
通常のWebアプリで満点を狙う必要はないです。
機能的な要件でどうしてもロードが遅くなることもあるでしょうし、表現したいものによっては文字と背景のコントラストを敢えて小さくしていることもあるかと思います。
デザインに迷った時、理由付けされた判断を行うための補助として使うと良いでしょう。
ちょっとした暇つぶしから始まったパフォーマンスチューニングでしたが、インフラ・バックエンド・フロントエンドの全ての知識がないと満点は取れないと思います。
地味にhydration mismatchなどはそれだけで記事を書けるだけのネタだったりしますね。
みんなも良き高速Webライフを。