인지된 성능

pixabay

인지된 성능은 웹 사이트 성능, 응답성 및 안정성을 주관적으로 측정한 것입니다. 즉, 웹사이트가 사용자에게 얼마나 빠른지 보여줍니다. 실제 작동 속도보다 정량화하고 측정하기가 더 어렵지만 아마도 훨씬 더 중요할 수 있습니다.

이 기사에서는 인식을 평가하고 개선하기 위한 다양한 도구와 함께 인식된 성능에 영향을 미치는 요소에 대한 간략한 소개를 제공합니다.

전제 조건: 기본 소프트웨어 설치 및 클라이언트 측 웹 기술 에 대한 기본 지식 .
목적: 웹 성능에 대한 사용자 인식에 대한 기본 지식을 얻습니다.

개요

 

페이지가 얼마나 빠르고 원활하게 로드되고 사용자 상호 작용에 응답하는지에 대한 인식은 리소스를 가져오는 데 필요한 실제 시간보다 훨씬 더 중요합니다. 물리적으로 사이트 실행 속도를 높일 수는 없지만 사용자가 느끼는 속도를 향상시킬 수는 있습니다.

인지된 성능을 향상시키기 위한 좋은 일반 규칙은 사용자가 작업이 완전히 완료될 때까지(정보를 제공하기 전에) 기다리게 하는 것보다 빠른 응답과 정기적인 상태 업데이트를 제공하는 것이 일반적으로 더 낫다는 것입니다. 예를 들어, 페이지를 로드할 때 모든 이미지와 기타 리소스를 기다리는 것보다 페이지가 도착할 때 텍스트를 표시하는 것이 더 좋습니다. 콘텐츠가 완전히 다운로드되지 않은 경우에도 사용자는 무슨 일이 일어나고 있는지 확인할 수 있으며 콘텐츠와 상호 작용을 시작할 수 있습니다.

참고: 어떤 일이 일어나기를 수동적으로 기다리는 사용자보다 적극적으로 참여하거나 주의가 산만해지거나 즐거움을 느끼는 사용자의 경우 시간이 더 빨리 지나가는 것으로 보입니다. 가능하다면 작업 완료를 기다리고 있는 사용자에게 적극적으로 참여시키고 이를 알리십시오.

마찬가지로, 사용자가 장기 실행 작업을 수행하기 위해 링크를 클릭하자마자 "로딩 애니메이션"을 표시하는 것이 더 좋습니다. 이로 인해 작업을 완료하는 데 걸리는 시간이 바뀌지는 않지만 사이트의 반응성이 더 좋아지고 사용자는 사이트가 뭔가 유용한 작업을 하고 있다는 것을 알게 됩니다.

성과 지표
사용자가 어떻게 느끼는지 평가하기 위해 사이트에서 실행할 수 있는 단일 측정항목이나 테스트는 없습니다. 그러나 "유용한 지표"가 될 수 있는 여러 측정항목이 있습니다.

첫 번째 페인트
첫 번째 페인트 작업이 시작되는 시간입니다. 이 변경 사항은 표시되지 않을 수도 있습니다. 단순한 배경색 업데이트일 수도 있고 눈에 덜 띄는 업데이트일 수도 있습니다.

첫 번째 콘텐츠가 포함된 페인트 (FCP)
첫 번째 중요한 렌더링(예: 텍스트, 전경 또는 배경 이미지, 캔버스 또는 SVG 등)까지의 시간입니다. 이 콘텐츠가 반드시 유용하거나 의미 있는 것은 아닙니다.

첫 번째 의미 있는 페인트 (FMP)
유용한 콘텐츠가 화면에 렌더링되는 시간입니다.

콘텐츠가 포함된 최대 페인트 (LCP)
뷰포트에 표시되는 가장 큰 콘텐츠 요소의 렌더링 시간입니다.

속도 지수
보이는 화면의 픽셀이 그려지는 평균 시간을 측정합니다.

상호작용할 시간
사용자 상호 작용에 UI를 사용할 수 있을 때까지의 시간입니다(즉, 로드 프로세스의 마지막 긴 작업이 완료됨).

성능 향상
다음은 인지된 성능을 향상시키는 데 도움이 되는 몇 가지 팁과 요령입니다.

초기 부하 최소화
체감 성능을 향상시키려면 원본 페이지 로드를 최소화하세요. 즉, 사용자가 즉시 상호 작용할 콘텐츠를 먼저 다운로드하고 "백그라운드에서" 이후 나머지를 다운로드합니다. 실제로 다운로드되는 전체 콘텐츠 양은 늘어날 수 있지만 사용자가 기다리는 시간은 매우 적기 때문에 다운로드가 더 빠르게 느껴집니다.

콘텐츠와 대화형 기능을 분리하고 초기 로드 시 표시되는 텍스트, 스타일 및 이미지를 로드합니다. 초기 페이지 로드 시 사용되지 않거나 표시되지 않는 지연 또는 지연 로드, 이미지 또는 스크립트입니다. 또한 로드하는 자산을 최적화해야 합니다. 이미지와 비디오는 가장 최적의 형식, 압축 및 올바른 크기로 제공되어야 합니다.

콘텐츠 점프 및 기타 리플로우 방지
제3자 광고 로드와 같이 콘텐츠가 아래로 밀려나거나 다른 위치로 이동하게 만드는 이미지나 기타 자산은 페이지가 여전히 로드 중인 것처럼 느껴지게 하고 인지 성능이 저하될 수 있습니다. 콘텐츠 리플로우는 사용자 상호 작용에 의해 시작되지 않은 경우 사용자 경험에 특히 좋지 않습니다. 다른 콘텐츠가 이미 화면에 그려진 후에 요소가 로드되어 일부 자산이 다른 자산보다 로드 속도가 느려지는 경우, 특히 콘텐츠가 점프하거나 크기가 조정되지 않도록 미리 계획하고 레이아웃에 공간을 남겨 두십시오. 사이트가 대화형으로 바뀌었습니다.

