성능 및 Core Web Vitals

4 min read

TTSWP는 성능에 영향을 주지 않으면서 페이지에 오디오를 추가합니다. 플레이어는 지연 로딩되고, 애셋은 최적화되어 있으며, 꼭 필요한 경우가 아니면 페이지 로드 시 실행되는 요소가 없습니다. Core Web Vitals를 안전하게 유지하는 방법을 설명합니다.

Core Web Vitals 영향

LCP (Largest Contentful Paint)

영향: 없음

오디오 플레이어는 지연 로딩됩니다. 방문자가 플레이어 근처로 스크롤할 때까지 렌더링되거나 JavaScript가 로드되지 않습니다. 화면 상단 주요 콘텐츠의 렌더링 시간을 측정하는 LCP에는 영향이 없습니다.

테스트: Lighthouse 감사를 적용 전후로 실행하세요. LCP 점수는 정상 범위 내에서 유지됩니다.

CLS (Cumulative Layout Shift)

영향: 없음

플레이어 플레이스홀더는 완전히 로드된 플레이어와 정확히 동일한 크기를 가집니다. 지연 로드가 플레이스홀더를 전체 플레이어로 업그레이드할 때 레이아웃 이동이 발생하지 않습니다.

INP (Interaction to Next Paint)

영향: 미미함

플레이어의 JavaScript는 단일 소형 파일(약 15KB gzip 압축)로 실행됩니다. 클릭 핸들러는 디바운스 처리되며, 지원되는 경우 requestIdleCallback에서 실행됩니다. 일반적인 INP 기여도는 상호작용당 5ms 미만입니다.

FID (First Input Delay, 2024년 INP로 대체)

영향: 없음

플레이어가 지연 로드되므로 초기 페이지 로드 시 메인 스레드를 차단하는 요소가 없습니다.

애셋 크기

플레이어가 사용 중일 때 페이지당 로드 비용:

애셋 크기 (gzip 압축) 로드 시점
공개 플레이어 CSS 3 KB 플레이어 표시 시
공개 플레이어 JS 15 KB 플레이어 표시 시
파형 헬퍼 (PRO) 4 KB 파형 활성화 시
고정 푸터 JS (PRO) 2 KB 고정 기능 활성화 시
관리자 바 메뉴 아이콘 0.5 KB 관리자 사용자에게만

방문자의 첫 로드 영향: 플레이어로 스크롤하기 전까지 0바이트.

캐시 플러그인 호환성

TTSWP는 모든 주요 캐시 플러그인(WP Rocket, LiteSpeed, W3 Total Cache, WP Super Cache, Cache Enabler)과 함께 작동합니다. 플러그인은 올바른 캐싱 동작을 위해 애셋을 자동으로 등록합니다.

오디오 파일(MP3)은 별도의 캐시 헤더를 가지며 스토리지에서 필요 시 로드됩니다. 페이지 캐시를 막지 않습니다.

캐싱 플러그인을 참조하세요.

CDN 제공

유료 플랜에서는 오디오 파일이 Amazon CloudFront를 통해 제공됩니다. 이는 다음을 의미합니다.

  • 서버에서 멀리 떨어진 방문자도 재생 버튼을 클릭하면 밀리초 내에 오디오가 재생됨
  • WordPress 서버 대역폭이 HTML 전용으로 유지됨

무료 플랜에서는 오디오가 WordPress 서버에서 제공됩니다. 대부분의 블로그에서는 문제없습니다. 트래픽이 많은 사이트는 오디오가 많은 페이지에서 대역폭 사용량이 증가할 수 있습니다.

데이터베이스 영향

TTSWP는 소수의 데이터베이스 테이블과 행을 추가합니다.

  • 오디오 캐시 테이블 (생성된 파일당 한 행)
  • 통계 테이블 (재생 이벤트당 한 행 - 소형 정수 데이터)
  • 설정 행 (수십 개의 옵션)

데이터베이스 크기는 오디오가 있는 게시물 수에 비례하여 증가합니다. 게시물 500개 기준 총 데이터베이스 공간은 일반적으로 200KB 미만입니다.

메모리 및 CPU

  • 관리자 페이지 로드당 PHP 메모리 오버헤드: 약 2MB
  • 플레이어가 있는 공개 페이지당 PHP 메모리 오버헤드: 미미함 (CSS + JS만 사용, 핫 경로에서 PHP 처리 없음)
  • 백그라운드 프로세스: 없음 (모든 요청에서 실행되는 크론 작업 없음)

사이트 테스트

다음 도구를 사용하여 TTSWP가 성능에 영향을 주지 않는지 확인하세요.

TTSWP를 활성화한 상태와 일시적으로 비활성화한 상태에서 각각 실행하세요. 수치를 비교하세요.

성능 저하가 발생하는 경우

알려주세요. 성능 저하는 버그로 처리합니다.

  1. 느린 페이지를 확인하세요
  2. PageSpeed Insights를 실행하고 URL을 공유하세요
  3. PRO 지원에 문의하거나 WordPress.org 포럼에 게시하세요

문제 진단 및 해결을 도와드리겠습니다.

관련 페이지