글꼴 로딩 전략 : 글꼴을위한 기술이 빠르며 UX에 영향을 미치지 않습니다.

아름다운 웹 사이트 ...하지만 왜 편지가 천천히 올라가는가? 고객이 즉시 "누른"문제를 일으키는 문제

당신은 해본 적이 있습니까? 당신은 아름답게 설계된 웹 사이트를 입력합니다. 그러나 대신 메시지가되어야하는 여유 공간에 앉아서 응시해야했거나 (기본 시스템 글꼴과 같은) 이상한 얼굴이 첫 번째와 두 번째로 보여 주어야했습니다. 디자인에 따라 "플래시"가 아름다운 글꼴로 변경되었습니다 ... 첫 느낌은 무엇입니까? "웹 사이트는 너무 느립니다." "봐, 프로 아", 맞죠? 이 문제는 작은 문제가 아닙니다. 많은 사람들이 간과 할 수있는 사용자 경험 (사용자 경험)과 전환율의 "실제 살인자"입니다. 처음 3 초 동안 고객을 잃을 수 있습니다. "글꼴"이야기 때문입니다

삽화를위한 프롬프트 : 웹 사이트 화면 이전의 비교 이미지 한쪽은 FOIT 아이콘이있는 빈 공간을 보여주고 다른쪽에는 디자인 (FOUT)이 사용자를 자극하는 얼굴과 일치하지 않는 기본 글꼴을 보여줍니다.

무대 뒤에서 : 왜 글꼴이 우리 웹 사이트를 "걸림돌"하게 만드는가?

이 문제의 핵심은 사용자가 웹 사이트를 열 때 브라우저 방법으로 인해 발생합니다. 브라우저는 웹 페이지를 만들기 위해 HTML 코드를 읽기 시작합니다. "웹 글꼴"(모든 사용자의 장치에 설치되지 않은 특수 글꼴)을 사용해야한다는 명령을 찾으면 즉시 새로운 미션을 얻는 것과 같습니다. "먼저 중지하십시오! 서버에서 글꼴 파일을 먼저 다운로드해야합니다. 여기에 메시지를 표시하려면!"

"다운로드 중지"프로세스는 웹 개발자가 잘 알고있는 두 가지 고전적인 문제입니다.

• foit (보이지 않는 텍스트의 플래시) : 또는 "문자가 사라집니다"는 브라우저가 먼저 모든 텍스트를 "숨기기"로 선택한 증상입니다. 올바른 글꼴 파일을 다운로드 할 때까지 기다리십시오. 그런 다음 사용자가 잠시 빈 공간으로 볼 수있는 결과를 보여줍니다.
• Fout (끊임없는 텍스트의 플래시) : 또는 "Strange Faces"는 브라우저가 이전에 시스템에 있었던 글꼴이있는 글꼴로 텍스트를 표시하기로 선택한 증상입니다. 사용자가 컨텐츠를 즉시 읽고 올바른 웹 글꼴 스위치를 다운로드 할 때 해당 글꼴을 대신 사용합니다. "깜박임"또는 성가신 레이아웃 시프트가 발생합니다

이 두 증상 모두 웹 사이트가 렌더 블로킹 리소스에 문제가 있다는 경고 신호입니다. 이는 해결해야 할 것입니다. 렌더 블로킹 리소스를 해결하는 방법을 이해하는 것은 웹 속도를 향상시키는 데 중요한 첫 번째 단계입니다.

그림을위한 프롬프트 : 간단한 인포 그래픽 브라우저의 작업 과정을 표시하십시오. 1. HTML -> 2를 읽으십시오. 명령 참조. Web Font -> 3을 사용하십시오. 렌더링을 중지하고 서버에 요청을 보내십시오 -> 4. 다운로드 파일을 기다리십시오 -> 5. 텍스트 표시.

떠나 ... 당신이 생각하는 것보다 손상! 비즈니스에 대한 "느린 다운로드 글꼴"의 효과

느린 다운로드 문제는 단순한 아름다움이 아닙니다. 그러나 비즈니스 목표에 직접적인 영향을 미칩니다.