글꼴 파일 지연 방지
글꼴 선택이 중요합니다. 적절한 글꼴을 선택하면 사용자 경험이 크게 향상될 수 있습니다. 인지된 성능 관점에서 볼 때 "최적화되지 않은 글꼴 가져오기"는 텍스트 스타일을 지정하거나 다른 글꼴로 대체할 때 깜박임을 초래할 수 있습니다.

글꼴이 로드될 때 페이지 변경 사항이 눈에 띄지 않도록 대체 글꼴을 동일한 크기와 무게로 만듭니다.

대화형 요소는 대화형입니다.
눈에 보이는 대화형 요소가 항상 대화형이고 반응형인지 확인하세요. 입력 요소가 표시되면 사용자는 지연 없이 해당 요소와 상호 작용할 수 있어야 합니다. 사용자는 반응하는 데 50ms 이상이 걸리면 뭔가 느리다고 느낍니다. 콘텐츠가 16.67ms(또는 초당 60프레임)보다 느리게 다시 그려지거나 불규칙한 간격으로 다시 그려지면 페이지가 제대로 작동하지 않는다고 느낍니다.

자동 완성 기능을 점진적으로 향상시키세요. CSS를 사용하여 입력 모달을 표시하고, JS를 사용하여 자동 완성 기능을 추가하세요.

작업 개시자가 보다 대화형으로 보이도록 만들기
keydown기다리지 않고 콘텐츠를 요청하면 keyup콘텐츠의 인지된 로드 시간을 200ms까지 줄일 수 있습니다. 해당 이벤트에 흥미롭지만 눈에 거슬리지 않는 200ms 애니메이션을 추가하면 keyup인지된 부하를 200ms 더 줄일 수 있습니다. 400ms의 시간을 절약할 수는 없지만 사용자는 콘텐츠를 기다릴 때까지 콘텐츠를 기다리고 있다는 느낌을 받지 않습니다.

결론
사용자가 유용한 콘텐츠를 기다려야 하는 시간을 줄이고 사이트의 반응성과 참여도를 유지함으로써 사용자는 사이트 성능이 더 좋아졌다고 느낄 것입니다. 심지어 리소스를 로드하는 실제 시간도 동일하게 유지됩니다.

 

인지 성능과 실제 성능 비교

응용 프로그램의 수행 성능이 적합한지 여부에 대한 판단은 궁극적으로 응용 프로그램 사용자에게 달려 있습니다. 개발자는 특정 응용 프로그램이 실행되는 데 걸리는 시간이나 생성되는 객체의 인스턴스 수를 기준으로 응용 프로그램의 성능을 측정할 수 있습니다. 하지만 이러한 측정 기준은 최종 사용자에게 중요한 것이 아닙니다. 사용자가 성능을 측정하는 기준이 다른 경우도 있습니다. 예를 들어 응용 프로그램이 빠르고 원활하게 작동하고 입력에 신속하게 응답하는가, 시스템 성능에 부정적인 영향을 주는가 등을 기준으로 삼을 수 있습니다. 인지 성능을 테스트해 볼 수 있는 다음과 같은 질문에 답해 보십시오.

• 애니메이션이 부드럽게 전환됩니까? 아니면 끊어져서 보입니까?
• 비디오 내용이 부드럽게 보입니까? 아니면 끊어져서 보입니까?
• 오디오 클립이 연속으로 재생됩니까? 아니면 멈췄다가 다시 재생됩니까?
• 프로그램을 오랫동안 실행하면 윈도우가 깜박이거나 아무 것도 표시되지 않습니까?
• 내용을 입력할 때 입력하는 텍스트가 바로 입력됩니까? 아니면 입력 시간이 지연됩니까?
• 항목을 클릭하면 바로 무언가 실행됩니까? 아니면 클릭 후 시간이 지연됩니까?
• 응용 프로그램을 실행하면 CPU 팬이 시끄럽게 돌아갑니까?
• 랩톱 컴퓨터 또는 휴대 장치에서 응용 프로그램을 실행하면 배터리가 빨리 소모됩니까?
• 응용 프로그램을 실행하면 다른 응용 프로그램의 응답이 느려집니까?

인지 성능과 실제 성능을 구분하는 것이 중요합니다. 즉, 최상의 인지 성능을 구현하는 방법이 절대적으로 가장 빠른 성능을 구현하는 방법과 항상 같지는 않습니다. 런타임에서 자주 화면을 업데이트하고 사용자 입력을 수집할 수 없을 만큼 많은 코드를 응용 프로그램에서 실행하지 않도록 합니다. 일부 경우에는 이러한 균형점을 찾기 위해 프로그램 작업을 여러 부분으로 분할하고 각 부분 사이에 런타임이 화면을 업데이트하도록 만듭니다. 이에 대한 자세한 내용은 렌더링 성능 을 참조하십시오.

여기에 설명된 팁과 기술은 실제 코드 실행 성능과 사용자의 인지 성능을 모두 향상시키기 위한 것입니다.

 

https://velog.io/@sejinkim/%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%84%B1%EB%8A%A5-%EC%B8%A1%EC%A0%95-Web-Vitals

https://newrelic.com/kr/resources/white-papers/how-fast-does-your-website-need-to-be