web チェックリスト
TODO
フロント
- レイアウトシフトが起こっていないか
- webpでできるか
- 画像はアスペクト比になっているか
- Flash of unstyled content（FOUC）が起きていないか
フロントtips
Flash of unstyled content（FOUC）とは
一瞬スタイルがあたっていない状態で表示されてしまう問題が発生していました。
いわゆるFOUC（Flash of unstyled content）と呼ばれる現象です。少し遅れてスタイルがあたるため、ちらつき・がたつきが生じてユーザー体験がよくありません。 ちなみに発生する条件は以下です。
Next.jsでCSS Modulesを使用（styled-componentsでは問題なし） 後述のIssueではstyled-jsxでも同じ問題が報告されている Google Chrome（FirefoxとSafariでは問題なし） SSRしたとき（クライアントでのページ遷移時は問題なし） なんとなくChromeのpreload周りの挙動に原因がありそうなのですが、検証はできていません。