WordPress에서 TTI(대화 시간)를 줄이는 방법은 무엇입니까?

실제로 대화형 작업을 수행할 수 있기 전까지는 영원할 것 같은 웹사이트를 방문한 적이 있습니까?

실망스럽죠?

글쎄, 사이트의 TTI(Time to Interactive)를 수정해야 할 수도 있습니다.

TTI는 사용자가 페이지에 효과적으로 참여하고, 버튼을 클릭하고, 양식을 작성하거나, 지연 없이 스크롤할 수 있을 때까지의 기간을 나타냅니다. TTI가 길어지면 사용자 경험과 SEO 순위에 부정적인 영향을 미칩니다.

이 블로그에서는 TTI(Time to Interactive)를 측정하는 방법과 WordPress 사이트 로드 속도를 높이기 위해 TTI를 줄이는 전략을 살펴보겠습니다.

시작하자…

TTI(대화 시간) 이해

TTI는 웹페이지가 완전히 상호작용하게 되는 기간을 나타냅니다. 즉, 사용자가 상당한 지연 없이 해당 요소에 적극적으로 참여할 수 있음을 의미합니다.

TTI는 서버 응답 시간, 스크립트 실행, 시각적 요소 렌더링, 사용자 장치 기능 등 다양한 요소를 포함합니다. 따라서 TTI는 단순한 로딩 시간을 넘어 웹페이지 성능에 대한 포괄적인 통찰력을 제공합니다.

TTI를 최적화하려면 웹마스터는 성능 병목 현상을 해결하고, 코드를 최적화하고, 중요한 작업의 우선순위를 지정하고, 웹 최적화 기술의 모범 사례를 구현하는 데 집중해야 합니다.

대화형 시간과 첫 번째 입력 지연의 차이점은 무엇입니까?

TTI(대화 시간)를 측정하는 방법

TTI 점수는 HTTP 아카이브의 데이터를 사용하여 페이지의 TTI(Time to Interactive)를 실제 웹사이트의 TTI와 비교하는 방법을 평가합니다.

TTI(대화 시간)를 모니터링하는 방법은 무엇입니까?

TTI를 정확하게 측정하려면 다양한 요소를 고려해야 합니다. 여기에는 네트워크 대기 시간, 서버 응답 시간, 브라우저 렌더링 기능 및 웹페이지 콘텐츠의 복잡성이 포함됩니다.

모니터링 도구

• 등대
• 웹페이지테스트
• GTmetrix
• Google PageSpeed ​​​​인사이트

TTI(Time to Interactive)는 Lighthouse 보고서의 성능 섹션에서 모니터링되는 6가지 지표 중 하나입니다.

참고: TTI는 Lighthouse 10에서 지표로 제거되었습니다. LCP(Largest Contentful Paint), TBT(Total Blocking Time) 및 INP(Interaction to Next Paint)와 같은 최신 대체 지표는 일반적으로 TTI 대신 사용하기에 더 좋은 지표입니다.

Lighthouse 보고서의 기회 섹션을 사용하여 페이지에 가장 높은 가치를 약속하는 개선 사항을 찾아보세요.

상호 작용 시간이 성능에 미치는 영향은 무엇입니까?

느린 TTI는 사용자를 좌절시켜 이탈률이 높아지고 참여 수준이 낮아질 수 있습니다. 웹사이트가 이러한 기대를 충족시키지 못하면 사용자는 더 원활하고 효율적인 경험을 제공하는 경쟁업체를 선택하기 위해 해당 웹사이트를 포기할 가능성이 높습니다.

TTI는 검색 엔진 최적화(SEO) 노력에도 영향을 미칩니다. Google과 같은 주요 검색 엔진은 웹사이트 순위를 매길 때 사용자 경험을 우선시합니다. TTI는 사용자 경험의 주요 지표이므로 웹사이트의 검색 엔진 순위에 간접적으로 영향을 미칩니다.

TTI가 더 빠른 웹사이트는 검색 결과에서 더 높은 순위를 차지할 가능성이 높으며, 유기적인 트래픽을 유도하고 가시성을 향상시킵니다.

