FID(First Input Delay): 정의 및 웹사이트 최적화 방법

방문자에게 빠른 경험을 제공하는 것은 사이트의 성공에 매우 중요합니다. 그러나 얼마나 잘 수행하는지 측정하는 여러 가지 방법이 있습니다. 그 중 하나가 FID(First Input Delay)로, 사용자가 사이트와 처음 상호작용할 때와 브라우저가 해당 작업에 응답할 때 사이의 시간을 밀리초(ms) 단위로 측정합니다.

이번 포스팅에서는 FID가 무엇인지, 어떻게 측정하는지 설명드리겠습니다. 또한 좋은 FID 점수가 무엇인지 논의하고 최적화할 수 있는 방법을 안내합니다. 마지막으로 자주 묻는 질문 몇 가지를 마치겠습니다. 시작하자!

YouTube 채널 구독

최초 입력 지연(FID)이란 무엇입니까?

앞서 언급했듯이 FID("입력 대기 시간"이라고도 함)는 방문자가 사이트와 상호 작용할 때와 브라우저가 응답할 때 사이에 발생하는 시간을 ms 단위로 측정한 것입니다. Chrome 사용자 경험 보고서에 포함된 필수 측정항목입니다. 또한 핵심 Web Vitals 중 하나입니다. 이는 Google이 사이트의 UX 품질(및 페이지 순위)을 결정하는 데 사용하는 측정항목입니다.

이러한 맥락에서 입력 또는 상호 작용은 광범위한 작업을 나타낼 수 있습니다. 예를 들어 링크 클릭, 버튼 누르기 또는 확인란 선택이 포함될 수 있습니다. 그러나 FID는 사용자가 페이지를 스크롤하거나 확대할 때 적용되지 않습니다. 사용자의 브라우저와 웹사이트 간에 새로운 응답이 필요하지 않기 때문입니다.

몇 가지 다른 요소가 이 측정항목에 영향을 줄 수 있습니다. 사용자 장치의 속도와 처리 능력이 영향을 미칠 수 있습니다. 당신은 그것을 제어할 수 없습니다. 그러나 웹 페이지의 크기와 복잡성을 제어할 수 있습니다. 더 구체적으로 말하면 웹사이트에서 사용하는 JavaScript의 양을 제어할 수 있습니다. 예를 들어 임의의 순서로 로드되는 이미지나 스크립트가 많은 경우 전체 프로세스가 느려지고 사용자의 응답이 지연될 수 있습니다.

사이트에 견고한 FCP 및 LCP가 있더라도 첫 번째 입력 지연이 반송될 만큼 충분히 길 수 있습니다. 귀하의 사이트가 응답하지 않고 느린 것처럼 느낄 수 있습니다.

간단히 말해서, FID는 페이지가 로드되는 동안 페이지의 응답성을 결정하는 데 사용됩니다. 아마도 분명히 이 프로세스는 빠를수록 좋습니다. 따라서 사이트의 FID를 측정하는 방법과 점수를 높이는 방법을 아는 것이 중요합니다.

FID 측정 방법

FID 점수 최적화를 시작하기 전에 현재 위치를 파악하는 것이 중요합니다. 이상적으로는 견고한 사용자 경험(UX)을 제공하려면 FID 점수가 100ms 미만이어야 합니다.

100ms 이하의 점수는 양호한 것으로 간주되는 반면 100~300ms 사이의 점수는 개선의 여지가 있습니다. 300ms 이상의 FID 점수는 좋지 않습니다 .

FID를 측정하기 위해 Google PageSpeed ​​Insights를 사용할 수 있습니다.

이것은 다양한 방법으로 사이트의 성능을 테스트하는 Google의 무료 도구입니다. 이를 통해 FID를 비롯한 다양한 주요 지표를 관찰할 수 있습니다.

