강제 동기 레이아웃
강제 동기 레이아웃(Force Synchronous Layour, FSL) 은 웹 브라우저에서 레이아웃 계산을 강제로 동기적으로 처리하는 것을 말한다. 레이아웃 계산은 웹 페이지의 요소들의 위치와 크기를 결정하는 과정으로, 브라우저는 일반적으로 최적화를 위해 비동기적으로 레이아웃 게산을 처리한다.
강제 동기 레이아웃은 레이아웃을 변경하는 특정 작업이 수행되는 시점에서 레이아웃을 강제로 계산하도록 하는 것을 의미한다. 레이아웃을 게산하기 위해 다른 요소들의 크기와 위치를 확인해야 할 때 발생할 수 있다. 강제 동기 레이아웃은 성능에 부정적인영향을 줄 수 있고, 불필요한 레이아웃 계산이 발생하여 페이지의 반응성이 저하 될 수 있다.
발생 상황
요소의 크기나 위치를 읽어야 할 때
요소의 ‘offsetTop’, ‘offsetLeft’, ‘offsetWidth’, ‘offsetHeight’ 와 같은 속성을 사용하여 요소의 위치나 크기를 읽을 때 강제 동기 레이아웃이 발생할 수 있다. → offset같은경우 숫자에따라 배치가 달라지니까 요소들 확인해야함
레이아웃에 영향을 주는 CSS속성 변경
결론
강제 동기 레이아웃은 성능 저하를 초래할 수 있으므로, 가능한한 피하는 것이 좋습니다. 불필요한 레이아웃 계산을 줄이고, 필요한 경우에만 레이아웃을 강제로 계산하도록 하는 것이 성능 최적화에 도움이 됩니다.
FOUT, FOIT
FOUT(Flash of Unstyled Text)은 웹 페이지가 폰트를 로드할 때, 기본 시스템 폰트에서 설정한 웹 폰트로 변경 되는 과정에서 발생하는 문제이다. 초기에는 기본 시스템 폰트가 적용되어있다가 웹 폰트 로드가 완료되면서 글꼴이 변경되는 것으로 텍스트가 한 번 깜빡이는 현상이 발생할 수 있다. 이는 사용자에게 불편을 줄 수 있다.
FOIT(Flash of Invisible Text)은 웹 페이지가 폰트를 로드하기 전까지 해당 텍스트의 영역이 비어있거나 투명하게 보이는 문제이다. 웹 폰트 로딩시간이 길 경우, 해당 텍스트가 웹 폰트로 변경되기 전까지 화면에서 보이지 않는다. 사용자가 페이지의 내용을 읽지 못하거나 컨텐츠의 레이아웃이 불안정해 보일 수 있다.
해결 방법
Font Face Observer
웹 폰트가 로드되면 해당 폰트를 적용하기 위해 JS라이브러리인 Font Face Observer를 사용할 수 있다.
Font Display 속성
CSS의 ‘font-display’ 속성을 사용하여 폰트 로딩 동안 어떻게 텍스르를 표시할지 제어할 수 있다. ‘font-display’ 속성을 ‘swap’, ‘fallback’, ‘optional’, ‘block’등의 값으로 설정하여 FOIT나 FOUT를 최소화 할 수 있다.
System Fonts
웹 페이지 초기 로딩시에는 기본 시스템 폰트를 사용하고, 웹 폰트가 로드되어도 폰트를 변경하지 않고 그대로 기본 시스템 폰트를 유지하는 방식이다. 음 .. 그럴거면 왜 쓰지? 싶지만 이렇게하면 FOIT 는 방지할 수 있다.
결론
이러한 방법들을 적절히 활용하여 FOUT와 FOIT를 최소화하고, 웹 폰트의 로딩과 텍스트의 렌더링에 따른 사용자 경험을 향상시킬 수 있습니다.
Link 리소스 우선순위
preload
웹 페이지를 레이아웃하는데에 필요한 리소스들을 사전에 로드하는 작업이다.
주로 이미지, CSS, Javascript, 폰트 파일과 같은 중요한 리소스들을 사전 로드하는데 사용한다.
preload 지시문은 브라우저에게 리소스 우선순위를 설정하고, 리소스 유형을 식별하여 재사용 가능성 여부를 결정한다. 콘텐츠 보안 정책을 준수하는지 확인하며, 리소스 유형에 따라 적절한 Accept 헤더를 보낼 수 있게 한다.
prefetch
사용자가 나중에 필요로할 것으로 예상되는 리소스를 미리 가져와 브라우저의 캐시에 저장하는 저우선순위 리소스 힌트이다. 페이지가 로딩된 후에 추가적인 리소스를 다운로드하기 시작하며, 사용자가 prefetch된 링크를 클릭할 경우 해당 콘텐츠를 즉시 로드할 수있다.
prefetch는 세 가지 유형이 있다. dns-prefetch, link-prefetch, pre-rendering이다. link-prefetch는 HTML <link> 요소나 Link HTTP 헤더에 prefetch를 사용하여 지정한다.
preconnect
브라우저가 특정 도메인과의 연결을 사전에 설정하여 미리 TCP-handshake, TLS-negotiation, DNS 조회 등 통신에 연결에 필요한 작업들을 사전에 처리하는 방식이다. 해당 도메인으로 리소스 요청을 보내기 전에 연결을 미리 설정하여 지연시간을 줄이고 로딩속도를 향상 시킨다. 주로 외부 도메인과의 연결에 사용된다.