개발자는 리소스를 신중하게 관리하고 중요한 작업의 우선순위를 지정하여 TTI를 줄이고 전반적인 성능을 향상시켜야 합니다.

이미지 출처: 온리

WordPress에서 TTI(Interactive Time to Interactive)가 느려지는 이유는 무엇입니까?

WordPress 웹사이트의 TTI(Time to Interactive)를 지연시켜 사용자 경험을 방해하고 잠재적으로 성능 지표에 영향을 줄 수 있는 몇 가지 요인이 있습니다.

그 중 일부를 살펴보겠습니다.

1. 호스팅 제공업체

여러 웹사이트가 동일한 서버 리소스를 공유하는 공유 호스팅 계획은 리소스 제약과 서버 로드 증가로 인해 TTI가 느려지는 경우가 많습니다.

전용 또는 관리형 WordPress 호스팅 솔루션을 제공하는 호스팅 제공업체를 선택하는 것이 중요합니다.

Cloudways 관리형 호스팅 서비스를 활용함으로써 웹사이트 소유자는 TTI 문제를 완화하고 사용자에게 원활한 검색 경험을 제공할 수 있습니다.

2. 플러그인 및 테마

WordPress 플러그인은 유용한 기능을 제공하지만, 컬렉션이 과도하거나 제대로 최적화되지 않으면 웹사이트 속도가 저하되고 TTI(Time to Interactive)가 늘어날 수 있습니다.

Cloudways Breeze 플러그인은 WordPress 사이트 성능을 간소화하기 위한 실행 가능한 솔루션입니다. 이 플러그인은 사이트 속도와 성능을 향상시키도록 특별히 설계된 최적화 기능을 제공하여 플러그인 및 테마 비효율성으로 인한 TTI 지연 부담을 완화하는 데 도움이 됩니다.

또한 모든 WordPress 테마가 기본적으로 성능에 최적화되어 있는 것은 아닙니다. 일부 테마는 성능 최적화보다 시각적 미학을 우선시하여 코드가 비대해지고 리소스 활용도가 비효율적이며 로딩 시간이 느려질 수 있습니다.

3. 데이터베이스 최적화

WordPress에서 TTI에 영향을 미치는 또 다른 요소는 데이터베이스 최적화입니다. WordPress 웹사이트는 콘텐츠, 설정 및 사용자 데이터를 저장하기 위해 데이터베이스에 크게 의존합니다.

불필요한 복잡함, 최적화되지 않은 쿼리 또는 조각난 테이블이 포함되어 제대로 최적화되지 않은 데이터베이스는 서버 응답 시간을 늘려 TTI를 느리게 할 수 있습니다.

사용하지 않는 데이터 정리, 쿼리 최적화, 캐싱 메커니즘 구현과 같은 정기적인 데이터베이스 유지 관리는 데이터베이스 작업을 간소화하고 서버 부하를 줄여 TTI를 개선하는 데 도움이 될 수 있습니다.

4. 타사 통합

타사 통합, 외부 스크립트 및 네트워크 대기 시간과 같은 외부 요인도 WordPress의 TTI에 영향을 미칠 수 있습니다.

소셜 미디어 위젯, 분석 스크립트 또는 광고 플랫폼과 같은 외부 서비스를 통합하면 추가 종속성이 발생하고 웹 사이트 콘텐츠를 로드하고 렌더링하는 데 걸리는 시간이 늘어날 수 있습니다.

더욱이, 특히 먼 곳에서 웹 사이트에 액세스하거나 느린 인터넷 연결을 사용하는 방문자의 네트워크 대기 시간은 서버에서 웹 사이트 자산 검색을 지연시켜 TTI를 연장할 수 있습니다.

대화 시간(TTI)을 줄이는 방법

TTI를 개선하려면 웹 성능 최적화에 대한 전체적인 접근 방식이 필요합니다. 다음은 TTI 개선에 도움이 될 수 있는 몇 가지 모범 사례입니다.