FID는 때때로 측정하기 어려울 수 있습니다. 사용자 입력이 필요하기 때문입니다. 그러나 최근에 사이트에서 사용자 상호작용이 있었다면 PageSpeed ​​Insights를 통해 이 측정항목을 찾을 수 있습니다.

시작하려면 텍스트 필드에 사이트 URL을 입력하고 분석 버튼을 클릭하십시오. 도구가 페이지 분석을 완료하면 결과가 표시되고 사이트에 전체 점수가 표시됩니다.

필드 데이터 섹션에서 FID(First Input Delay) 메트릭을 찾을 수 있습니다. 조금 더 낮은 기회 섹션에서 페이지 및 점수 최적화를 위한 제안을 찾을 수 있습니다.

또한 Google은 이러한 점수를 필드 데이터로 표시 합니다. 이는 정보가 시뮬레이션된 테스트( 실험실 데이터 라고 하거나 실험실 도구를 통해 발견됨)가 아닌 실제 사용자 상호 작용을 기반으로 함을 의미합니다. FID는 매우 주관적이고 사용자의 실제 상호 작용과 밀접하게 관련되어 있으므로 필드 데이터를 사용하고 있는지 확인하는 것이 중요합니다. 시뮬레이션은 너무 많은 것을 설명할 수 있습니다.

FID 점수를 최적화하는 방법

이제 FID 점수가 무엇이며 어떻게 측정할 수 있는지 이해했으므로 실제로 개선할 수 있는 방법을 살펴볼 차례입니다. 다음은 첫 번째 입력 지연 시간을 줄이는 데 사용할 수 있는 몇 가지 팁과 전략입니다.

CSS 및 JavaScript 코드 최적화 및 최소화

FID 점수를 최적화하는 가장 좋은 방법 중 하나는 CSS 및 JavaScript 코드를 압축하고 최적화하는 것입니다. 이렇게 하면 파일 크기가 줄어들고 응답성이 향상될 수 있습니다. 불필요한 문자, 공백 및 줄 바꿈을 제거하여 파일 크기를 줄이고 결과적으로 페이지 속도를 높이고 브라우저가 처리해야 하는 프로세스 수를 줄입니다. 따라서 FID가 더 낮습니다.

Divi 사용자도 테마가 처음부터 HTML, JavaScript 및 CSS를 자동으로 축소한다는 것을 알아야 합니다. 테마를 활성화하기만 하면 이 코드가 모두 압축되어 FID가 이전보다 더 나은 위치에 놓이게 됩니다.

Divi 사용자가 아닌 경우 코드를 축소할 수 있는 몇 가지 옵션이 있습니다. 이를 수행하는 빠르고 간단한 방법은 코드 축소와 같은 온라인 도구를 사용하는 것입니다. 전체 크기의 코드를 복사하여 사이트에 붙여넣으면 사이트에서 이를 축소한 다음 결과를 복사하여 사이트에 다시 붙여넣습니다.

코드 편집기를 사용하여 수동으로 코드를 축소할 수도 있지만 이는 조금 더 복잡할 수 있습니다. 그러나 코드 작업에 경험이 있는 경우 이 방법을 사용하면 더 많은 제어가 가능합니다.

또 다른 전략은 Autooptimize 또는 W3 Total Cache(또는 기타 여러 가지)와 같은 플러그인을 사용하는 것입니다.

코드에 익숙하지 않고 사이트에서 이 수정 사항을 자동으로 구현하려는 경우 WordPress 사용자에게 실행 가능한 솔루션이 될 수 있습니다. 또한 이러한 플러그인은 모두 이미지 및 콘텐츠 캐싱과 같은 다양한 최적화 중심 기능을 제공합니다.

긴 JavaScript 작업을 더 작은 작업으로 나누기

긴 작업은 기본 스레드를 차단하는 경향이 있으며 JavaScript가 부풀려져 사이트의 응답성을 손상시킬 수 있습니다. 이러한 일이 발생하지 않도록 하고 프로세스에서 FID 점수를 향상시키려면 이러한 작업을 더 작은 비동기 작업으로 나눌 수 있습니다.

