속도 지수: 정의 및 웹사이트 최적화 방법

속도 지수(SI)는 페이지 속도를 고려할 때 흥미로운 지표입니다. 이는 페이지의 성능을 절대적으로 나타내지만 First Contentful Paint 및 Largest Contentful Paint와 같은 다른 사용자 중심 측정항목과는 완전히 다릅니다. SI는 사이트가 스크롤 없이 볼 수 있는 부분에 얼마나 빨리 로드되는지 나타냅니다. 또는 다른 방식으로 말하면 사용자의 뷰포트 내의 모든 콘텐츠가 완전히 표시될 때입니다. 페이지의 로드 시간을 볼 때 속도 지수에 대해 불이익을 받거나 보상을 받지는 않을 것입니다. 그렇다고 무시할 이유가 없습니다. 단일 메트릭으로서 이는 여러 다른 메트릭을 포괄하는 몇 안 되는 것 중 하나이며 사이트의 전체 속도, 효율성 및 성능에 대한 확실한 아이디어를 제공할 수 있습니다.

YouTube 채널 구독

속도 지수란?

PageSpeed ​​Insights의 Google 중추인 Lighthouse는 여러 성능 측정항목을 검토하여 사이트를 평가합니다. 속도 지수(SI)는 그 중 하나이며 보고서는 다른 메트릭과 같이 밀리초가 아닌 초 단위로 시간을 표시합니다. Google은 SI를 "페이지 콘텐츠가 시각적으로 채워지는 속도"로 정의합니다.

꽤 간단하죠?

속도 지수는 백엔드 스크립트 또는 기타 페인트되지 않은 로드를 고려하지 않습니다. 그러나 그들은 그것에 영향을 미칩니다. SI는 단순히 사용자가 콘텐츠를 완전히 보는 데 걸리는 시간을 측정한 것입니다. 키커입니다. 전체 . LCP와 같은 다른 메트릭은 콘텐츠의 가장 큰 부분이 표시될 때 측정되지만 속도 지수는 실제로 표시되어야 하는 모든 콘텐츠를 설명합니다.

이것은 전체 페이지 속도를 측정한 것이 아닙니다. 이는 브라우저가 모든 요소를 ​​렌더링할 때를 고려합니다. 성능에 영향을 미치는 보이지 않는 스크립트 및 요소를 포함합니다. 그러나 사용자가 페이지가 완전히 로드되었다고 인식하는 시점을 정확하게 측정하려면 SI가 주목해야 할 측정항목입니다. 사용자 중심적이기 때문에 SI는 사이트의 사용자 경험(UX)에 대한 기준일 뿐만 아니라 전반적인 사이트 상태를 나타내는 좋은 지표가 될 수 있습니다.

속도 지수 측정 방법

대부분의 사이트 성능 측정항목과 마찬가지로 가장 많이 사용하는 도구 중 하나는 Google의 자체 PageSpeed ​​Insights입니다. 이 도구는 반환되는 결과에서도 가장 특별한 도구 중 하나입니다. 가장 잘 구성된 사이트조차도 상대적으로 중요합니다. PageSpeed ​​Insights는 지난 28일 동안 수집한 데이터 를 기반으로 사이트에 대한 실험실 데이터 를 제공하는 경우가 가장 많습니다. 그러나 Chrome을 통해 정보를 다시 Google에 전달하는 방문자가 충분하다면 보고서에서 실제 필드 데이터도 얻을 수 있습니다. 그러나 모든 사이트에서 이것을 얻을 수 있는 것은 아닙니다.

보시다시피, 이러한 메트릭 중 많은 부분의 속도는 녹색입니다. 이것은 그들이 "좋다"는 것을 나타냅니다. 이것은 분명히 당신이 당신의 사이트를 원하는 곳입니다. 단, 속도 지수는 4.0초, 주황색입니다. 이는 사용자가 스크롤 없이 볼 수 있는 부분을 모두 보기 위해 기다리는 데 오랜 시간이 걸립니다.