• 사용자 경험을 깨십시오 (나쁜 UX) : 아무도 기다리는 것을 좋아하지 않습니다. "지연"또는 "트위치"라는 느낌으로 웹 사이트가 신뢰할 수없는 것처럼 보입니다. 첫눈에 사용자에게 과민성을 유발합니다
• 핵심 웹 유명한 것은 심연을 가리 킵니다. 누적 레이아웃 시프트 (CLS)에 직접적인 영향을 미칩니다 . FOIT 문제로 인해 메인 메시지가 화면에서 가장 큰 경우 LCP (Last Concentful Paint)가 이 모든 것이 Google이 SEO 순위를 사용하는 중요한 요소입니다.
• Bookce 요율이 상승합니다 : 사용자가 웹 사이트가 느리고 비우호적이라고 생각하면. 그들이 누르고 경쟁자들에게 탈출 할 수있는 기회는 즉시 상승 할 것입니다.
• 전환율 감소 : 고객이 "유료"버튼을 누르려고한다고 상상해보십시오. 그러나 망설임과 불안정성이 즉시 발생하거나 앞뒤로 움직이는 메시지와 버튼이 발생했다고 상상해보십시오. 그리고 그것은 판매 손실을 의미 할 수 있습니다

결국, "글꼴"이라는 작은 문제로 인해 Google의 순위, 고객의 신뢰 및 소득을 모두 잃게 될 수 있습니다. 이 개선은 가치있는 투자입니다. 디자인 UX/UI 에주의를 기울입니다 좋은 마음은 이러한 문제를 예방하는 데 도움이되는 열쇠입니다.

그림을위한 프롬프트 : 3 개의 그래프 이미지 영향을 보여주는 3 개의 그래프 이미지 : 첫 번째 "바운스 속도"가 지적되고, 두 번째로드 "Core Web Vitals Score"가 표시되고, 세 번째 "변환율"이 나열되어 있습니다.

게임을 열어 게임을 수정하십시오! 글꼴을 빠르게 다운로드하는 방법, 로켓을 부착하고 UX에 친숙합니다.

좋은 소식은이 문제를 효율적으로 다루는 방법이 있다는 것입니다. 그리고 그들 중 대부분은 여기서부터 시작하려고 생각하는 것만 큼 복잡하지 않습니다.

• 가장 쉬운 궁극적 세트 : 중고``Font-Display : Swap`
  이것은 가장 쉽고 효과적인 시작 방법입니다. 코드를 추가하는 것입니다. Google 글꼴에서 글꼴을 호출하거나 속성 'Font-Display : Swap'을 추가 할 때 URL에서 Display = Swap`는 자체 코드에 있습니다. "기본 글꼴을 먼저 표시하십시오. 기다리지 마십시오. 실제 글꼴이 완료되면"이 방법으로 전환하면 FOIT 문제를 즉시 제거하고 사용자가 컨텐츠를 더 빨리 읽을 수 있습니다.
• 
  Google 글꼴과 같은 외부 서버에서 글꼴을 호출하는 대신 셀프 호스트 웹 글꼴을 향상시킵니다 글꼴 파일을 다운로드 할 수 있습니다. (Fort. Woff2를 사용하는 것이 가장 작은 크기입니다) 우리 자신의 서버에 보관하십시오. 이를 통해 외부 도메인 (DNS 조회)에 대한 연결을 줄이려면 브라우저가 더 빨리 작동 할 수 있습니다. 그리고 우리는 캐싱을 완전히 제어 할 수 있습니다
• 
  웹 상단 (접힘 위)의 주요 주제 (H1)와 같은 매우 중요한 글꼴에 대한 임계 글꼴을 예압합니다 "서둘러이 글꼴을 다운로드하여 준비하십시오. 긴급하게 사용해야하기 때문에!"이 방법은 글꼴을 가장 중요하게 사용할 수있게 해줄 것입니다.
• 필수 만 선택하십시오 : 글꼴 파일 서브 세트
  글꼴 파일 전 세계 모든 언어에 대한 문자가있을 수 있습니다. 이는 파일을 불필요하게 크게 만듭니다. "Subsetting"은 우리가 실제로 사용해야하는 문자 (예 : 영어 및 태국)를 작은 새 파일로 자르는 기술입니다. 언어를 선택할 때 Google Fonts 의 도구가

이러한 기술을 선택하면 웹 사이트가 훨씬 빠르게 다운로드 할 수 있습니다. 이는 핵심 웹 생명, 특히 INP 및 모범 사례에 대한 전체 사용자는 Web.dev의 모범 사례 .

