사이트 성능: 성능 중심의 사이트 디자인하기
4 분
페이지 메뉴
- 요소 로딩 순서 최적화하기
- 성과가 좋은 스크롤 없이 볼 수 있는 부분 섹션 디자인하기
- 전용 페이지 사용하기
- 이미지 및 동영상 최적화하기
- 지연 로딩
- 추가 요소 관리하기
- 자주 묻는 질문
사이트의 성능은 방문자 경험에 큰 영향을 미치며 이탈률과 전반적인 참여도에 영향을 줍니다. 사이트 디자인을 최적화해 로딩 시간을 개선하고 원활한 탐색을 보장하며, 데스크톱 및 모바일 사용자 모두에게 더 나은 경험을 제공할 수 있습니다. 다음 디자인 도움말을 따라 전문적인 디자인을 유지하면서 방문자의 참여를 유도하는 성능이 우수한 사이트를 제작하세요.
요소 로딩 순서 최적화하기
사이트의 요소는 유형 및 크기에 따른 특정 순서로 로딩됩니다. 이 순서를 이해하면 먼저 표시되는 항목의 우선 순위를 지정하고 원활한 경험을 보장할 수 있습니다.
- 정적 요소: 여기에는 가장 빨리 로딩되는 텍스트 및 기본 모양이 포함됩니다. 빠른 가시성을 보장하기 위해 이를 스크롤 없이 볼 수 있는 부분 섹션에 추가하세요.
- 유동 요소: 이미지 및 동영상이 이 카테고리에 속합니다. 사이트에 활기를 더하지만 성능은 저하될 수 있습니다. 가능하면 스크롤해야 볼 수 있는 부분에 배치하세요.
- 인터랙티브 요소: iFrame, 애니메이션 및 타사 앱과 같은 요소가 마지막으로 로딩됩니다. 로딩 시간이 길어지지 않도록 전략적으로 조절해 사용하세요.
도움말:
홈페이지는 일반적으로 방문자가 접하는 첫 번째 페이지이므로 특히 주의를 기울이는 것이 좋습니다.
성과가 좋은 스크롤 없이 볼 수 있는 부분 섹션 디자인하기
스크롤 없이 볼 수 있는 부분 섹션은 사용자가 스크롤을 시작하기 전 표시되는 웹페이지 영역을 나타냅니다. 먼저 로딩되므로 가볍고 목적에 맞게 유지하는 것이 중요합니다.
추천 요소:
- 텍스트: 페이지의 목적을 명확하게 전달하는 간결하고 영향력 있는 텍스트를 사용합니다. 시스템 글꼴을 사용하고 글꼴 모음 및 두께를 과도하게 사용하지 않도록 하세요.
- 콜 투 액션(CTA): "쇼핑하기" 또는 "자세히 보기"와 같이 사용자 작업을 안내할 수 있는 명확한 버튼 또는 링크를 포함하세요. CTA 근처에 방해가 되는 요소를 배치하지 마세요.
최소화해야 할 요소:
- 큰 이미지 또는 동영상
- 애니메이션
- 고해상도 이미지 남용
도움말:
Google PageSpeed Insights 또는 Wix의 사이트 속도 대시보드와 같은 도구를 사용해 스크롤 없이 볼 수 있는 부분의 콘텐츠가 빠른 로딩에 최적화되도록 하세요.
전용 페이지 사용하기
요소가 너무 많은 페이지에 오버로딩하면 성능, 특히 홈페이지에 영향을 미칩니다. 대신, 특정 사이트 기능 또는 앱을 위한 전용 페이지를 추가하세요.
쇼핑몰, 블로그, 동영상 등의 기능 페이지를 추가하고 버튼 또는 메뉴 아이템을 통해 홈페이지에서 연결할 수 있습니다. 콘텐츠를 효과적으로 배포하고 불필요한 요소를 제한해 페이지 길이를 화면 8개 미만으로 유지합니다.
이미지 및 동영상 최적화하기
미디어 파일은 크기와 해상도로 인해 사이트 속도가 저하되는 경우가 많습니다. 효과적으로 관리하는 방법은 다음과 같습니다.
이미지:
- WebP 또는 JPEG와 같은 가벼운 형식을 사용합니다.
- Wix에 업로드하기 전 작은 PNG와 같은 도구를 사용해 파일을 압축하세요.
- 기본 제공 최적화를 위해 Wix 프로 갤러리에 이미지를 소개하세요.
동영상:
- Wix 동영상, YouTube, Vimeo에 동영상을 호스팅해 성능을 최적화하세요.
- 더 빠른 초기 페이지 로딩을 위해 스크롤 없이 볼 수 있는 부분에 동영상을 배치하지 마세요.
지연 로딩
지연 로딩은 이미지 및 동영상이 사용자의 뷰포트에 표시될 때까지 로딩을 지연해 초기 페이지 로딩 시간을 개선합니다. 이 기능은 Wix에서 자동으로 활성화되지만, 이미지 및 동영상이 갤러리 또는 스트립과 같이 지원되는 위젯 내에 배치되고 더 빠른 가시성을 위해 스크롤 없이 볼 수 있는 부분의 콘텐츠를 최소화할 때 가장 잘 작동합니다.
추가 요소 관리하기
다른 디자인 결정도 사이트의 속도와 성능에 영향을 줄 수 있습니다.
- 버튼: 사이트의 다른 곳으로 관련 콘텐츠로 연결되는 명확하고 간결한 버튼을 추가합니다. 예를 들어, "카탈로그 둘러보기" 또는 "더 많은 프로젝트 보기" 등을 사용할 수 있습니다.
- 사용자 지정 코드: 사용자 지정 코드가 최적화되어 있는지 확인하고 "defer" 또는 "async"와 같은 속성을 사용해 랙을 줄입니다.
- 페이지 번호 또는 더보기 버튼: 특히 제품이 많은 사이트의 경우, 단일 페이지에 모든 제품을 한 번에 표시하지 마세요. 로딩을 효율적으로 유지하려면 페이지 매김 또는 주문형 로딩 기능을 구현하세요.
도움말:
- 정기적인 테스트: Google PageSpeed Insights 및 Wix 사이트 속도 대시보드를 사용해 성능을 모니터링하고 개선합니다.
- 스크롤 없이 볼 수 있는 부분 콘텐츠 우선 순위 지정: 간단한 정적 요소를 추가해 주요 콘텐츠가 빠르게 로딩될 수 있도록 합니다.
- 타사 앱 최소화: 불필요한 속도 저하를 방지하기 위해 필수 앱 또는 위젯만 사용합니다.
자주 묻는 질문
아래 질문을 클릭해 자세한 내용을 확인하세요.
Wix 사이트 로딩 속도가 느린 이유는 무엇이며, 속도를 개선하려면 어떻게 해야 하나요?
모바일 사이트가 데스크톱 사이트보다 느린 이유는 무엇인가요?
최대 콘텐츠 페인트(LSP) 점수를 개선하려면 어떻게 해야 하나요?
쇼핑몰의 성능을 저하시키지 않고 많은 제품을 표시하는 가장 좋은 방법은 무엇인가요?