1. 콘텐츠가 풍부한 페인트 최적화

FCP(Contentful Paint) 최적화는 사용자 상호 작용의 최적화된 기준을 설정하여 TTI(Time to Interactive)를 개선할 수 있습니다. TTI는 사용자가 페이지와 상호 작용할 수 있는 데 중점을 두는 반면, FCP는 콘텐츠의 첫 번째 비트가 렌더링되는 시점을 살펴봅니다. FCP 최적화가 TTI에 어떤 영향을 미칠 수 있는지는 다음과 같습니다.

• 렌더링 차단 리소스 줄이기 : 대용량 JavaScript 파일과 같은 리소스는 브라우저의 콘텐츠 렌더링을 차단할 수 있습니다.코드 분할, 비동기 또는 연기 속성과 같은 기술은 콘텐츠 렌더링 우선 순위를 지정하는 데 도움이 될 수 있습니다.
• 중요 자산의 우선순위 지정: 스크롤 없이 볼 수 있는 콘텐츠 및 중요한 JavaScript 파일과 같은 주요 리소스를 미리 로드합니다.이렇게 하면 필요할 때 쉽게 사용할 수 있어 렌더링 및 상호 작용의 지연이 최소화됩니다.
• 더 빠른 로드 시간을 위한 최적화: 콘텐츠 로딩 속도를 높이는 모든 것(FCP 포함)은 일반적으로 더 빠른 TTI에 기여합니다.여기에는 이미지 크기 최적화, HTTP 요청 감소 또는 브라우저 캐싱 구현이 포함될 수 있습니다.

3. 사전 로드 키 요청

주요 요청을 미리 로드하는 것은 웹 애플리케이션에서 TTI(Time to Interactive)를 향상시키는 또 다른 효과적인 전략입니다. 브라우저는 HTML 문서를 구문 분석할 때 페이지를 렌더링하는 데 필요한 스크립트, 스타일시트, 글꼴과 같은 외부 리소스를 식별합니다.

일반적으로 이러한 리소스는 브라우저가 HTML에서 리소스를 발견할 때 순차적으로 가져오므로 지연이 발생하고 TTI를 방해할 수 있습니다.

 <!DOCTYPE HTML>
<html lang="ko">
<머리>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>사전 로드 예시</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="preload" href="중요-script.js" as="script">
</head>
<본문>
  <!-- 웹 애플리케이션 콘텐츠가 여기에 표시됩니다 -->
  <script src="app.js"></script>
</body>
</html>

이 예에서 rel= " preload” 속성이 있는 <link> 태그는 브라우저에 중요한-script.js 파일을 우선순위가 높은 리소스로 가져오도록 지시합니다.

3. 총 차단 시간 최소화

TBT를 최소화하면 FCP(First Contentful Paint) 및 LCP(Largest Contentful Paint)와 같은 다른 성능 측정항목도 향상되어 웹 성능과 유용성을 전체적으로 향상시키는 데 기여할 수 있습니다.

Breeze Cloudways의 최적화 플러그인을 사용하면 사이트의 CSS 및 JavaScript 파일을 간소화하여 로드 시간을 줄이고 전반적인 성능을 쉽게 향상시킬 수 있습니다.

4. 입력 지연 감소

느린 TTI의 주요 원인은 입력 지연, 즉 사용자가 작업(예: 버튼 클릭)을 시작하는 것과 브라우저가 이를 승인하는 것 사이의 지연입니다.

입력 지연을 줄이려면 다음을 수행할 수 있습니다.

JavaScript 실행 시간 단축:

• 축소 및 압축: 불필요한 문자와 공백을 제거하여 JavaScript 파일의 크기를 줄입니다.이를 통해 다운로드 속도를 높이고 메인 스레드가 차지하는 시간을 최소화할 수 있습니다.
• JavaScript 코드 최적화: 코드의 비효율성을 검토하세요.중요한 렌더링 섹션에서는 복잡한 알고리즘이나 과도한 DOM 조작을 피하세요. async/await와 같은 비동기 프로그래밍 기술이나 응답성 향상 약속을 살펴보세요.

