사이트 성능: 텍스트 최적화하기
3 분
페이지 메뉴
- 다양한 글꼴 유형
- 글꼴 수
- 글꼴 서식 및 애니메이션 효과
- 텍스트 이미지
- Studio 에디터의 대체 글꼴
사이트의 텍스트를 최적화해 방문자 경험을 향상시키세요. 글꼴 유형, 효과 및 서식은 사이트 성능에 영향을 줄 수 있으므로 기능을 손상시키지 않고 중요한 정보를 표시할 수 있도록 지침을 따르는 것이 좋습니다.
도움말:
스크롤 없이 볼 수 있는 부분에 중요한 텍스트가 있으면 사이트의 나머지 부분이 로딩되는 동안 방문자가 콘텐츠를 확인할 수 있습니다.
다양한 글꼴 유형
사이트에서 사용할 수 있는 몇 가지 글꼴 유형이 있습니다. 유형 및 다운로드 요구 사항에 따라 사이트의 로딩 속도와 성능에 미치는 영향이 달라집니다. 세 가지 글꼴 유형은 다음과 같습니다.
- 시스템 글꼴: 기기 시스템에 이미 존재할 가능성이 가장 큰 일반적인 글꼴입니다. 대부분의 시스템에 포함되어 있어 방문자의 기기에 표시하기 위해 다운로드할 필요가 없으므로 사이트 성능에 영향을 주지 않습니다.
- 사용자 지정 글꼴: 사용자 지정 글꼴은 업로드해 Wix 사이트에서 사용할 수 있는 외부 글꼴입니다. 이러한 글꼴은 개성을 더해 사이트 경험을 풍부하게 하는 방법이지만 방문자의 브라우저에 표시하려면 서버에서 다운로드해야 합니다. 따라서, 이러한 글꼴은 사이트 성능에 영향을 줄 수 있습니다.
- Wix에서 사용 가능한 글꼴: Wix로 사이트를 제작하고 편집할 때 다양한 텍스트 글꼴이 제공됩니다. 일부는 시스템 글꼴이고 일부는 사용자 지정 글꼴로 작동하며 그에 따라 사이트의 로딩 속도에 영향을 미칩니다.
요약하자면 다음과 같습니다.
- 시스템 글꼴은 시스템에 이미 존재하므로 궁극적으로 사용자 지정 글꼴보다 더 빨리 로딩됩니다. 따라서 사이트가 로딩되는 데 필요한 요청 수를 줄여 대역폭을 절감할 수 있습니다.
- 시스템 글꼴은 사이트 속도에 미치는 영향이 적으므로 가능하면 사용자 지정 글꼴 대신 사용하는 것이 좋습니다.
글꼴 수
사이트에서 글꼴을 사용할 때 여러 글꼴과 글꼴 유형을 사용하면 로딩 시간과 전체 성능에 영향을 줄 수 있다는 점을 염두에 두는 것이 중요합니다.
시스템 글꼴은 다운로드가 필요하지 않지만 사용자 지정 글꼴은 페이지에 표시하려면 글꼴을 서버에서 다운로드해야 합니다. 사용자 지정 글꼴마다 다운로드 속도가 다를 수 있으며, 이는 사이트의 로딩 시간에 더욱 영향을 줄 수 있습니다.
사이트를 원활하게 운영하는 데 도움이 되도록 페이지의 글꼴 수(시스템 및 사용자 지정 모두)를 3개 이하로 유지하는 것이 좋습니다. 글꼴 및 색상을 일관되게 유지하면 브랜드를 강화하고 사이트를 일관적으로 디자인하는 데 도움이 됩니다.
글꼴 서식 및 애니메이션 효과
굵게, 밑줄 또는 기울임꼴과 같은 다양한 글꼴 굵기도 사이트의 로딩 시간에 영향을 줄 수 있습니다. 특정 목적(예: 페이지의 텍스트 영역 강조 표시)을 위해 페이지의 글꼴 굵기를 3개 이하로 사용하세요.
또한, 애니메이션 텍스트는 텍스트의 가독성과 SEO에 영향을 줄 수 있습니다. 애니메이션 텍스트는 검색 엔진에서 읽을 수 없기 때문입니다. 사이트의 중요한 콘텐츠에는 일반 텍스트를 사용하고 스크롤 없이 볼 수 있는 부분에 애니메이션을 과도하게 사용하지 않는 것이 좋습니다.
텍스트 이미지
가능하면 텍스트가 포함된 이미지는 사용하지 않는 것이 좋습니다. 이미지가 로딩되는 동안 이미지 텍스트가 흐릿하게 나타날 수 있으며 검색 엔진에서 번역하거나 크롤링할 수 없습니다. 사이트 성능과 SEO 순위를 유지하기 위해 가능한 경우 사이트 전체에서 표준 텍스트를 사용하세요.
도움말:
대신, 이미지에 대체 텍스트를 추가하는 것이 좋습니다. 이렇게 하면 검색 엔진과 스크린 리더가 이미지 설명을 "읽을" 수 있습니다.
Studio 에디터의 대체 글꼴
참고:
이 기능은 Studio 에디터에서만 사용할 수 있습니다.
Studio 에디터 사이트에서 무거운 사용자 지정 글꼴을 사용하는 경우, 대체 글꼴을 활성화할 수 있습니다 대체 글꼴은 더 빨리 로딩되며 사용자 지정 글꼴이 백그라운드에서 다운로드되는 동안 라이브 사이트에 일시적으로 표시됩니다.
대체 글꼴은 사이트의 LCP(콘텐츠가 포함된 최대 페인트)를 줄여 페이지 성능을 최적화할 수 있으며, 이로 인해 핵심 성능 보고서 및 Google 검색 순위가 향상될 수 있습니다. 또한, 텍스트 콘텐츠를 더 빠르게 표시하면 방문자가 사이트를 탐색하는 동안 경험을 향상시킬 수 있습니다. 대체 글꼴 활성화에 대한 자세한 도움말을 확인하세요.
참고:
- 스크롤 없이 볼 수 있는 부분의 가장 큰 요소가 텍스트 요소인 경우, 대체 글꼴을 사용하면 로딩 시간이 향상됩니다.
- 대체 글꼴을 활성화하면 글꼴 표시 CSS 설명자에 "swap" 값이 추가됩니다. 이 설명자는 글꼴이 다운로드되어 사용할 준비가 된 시기를 기반으로 글꼴이 표시되는 방법을 결정합니다.