좋은 속도 지수 점수란 무엇입니까?

PageSpeed ​​Insights는 다음 점수를 사용하여 사이트의 속도 지수 순위를 매기고 그에 따라 색상 코드를 지정합니다.

• 녹색(양호) – 0~3.4초
• 주황색(보통) – 3.4~5.8초
• 빨간색(느림) – 5.8초 이상

이전에 말했듯이 PageSpeed ​​Insights는 측정에서 매우 중요합니다. 주황색이나 빨간색에 있는 경우 GTmetrix 또는 Pingdom의 속도 테스트와 같은 도구를 사용하여 실시간 데이터가 표시하는 내용을 확인할 수 있습니다. 전반적인 성능에 대한 최상의 그림을 얻으려면 서로 다른 시간에 여러 도구를 사용하여 사이트를 테스트하는 것이 가장 좋습니다.

속도 지수 점수를 최적화하는 방법

속도 지수 점수를 최적화하기 위해 여러 단계를 수행할 수 있습니다. 모든 종류의 페이지 속도 증가(또는 기술적으로 감소)에 맞게 사이트를 최적화하려고 노력했다면 SI 점수에도 어떤 식으로든 영향을 미쳤을 것입니다. 페이지가 최대한 빨리 로드되어 방문자에게 최상의 경험을 제공할 수 있도록 SI 시간을 구체적으로 타겟팅하는 몇 가지 방법을 보여 드리겠습니다.

렌더링 차단 리소스 줄이기

더 구체적으로 말하면 JavaScript 실행 시간을 줄이는 것은 속도 지수 점수를 높이는 가장 좋은 방법 중 하나입니다. 렌더링 차단 리소스는 웹사이트의 다른 부분이 우선적으로 로드되는 것을 방지하는 스크립트 및 코드입니다. 사이트에서 다른 요소를 동시에 로드하는 대신 일부 요소는 완료될 때까지 다른 모든 요소를 ​​일시 중지합니다.

그러면 사이트의 속도 지수가 낮아집니다. 이 문제를 해결하려면 표시되는 요소가 DOM에 표시될 때까지 로드되는 스크립트와 코드 비트를 원하는 만큼 연기할 수 있습니다. 범인을 식별하는 것은 실제로 비교적 쉽습니다. Chrome 개발자 도구를 사용하여 사이트가 로드될 때 이를 살펴보고 도구가 요소 렌더링을 중단시키는 요소를 표시하기 때문입니다.

또한 WordPress 사용자는 W3 Total Cache 또는 WP Rocket과 같은 캐싱 플러그인(또는 사이트 최적화 플러그인)을 사용하여 이를 처리할 수 있습니다. 종종 이러한 플러그인에는 렌더링 차단 리소스를 지연시키는 간단한 토글이 있습니다.

Divi 사용자도 테마 옵션을 사용하여 렌더링 차단 CSS 지연과 jQuery 스크립트를 토글할 수 있으므로 이러한 리소스를 차단할 수 있다는 큰 이점이 있습니다. 게다가, 테마의 Critical CSS 기능은 사이트의 콘텐츠를 지연시키고 그렇지 않은 경우보다 훨씬 더 빠르게 로드할 수 있는 많은 양의 코드를 분해합니다. 이들 중 일부는 토글이지만 Divi는 자동으로 다른 것을 활성화합니다. Divi를 설치하면 대부분의 경우 즉시 SI 점수를 얻는 데 도움이 됩니다.

사이트의 메인 스레드 작업 줄이기

렌더링 차단 리소스와 마찬가지로 서버에서 많은 처리 능력을 차지하는 다양한 요소를 로드하여 사이트 성능에 병목 현상을 일으킬 수 있습니다. 이를 줄이면 사이트를 브라우저에 더 빨리 푸시할 수 있습니다.