• 지연 로딩: 사용자가 필요할 때까지 중요하지 않은 JavaScript 코드 로딩을 ​​지연합니다.이렇게 하면 사용자 상호 작용을 렌더링하고 처리하기 위한 기본 스레드가 확보됩니다.

5. JavaScript 실행 최적화

비효율적인 JavaScript 실행으로 인해 처리 시간이 늘어나 렌더링 및 사용자 상호 작용에 대한 응답이 지연될 수 있습니다.

JavaScript 실행을 최적화함으로써 개발자는 스크립트 로드 및 처리를 간소화하여 브라우저가 JavaScript 코드를 구문 분석하고 실행하는 데 걸리는 시간을 줄일 수 있습니다.

JavaScript 실행 최적화에는 파일 크기를 줄이고, 불필요한 코드 실행을 제거하고, 필요할 때까지 중요하지 않은 스크립트를 연기하는 것을 목표로 하는 코드 축소, 번들링, 지연 로딩과 같은 기술이 포함됩니다.

6. 메인 스레드 작업 최소화

메인 스레드는 HTML 및 CSS 구문 분석, JavaScript 실행, 화면에 콘텐츠 그리기 등의 작업을 처리합니다. 과부하가 발생하면 사용자 상호 작용이 크게 지연될 수 있습니다.

메인 스레드 작업을 최소화하려면 다음을 수행할 수 있습니다.

주요 렌더링 경로 최적화:

• 메인 스레드 작업 최소화: 메인 스레드는 웹 페이지를 렌더링합니다.FCP 중요 요소(예: 스크롤 없이 볼 수 있는 콘텐츠)에 대해 수행해야 하는 작업을 줄임으로써 사용자 상호 작용에 더 빨리 공간을 확보할 수 있습니다. 여기에는 리소스를 최소화하거나 중요하지 않은 스크립트를 연기하는 등의 기술이 포함될 수 있습니다.
• 코드 분할: 큰 JavaScript 파일을 더 작은 덩어리로 나눕니다.페이지를 더 빠르게 대화형으로 만들려면 처음에는 필수 코드만 로드하세요. 나머지 코드는 백그라운드에서 로드될 수 있습니다. 이렇게 하면 메인 스레드의 사전 처리 부담이 줄어듭니다.
• 웹 작업자 작업 : 웹 작업자는 장기 실행 또는 계산 비용이 많이 드는 JavaScript 작업을 처리할 수 있는 별도의 스레드입니다.이렇게 하면 사용자 상호 작용 처리와 같은 중요한 작업을 위한 메인 스레드가 확보됩니다.

7. 타사 코드의 영향 줄이기

타사 코드의 영향을 줄이는 것은 웹사이트나 웹 애플리케이션에서 TTI(Time to Interactive)를 개선하는 데 중요합니다. 분석 추적기, 소셜 미디어 위젯 또는 광고 스크립트와 같은 타사 스크립트는 페이지 로드를 크게 지연시키고 사용자 상호 작용을 방해할 수 있습니다.

타사 코드의 영향을 완화하는 효과적인 전략 중 하나는 비동기 로딩입니다. 타사 스크립트를 비동기적으로 로드하면 브라우저는 외부 리소스가 완전히 로드될 때까지 기다리지 않고도 페이지의 기본 콘텐츠를 계속 구문 분석하고 렌더링할 수 있습니다.

 <script async src="https://example.com/third-party-script.js"></script>

8. 필수적이지 않은 타사 스크립트 연기

또 다른 접근 방식은 중요 렌더링 경로가 완료될 때까지 필수적이지 않은 타사 스크립트의 로드를 연기하는 것입니다. 이를 통해 필수 콘텐츠에 우선순위를 부여하여 TTI가 더 빨라집니다. 스크립트 태그의 'defer' 속성을 사용하면 스크립트 실행을 지연하여 초기 렌더링을 지연시키지 않고 백그라운드에서 로드할 수 있습니다.