이를 해결하는 가장 효과적인 방법 중 하나는 코드 분할입니다. 간단히 말해서, 이것은 한 번에 하나의 큰 파일이 아닌 더 작고 필요한 코드 조각을 분리하고 로드하는 데 사용되는 기술입니다. Webpack과 같은 도구를 사용하여 이 작업을 수행할 수 있습니다.

대규모 성능 업데이트는 테마 대형 JavaScript 라이브러리를 분리하고 필요할 때만 로드하므로 Divi 사용자도 이 영역에서 이점을 얻습니다. 이것은 거의 모든 Divi 사이트에서 FID를 줄여야 합니다. WordPress 테마는 자체 JS 라이브러리와 함께 제공되는 경향이 있으며 사용자는 코드를 분리하고 스스로 최적화할 수 있는 전문 지식이나 권한이 없을 수 있습니다. 우리는 Divi에서 문제가 되지 않도록 하고 싶었습니다.

타사 코드 및 중요하지 않은 스크립트의 영향 감소

타사 스크립트가 너무 많으면 사이트 자체 데이터의 실행이 지연될 수 있습니다. 따라서 FID 점수를 최적화하려면 타사 코드의 영향을 줄이고 중요하지 않은 타사 스크립트를 제거하는 것도 현명한 생각입니다. 그리고 제거할 수 없는 것을 연기합니다.

어떤 스크립트가 가장 중요한지 결정할 때 사이트의 UX에서 어떤 스크립트가 중요한 역할을 하는지 자문해 보십시오. 예를 들어 별로 필요하지 않은 일부 광고나 팝업을 제거하거나 지연할 수 있습니다. 사용자 가 이메일 수신 동의를 가장 먼저 확인 해야 합니까, 아니면 어떤 식으로든 사이트와 상호 작용할 때까지 지연시킬 수 있습니까?

사용하지 않는 JavaScript 및 CSS를 줄이는 방법에 대한 자세한 내용은 PageSpeed ​​Insights 보고서의 기회 섹션에서 확인할 수도 있습니다.

이 섹션 중 하나를 클릭하여 확장하면 기본 스레드를 차단할 수 있는 특정 파일 및 작업이 나열됩니다. Chrome DevTools를 사용하여 사용하지 않는 JavaScript 및 CSS를 찾을 수도 있습니다.

많은 경우 이러한 "렌더링 차단" 리소스로 인해 페이지가 빠르게 로드되지 않아 FID에도 영향을 줍니다. 이를 제거 및/또는 연기하면 사이트의 상호 작용뿐만 아니라 인지된 응답성과 속도도 향상될 수 있습니다.

Divi에는 이와 같이 중요하지 않은 스크립트를 연기하기 위한 토글이 있습니다. 테마 옵션에서 jQuery 스크립트를 연기하고 테마의 Critical CSS 기능과 결합할 때 모든 렌더링 차단 CSS를 제거하는 인라인 CSS 연기를 채택하도록 선택할 수 있습니다. Google Fonts 및 Gutenberg 편집기 스타일시트 연기를 토글할 수도 있습니다. 이 모든 것은 "렌더링 차단"으로 표시되므로 우아한 테마 회원은 거의 즉시 개선된 FID 점수를 볼 수 있습니다.

FID(First Input Delay) 자주 묻는 질문

이 시점에서 FID가 무엇인지, 웹사이트의 UX에서 FID의 중요성과 개선 방법에 대해 확실히 이해하고 있을 것입니다. 이를 염두에 두고 모든 핵심 사항을 다뤘으면 합니다. FID에 대해 자주 묻는 질문에 대해 알아보겠습니다.

FID가 내 웹사이트의 전체 성능에 어떻게 적합합니까?

