FOUC란 페이지가 렌더링되는 과정에서 스타일이 배제된 채 화면이 노출되는 현상을 말한다. 이런 현상은 네이버와 같은 유명 포털에 접속하였을 때도 간간히 접한 경험이 있는 듯 하다. 이 현상은 웹브라우저에서 서버로부터 CSS파일을 받지 않은 상태에서 미리 받아놓은 HTML을 활용해 먼저 화면을 렌더링 하였기 때문에 발생한다. 이 현상은 아무래도 사용자 경험을 매우 저해하는 원인이 되기도 한다.

이미 사용자 경험을 저해한다는 것은 그 자체로 주의 깊게 다루어야 하는 이슈라고 할 수 있다.

해결방법

1. 폰트와 스크립트를 제한한다 폰트파일이 많을수록, 스크립트 파일이 많을 수록 FOUC가 발생할 여지는 많아진다. 아무래도 서버로부터 받아와야 하는 파일이 많아지니 당연할 수 밖에.
2. 스크립트를 HTML페이지 맨 아래에 배치한다. 스크립트 파일을 HTML페이지 맨 아래에 배치할 경우 스크립트를 불러오는 시점이 늦춰진다. 그만큼 다른 에셋을 먼저 받아올 수 있는 여지가 생긴다.
3. 화면에 로딩 화면을 노출한다.
4. 사이트의 이미지 및 파일 사이즈를 줄인다.

요즘엔..

사실 요즘 웹개발 환경에서 이 문제는 크게 발견되지 않는 것 같다. 일단 에셋을 관리하는 방식 자체에 많은 변화가 있었기 때문이다. SPA 방식으로 개발을 진행하면 일반적으로 웹팩과 같은 번들러를 사용하게 된다. 그렇게 되면 HTML, JS, CSS파일 등이 여러 파일로 분산되어있지 않고 각각 하나의 파일안에 압축되어 관리되는 경우가 대부분이다. 따라서 예전처럼 한번에 여러 파일을 불러올 필요가 없기 때문에 아무래도 페지이를 로드하는 속도가 매우 빨라졌다. 물론 나날이 빨라져가는 네트워크의 속도도 이런 현상을 줄여주는 또 다른 요소가 되기도 할 것이다.