아스트라 Font Swap 문제 공식 설명서를 보고 해결하기
처음 워드프레스를 시작할 때는 기능들이 많고 뉴스 사이트처럼 되어 있는 테마를 선호하였습니다. 하지만 PageSpeed insight 검사를 진행하였는데 속도가 느려서 아스트라 테마로 변경하게 되었습니다.
근데 기존 테마에서 해결을 하였던 Font Swap 문제가 발견되어서 공식 사이트에서 찾아보니 아스트라 Font Swap 문제는 간단한 코드 추가로 어렵지 않게 해결할 수 있었습니다.
근데 Font Swap 문제는 무엇인지 궁금하신 분들이 있을 것입니다. 이 부분에 대한 해결 방법에 대해서 글을 작성한 적이 있는데 설명 드린다면 익스플로러는 FOUT 방식을 사용하지만 다른 브라우저는 FOIT 방식을 사용하기 때문에 글꼴이 번쩍이는 현상이 생길 수 있어서 FOUT 방식으로 변경을 하라는 것입니다.
네이버 공식 설명을 보게 되면 더 자세히 알 수 있는데 브라우저의 렌더링 차단 처리 방식 글을 참고해 보시기 바랍니다.
- FOUT(Flash Of Unstyled Text) : 익스플로러 계열 브라우저에서 사용하는 방식으로 웹 폰트가 로딩 될 때까지 우선 폴백 폰트로 텍스트를 랜더링합니다.
- FOIT(Flash Of Invisible Text) : 파이어폭스, 크롬 등이 사용하는 방식으로 웹 폰트가 로딩되기 전까지 해당 텍스트를 화면에 보여주지 않습니다.
위의 설명을 보게 되면 FOIT 방식을 사용하는 크롬, 파이어폭스 같은 브라우저를 사용하는 분들은 웹 폰트가 로딩되기 전까지 텍스트가 보이지 않게 되기 때문에 웹 폰트가 로딩이 되면서 글꼴이 번쩍이는 현상이 발생할 수 있습니다.
그래서 FOUT 방식으로 설정을 해서 로딩 시간 줄이고 글꼴 번쩍이는 현상을 해결하라는 것입니다. 다른 테마를 사용하는 분들이라면 Font Swap PageSpeed Insight 해결 방법 글을 참고하시고 아스트라 테마를 사용한다면 아래의 글을 따라서 해결하시기 바랍니다.
Comments
Post a Comment