삽화를위한 프롬프트 : 아름다운 인포 그래픽은 아이콘이있는 4 가지 주요 기술을 보여줍니다. 1. CSS 아이콘 아이콘`swap`, 2. 글꼴이있는 서버 아이콘, 로켓``Prelad '아이콘'.

실제 예제 : 전자 상거래 웹 사이트가 글꼴을 조정하여 판매를 전환 할 때.

온라인 커피 원두를 판매하는 회사 "아로마 콩"은 빈티지 글꼴을 사용하여 브랜딩을 만드는 아름다운 웹 사이트가 있습니다. 그러나 그들은 큰 문제에 직면했다. "지불 페이지에서 벗어난 비율은 비정상적이다. 팀은 결제 페이지에서 많은 웹 글꼴이 사용되어 FOIT가 "확인 버튼을 확인"하고 재무 금액의 요약이 잠시 사라 졌음을 발견했습니다. 혼란을 일으키고 고객에게 자신감이 없습니다.

다음과 같은 미션 : 개발 팀은 3 가지 주요 기술을 사용하여 해결되었습니다.

1. ``& display = swap` 늦게있는 모든 글꼴을 변경하십시오.
2. 셀프 호스트. 주요 글꼴은 제품 가격과 결제 버튼과 함께 사용됩니다.
3. 버튼의 글꼴에 명령을 추가하십시오. 특히 "주문 확인"

실질적인 결과 : 개선 후 1 주일 만에 CLS 점수가 렌더 블로킹 문제인 70%보다 우수하다는 것을 발견했습니다. 이는 이전에 PagesPeed Insights에서 경고되었으며 가장 중요한 것은 "체크 아웃 페이지의 카트 포기는 25%감소"하여 전체 판매가 상당한 판매를 초래했습니다. 이것은 글꼴과 같은 작은 것들의 개선이 실제로 큰 비즈니스 영향을 줄 수 있다는 증거입니다.

삽화에 대한 프롬프트 : 왼쪽 휴대 전화의 전 체크 아웃 페이지와 후에는 가격과 누락 된 버튼이 표시됩니다. 로드 아이콘은 완벽한 웹 페이지를 보여주는 오른쪽에서 회전합니다 (후). 판매 그래프 상승이있는 텍스트와 버튼을 지우십시오

당신의 눈입니다! 체크리스트 4 단계 웹을 업그레이드하여 글꼴을 더 빨리 다운로드합니다.

웹 사이트를 더 빨리 만들 준비가 되셨습니까? 당신은 기다릴 필요가 없습니다! 이 쉬운 체크리스트를 따르십시오.

1. 현재 상태 확인 : Google Pagespeed Insights 로 이동하여 URL을 웹 사이트로 넣으십시오. 자신이 옳다는 것을 알게되면 "웹 폰트로드 중에 텍스트가 표시되는 상태로 유지"라는 제안을 찾고 있습니다!
2. Display = Swap` (빠른 승리) : Google 글꼴을 사용하는 경우 글꼴을 호출하고 URL에서``& display = swap` Ending을 추가하는 데 사용되는 코드로 돌아갑니다. 이것은 가장 쉽고 빠른 편집입니다.
3. (고급) 자체 호스로드 :
   • 글꼴 파일을 다운로드하십시오. 저작권이있는 출처에서 원하는 .woff2 성.
   • 글꼴 파일을 호스트에 업로드하십시오.
   • CSS 파일에서 코드 '@font-face`를 사용하여'font-display : swap; ``
   • 가장 중요한 글꼴을 위해``````add``````` "의 HTML 파일에서
4. 측정 및 감사 : PagesPeed Insights로 돌아가서 새로운 실행을 시작하십시오. 당신은 조언이 사라 졌다는 것을 알게 될 것입니다. 그리고 전체 점수가 더 좋습니다!

효율성의 개선은 단순한 글꼴이 아닙니다. 또한 새로운 형식 사진 웹 디자인 의 일부인 지속 가능한 웹 사이트 만들기를 포함

삽화를위한 프롬프트 : 각 항목에 아이콘이있는 4 개의 항목이있는 체크리스트 이미지 (확대 안경, 코드, 로켓, 그래프) 및 저렴한 진드기 -그린 마크가 있습니다.

사람들이 궁금해하는 경향이있는 질문 (FAQ)은 글꼴 로딩의 모든 문제를 해결합니다.

Q1 :``Font-Display : Swap`과``옵션 ''간에 사용해야합니까?
A : 대부분의 웹 사이트의 경우``스왑 '이 최선의 선택입니다. ``옵션 '을 사용하면``옵션'이 더 강한 경우 (약 100ms) 글꼴이 기본 글꼴을 사용하는 경우 항상 기본 글꼴을 사용하지 않을 수있는 경우 사용자가 기본 글꼴로 컨텐츠를 즉시 볼 수 있고 아름다운 글꼴로 컨텐츠를 즉시보고 아름다운 글꼴로 전환 할 것입니다.