타사 스크립트 로드를 연기하는 방법은 다음과 같습니다.

 <script defer src="https://example.com/third-party-script.js"></script>

9. 누적 레이아웃 변경 감소

CLS(누적 레이아웃 전환)를 줄이면 웹 사이트 또는 웹 애플리케이션의 TTI(대화 시간)를 개선하는 데 크게 기여할 수 있습니다. CLS는 웹 페이지가 로드될 때 요소가 예기치 않게 이동하는 것을 의미하며, 종종 이미지, 글꼴 또는 비동기 콘텐츠의 로드 지연으로 인해 발생합니다.

CLS를 줄이는 한 가지 방법은 리소스 로딩을 최적화하는 것입니다. 이미지 및 기타 자산에 미리 정의된 크기가 있는지 확인하면 브라우저가 렌더링 중에 공간을 할당하여 갑작스러운 레이아웃 변경을 방지하는 데 도움이 됩니다.

10. 필수 원본에 사전 연결

필요한 오리진에 미리 연결하는 것은 웹 애플리케이션의 TTI(Time to Interactive)를 개선하는 데 중요한 역할을 하는 강력한 최적화 기술입니다.

사전 연결이 없으면 애플리케이션이 API에서 데이터를 가져와야 할 때마다 브라우저가 새로운 연결을 설정해야 하므로 대기 시간이 늘어나고 TTI가 느려집니다.

HTML 코드를 사용하여 사전 연결을 구현하는 방법은 다음과 같습니다.

 <!DOCTYPE HTML>
<html lang="ko">
<머리>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>사전 연결 예시</title>
  <link rel="preconnect" href="https://api.example.com">
</head>
<본문>
  <!-- 웹 애플리케이션 콘텐츠가 여기에 표시됩니다 -->
</body>
</html>

Cloudways가 WordPress에서 TTI(대화 시간)를 어떻게 단축할 수 있습니까?

Cloudways가 WordPress 웹 사이트의 TTI(Time to Interactive)를 줄이는 데 어떻게 도움이 되는지 보여주기 위해 Cloudways에 데모 웹 사이트를 만들었습니다.

• TTI(Time to Interactive)를 측정하기 위해 Google PageSpeed ​​Insights를 사용하여 초기 속도 테스트를 수행했습니다. 결과는 아래와 같습니다.

• 다음으로 Cloudways 대시보드에 로그인하여 서버 관리 섹션으로 이동했습니다.
• 그런 다음 캐싱 메커니즘을 최적화하고 데이터베이스 성능을 향상시키는 Varnish, Memcached 및 Redis와 같은 서비스를 활성화했습니다.

• 그 후, 데모 사이트에 Bot Protection 및 Breeze와 같은 플러그인을 설치했는데, 이는 서버 부하를 줄이고 응답 시간을 향상시켰습니다.

• 최적화 후에는 TTI, FCP, CLS 및 전체 PageSpeed ​​점수가 향상되어 사용자 경험과 검색 엔진 친화성이 향상되었음을 알 수 있습니다.

결론

TTI는 다양한 유형의 웹 애플리케이션과 사용자 환경에 따라 크게 달라질 수 있습니다. 예를 들어 간단한 블로그는 콘텐츠 복잡성과 대화형 요소의 차이로 인해 기능이 풍부한 전자상거래 플랫폼보다 낮은 TTI를 달성할 수 있습니다.

TTI와 그 기본 요소를 이해함으로써 개발자는 개선 기회를 식별하고 로딩 프로세스를 간소화하며 광범위한 웹 애플리케이션 및 환경에서 원활한 사용자 경험을 제공할 수 있습니다.

Core Web Vitals 점수를 향상시킬 수 있는 간단한 방법을 찾고 있다면 Cloudways로 마이그레이션해 보는 것은 어떨까요? 최적화된 기술 스택과 Cloudflare Enterprise와 같은 프리미엄 추가 기능을 사용하면 그 어느 때보다 쉽게 ​​뛰어난 성능을 달성할 수 있습니다.