인터넷 속도가 조금 느린 환경(지하철, 달리는 차 안)에서 스마트폰으로 웹사이트에 접속했을 때, 사진이나 틀은 다 떴는데 '글씨'만 투명하게 안 보이다가 1~2초 뒤에 팍! 하고 나타나는 현상을 겪어보셨나요?
이 텅 빈 1초의 순간은 고객에게 "이 사이트 로딩이 너무 느리네"라는 깊은 불쾌감을 심어주어 치명적인 이탈(Bounce)을 유발합니다.

1. CSS 한 줄로 브라우저의 고집 꺾기

고객은 예쁜 글씨체보다 '내용(콘텐츠)'을 빨리 읽는 것을 훨씬 중요하게 생각합니다.
CSS 폰트 설정에 font-display: swap; 이라는 마법의 속성 단 1줄을 추가해 보세요. 브라우저에게 "폰트 다운로드 기다리지 말고, 일단 스마트폰에 깔린 기본 글씨(맑은고딕, 굴림 등)로 내용부터 먼저 보여줘! 그리고 다운로드가 끝나면 그때 예쁜 폰트로 싹 바꿔치기(Swap) 해!"라고 명령하는 속성입니다.

/* 웹 폰트를 불러오는 @font-face 안에 딱 한 줄만 추가하세요 */
@font-face {
    font-family: 'Pretendard';
    src: url('Pretendard-Regular.woff2') format('woff2');
    
    /* 투명한 화면을 방지하고 시스템 폰트를 먼저 보여주는 마법의 속성 */
    font-display: swap; 
}

2. 구글 SEO (검색 최적화) 점수의 수직 상승

이 코드를 적용하면 화면에 글씨가 렌더링되는 속도(FCP)가 0.1초 단위로 단축됩니다. 구글의 검색 엔진은 사용자가 화면의 텍스트를 얼마나 빨리 읽을 수 있는지를 매우 중요한 품질 지표로 평가합니다.
단 1줄의 코드로 고객의 체감 속도를 높이고, 구글 검색 결과 상위 노출(SEO)까지 노릴 수 있는 일석이조의 완벽한 최적화 기법입니다.