Q2 : Google Fonts CDN을 사용하는 것보다 셀프 호스트 글꼴이 빠르나요?
A : 항상 그런 것은 아니지만 더 나은 "제어". Google Fonts는 강력한 CDN을 가지고 있으며 전 세계에 퍼져 있습니다. 로드가 매우 빠르지 만 웹 사이트에서 통화를하면 Google 서버에 대한 DNS 조회를 수행해야합니다. 셀프 호스트는이 단계를 끊을 것입니다. 그러나 자신의 서버가 빠르고 캐싱이 충분히 좋은지 확인해야합니다.

Q3 : 한 웹 사이트에 웹 글꼴이 몇 가지 이하가되어야합니까?
A : 덜 나아질수록! 원칙에 따르면 1-2 개의 글꼴 패밀리 (예 : 주제 1, 콘텐츠의 경우 1) 만 제한하고 일반 (400), Bold (700)와 같은 필요한 가중치 만 선택하려고합니다. 한 페이지에 5-6 개의 글꼴을 사용하면 막대한 다운로드가 생성됩니다.

Q4 : 웹의 모든 글꼴을 사전로드해야합니까?
A : 필요하지 않으며 수행해서는 안됩니다! 예압은 일반적으로 메인 헤드 라인의 글꼴이거나 화면의 상단 절반 (접힘 위)에 표시되는 메뉴 인 "중요하고 즉시 사용해야한다"는 글꼴에 적합합니다. 예압. 모든 것이 브라우저가 너무 열심히 작동하고 부정적인 영향을 줄 수 있습니다.

삽화를위한 프롬프트 : 깨끗하고 이해하기 쉬운 질문 아이콘 응답.

요약 : "글꼴"을 웹 사이트를 방해하지 마십시오.

우리는이 이야기가 "글꼴로드"처럼 보이는 것처럼 보입니다. 사용자 경험, 핵심 웹 생명체, SEO 순위에 직접적인 영향을 미치며 가장 중요한 것은 비즈니스의 "소득"이므로 사용자가 누락 또는 깜박임 (FOUT)의 문제를 겪을 수 있습니다.

그러나 좋은 소식은이 문제를 해결하는 것이 어렵지 않습니다. ``font-display : swap`을 사용하는 것과 같은 간단한 기술로 시작하면 많은 차이를 만들 수 있습니다. 그리고 최대 효율성이 필요한 경우 자체 호스팅 및 예압이 필요합니다. 중요한 글꼴은 웹 사이트를 업그레이드하여 경쟁 업체보다 두드러집니다.

할 시간입니다! 글꼴로 인해 아름다운 웹 사이트가 깨질 때까지 기다리지 마십시오. 10 분이 걸리십시오. Pagespeed Insights로 웹 사이트를 확인하고 오늘 편집을 시작하십시오. 오늘의 투자는 미래의 성장을위한 안정적인 기반을 구축하는 것입니다!

모든 차원에서 웹 사이트 효율성을 향상시키기 위해 사용자 경험 설계 (UX/UI)를 모두 이해하는 전문가가 필요한 경우 오늘 Vision X Brain Team을 참조하십시오! 우리는 귀하의 웹 사이트를 빠르게 돕고 놀라운 비즈니스 결과를 창출 할 준비가되었습니다.

삽화를위한 프롬프트 : 글꼴 아이콘을 보여주는 그래픽은 "웹 사이트의 잠재력 잠금을 해제하십시오!"라는 메시지와 함께 하늘로 솟아 오르는 로켓에 넣고 있습니다.

‍