기본적으로 FID는 방문자가 귀하의 웹사이트와 첫 번째 상호작용을 측정합니다. 이는 사이트에 대한 사용자의 첫인상에 영향을 미치기 때문에 양적 측정항목이자 인지된 측정항목입니다. 사이트가 사용자 입력에 반응하는 시점을 객관적으로 볼 수 있지만 사용자와 사이트 간의 상호 작용을 기반으로 사용자가 사이트를 인식하는 시점도 알 수 있습니다.

FID는 사용자가 수행하는 첫 번째 상호 작용과 브라우저가 해당 작업에 응답하는 데 걸리는 시간 사이의 시간을 측정합니다. 즉, 측정항목은 사이트가 로드되는 동안 사이트의 반응도를 평가합니다. 속도가 빠를수록 방문자가 더 나은 경험을 할 수 있습니다.

또한 핵심 Web Vital(LCP(Large Contentful Paint) 및 CLS(Cumulative Layout Shift)과 함께)인 FID는 Google에서 웹사이트 순위를 지정하는 데 중요한 역할을 합니다. 따라서 사용자 경험 외에도 사이트의 SEO(검색 엔진 최적화)에도 영향을 줄 수 있습니다. FID를 개선하기 위한 동일한 전략 중 상당수는 사이트의 전체 성능도 크게 저하시킵니다.

내 FID를 어떻게 측정할 수 있습니까?

FID 점수를 측정할 수 있는 몇 가지 다른 방법이 있습니다. 가장 빠르고 쉬운 방법은 Google PageSpeed ​​Insights를 통해 사이트를 실행하는 것입니다. 이 보고서는 FID를 포함한 다양한 중요 측정항목에 대해 자세히 설명합니다. 또한 점수를 향상시킬 수 있는 방법에 대한 몇 가지 제안을 제공합니다.

또한 몇 가지 다른 도구를 사용하여 FID 점수에 액세스할 수 있습니다. 여기에는 Chrome 사용자 경험 보고서, Google Search Console의 핵심 Web Vitals 보고서 및 Web Vitals JavaScript 라이브러리가 포함됩니다. GT Metrix 및 Pingdom의 속도 테스트와 같은 도구가 유용할 수도 있습니다.

FID 점수를 향상시키려면 어떻게 해야 합니까?

FID를 개선하면 사이트의 UX 및 SEO 순위를 모두 개선하는 데 도움이 될 수 있습니다. 일반적으로 낮은 FID 점수는 다음과 같은 여러 요인에 기인할 수 있습니다.

• 무거운 자바스크립트
• 사용하지 않은 스크립트
• 긴 JavaScript 작업
• 긴 스크립트 파일

점수를 높이기 위해 취할 수 있는 몇 가지 단계가 있습니다. 여기에는 사이트 코드 축소, 사용하지 않는 타사 스크립트 제거 또는 지연, 긴 JavaScript 작업(및 CSS 파일)을 더 작은 작업으로 분할 등이 포함됩니다.

결론

웹사이트 방문자에게 긍정적인 첫인상을 줄 수 있는 기회는 단 한 번뿐입니다. 이것이 FID 점수를 최적화할 수 있는 모든 기회를 잡는 것이 중요한 이유입니다. 방문자의 첫 번째 상호 작용이 신속하게 이루어지도록 하는 것이 중요합니다.

이상적인 FID 점수는 100ms 이하입니다. 시간을 단축하고 개선해야 하는 경우 위에서 논의한 여러 전략(예: 사용하지 않는 JavaScript 연기, CSS 및 JavaScript 코드 최적화, 렌더링 차단 리소스 연기/제거)을 통해 시간을 단축할 수 있습니다. 그들은 될 필요가 있습니다.

FID에 궁금한점이 있나요? 아래 의견 섹션에서 알려주십시오!

wan wei / Shutterstock을 통한 주요 이미지