이에 대한 가장 간단한 해결책은 너무 많은 JavaScript 사용 을 중지하는 것 입니다. GTmetrix는 다음과 같이 최선을 다합니다.

일반적으로 페이지에 JavaScript가 많을수록 구문 분석/컴파일 프로세스가 길어집니다. 결과적으로 사용자가 콘텐츠를 보고 페이지와 상호 작용할 때까지 더 오래 기다려야 합니다.

우리는 이것이 쉽지 않을 수 있음을 알고 있습니다. 사이트가 특정 방식으로 작동하도록 설계했습니다. 그러나 사용하지 않은 코드를 삭제할 수 있으며 사이트에 로드하는 타사 JavaScript를 최적화할 수 있습니다. 또한 JavaScript를 축소하십시오.

JS 감사 외에도 CSS와 HTML을 최소화해야 합니다. 이렇게 하면 더 많은 메인 스레드 부담을 완화할 수 있습니다. 캐싱 및 최적화 플러그인에도 이러한 옵션이 있는 경우가 많습니다.

Divi 사용자는 테마가 CSS와 JavaScript를 자동으로 축소하고 한 입 크기의 청크로 분할하여 처리량을 빠르게 하므로 메인 스레드에서 집중할 필요가 없습니다.

속도 지수 자주 묻는 질문

속도 지수는 복잡한 의미를 지닌 단순한 개념입니다. 웹사이트를 최대한 최적화하는 데 도움이 되도록 SI에 대해 자주 묻는 질문에 답하고자 합니다.

속도 지수는 내 웹사이트의 전체 성능에 어떻게 적합합니까?

속도 지수는 단일 측정항목으로서 다양한 영역에서 웹사이트의 성능을 나타내는 매우 좋은 지표입니다. 완전히 볼 수 있는 스크롤 없이 볼 수 있는 콘텐츠를 고려하기 때문에 사용자가 인지한 로드뿐만 아니라 사이트가 다양한 영역에서 수행하는 작업에 대한 대략적인 추정치를 측정하는 데 사용할 수 있습니다.

실제로 웹 사이트가 수행하는 작업과 관련하여 자체적으로 많은 정보를 제공하지 않습니다. GTmetrix가 "웹사이트의 성능을 전체적으로 평가하기 위한 유용한 전체 벤치마크"를 제공하는 포괄적인 메트릭으로 볼 수 있습니다.

특히 속도 지수 점수에 집중해야 합니까?

아마 아닐 것입니다.

사이트를 벤치마킹하는 것은 매우 유용하지만 FCP(First Contentful Paint), LCP(Large Contentful Paint), TTFB(Time to First Byte) 및 FID(First Input Delay)와 같은 기타 세부적인 문제에 초점을 맞추는 것은 매우 중요합니다. 더 중요. 여러 단계를 수행하여 개별적으로 개선할 수 있으며, 이는 차례로 속도 지수를 개선할 것입니다. 그리고 전체 벤치마크로 간주할 때 최적화가 SI를 통해 얼마나 잘 작동하는지 확인할 수 있습니다.

결론

페이지 속도 최적화는 웹사이트 소유자가 싸우는 끝없는 싸움입니다. 사용성, 경험, 성능 사이의 균형을 맞춰야 하며 그 균형을 찾는 것이 어려울 수 있습니다. 테스트가 매우 다양한 요소에 대해 매우 다양한 점수를 반환할 때 에너지와 자원을 어디에 투자해야 하는지 알기 어려울 수 있습니다. 속도 지수는 사이트 성능의 다른 특정 부분을 조정할 때 사이트가 얼마나 잘 작동하고 있는지를 보여주는 단일 측정항목으로 도움이 될 수 있습니다.

지난 몇 년 동안 웹사이트의 속도 지수를 최적화하기 위해 무엇을 했습니까?

HappyDrawing의 기사 특집 이미지 / Shutterstock.com