Perceived performance

페이지가 얼마나 빠르고 부드럽게 로드되고 사용자 반응에 응답하는지에 대한 인식은 자원을 가져오는 데 실제로 요구되는 시간보다 더 중요합니다. 물리적으로 사이트를 더 빠르게 만들 수는 없지 몰라도, 사용자에게 더 빠르게 느껴지도록 개선할 수는 있습니다.

인지된 성능을 향상시키는 좋은 일반적인 규칙은, 동작이 완전히 완료될 때까지 아무 정보를 제공하지 않는 것보다, 빠른 응답과 정규적인 상태 업데이트를 제공하는 것이 사용자를 기다리게 하는 것보다 좋다는 것입니다. 예를 들어, 페이지를 로딩할 때, 모든 사진과 다른 자원을 기다리기 보다 글자를 보여주는 것이 더 좋습니다. 콘텐츠가 완전히 다운로드 되지 않아도 사용자는 무언가 일어나고 있다는 것을 볼 수 있고, 콘텐츠와 상호작용을 시작할 수 있습니다.

비슷하게, 긴 작업을 수행하는 링크를 누르자 마자 '로딩 애니메이션'을 표시하는 것이 더 좋습니다. 로딩 애니메이션을 보여주는 것은 작업시간을 단축시키지 않지만 사이트가 더 반응성이 좋게 느껴지고 사용자에게 사이트가 유용한 작업을 수행 중임을 알 수 있게 합니다.

사용자가 사이트를 어떻게 '느끼는지' 평가하는 단일 측정 항목이나 테스트는 없습니다. 그러나, '유용한 지표들'은 여러 가지가 있습니다.

최초 페인트

첫 페인트가 시작되는 시간입니다. 이 변경은 보이지 않을 수 있습니다. 간단한 배경색 변경이나 눈에 띄지 않는 변경일 수도 있습니다.

최초 콘텐츠풀 페인트 (FCP)

첫 번째로 중요한 렌더링이 이루어지는 시간입니다. 예를 들어 글자, 전경 또는 배경사진, 캔버스 또는 SVG 등이 있습니다. 이 콘텐츠는 반드시 유용하거나 의미 있지는 않을 수 있습니다.

최초 의미있는 페인트 (FMP)

유용한 콘텐츠가 화면에 렌더링 되는 시간입니다.

가장 큰 콘텐츠풀 페인트 (LCP)

뷰포트에서 가장 큰 콘텐츠 요소가 렌더링 되는 시간입니다.

스피드 인덱스

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

Time to interactive

UI가 사용자와 상호작용할 수 있게 되는 시간입니다. 즉, 로드 프로세스의 마지막 오래 걸리는 작업이 완료되는 시점입니다.

인지된 성능을 향상시키는 데 도움되는 몇 가지 조언과 팁입니다.

인지된 성능을 향상시키기 위해서, 원본 페이지 로드를 최소화하세요. 다시 말하면, 사용자와 즉시 상호작용 할 콘텐츠를 먼저 다운로드 하고, 나머지 콘텐츠는 '보이지 않는 곳에서' 다운로드 하세요. 다운로드 되는 전체 콘텐츠 양은 실제로 증가할 수 있지만, 사용자는 아주 적은 양만 기다리게 됩니다. 그래서 다운로드가 더 빠르다고 느껴집니다.

콘텐츠로와 상호작용 기능을 분리하고, 초기 로드 시 표시되는 글자, 스타일, 사진을 로드하세요. 초기 페이지 로드에서 사용되지 않거나 보이지 않는 사진이나 스크립트를 지연시키거나 지연로드 하세요. 추가로, 로드하는 자원을 최적화하세요. 사진과 영상은 가장 최적의 형식으로 제공하고, 압축하며, 올바른 크기로 제공되어야 합니다.

제 3자의 광고 로딩과 같이 콘텐츠가 아래로 밀리거나 다른 위치로 이동하게 만드는 사진이나 다른 자원은 페이지가 여전히 로딩되고 있다는 느낌을 줄 수 있습니다. 그리고 이것은 인지된 성능에 좋지 않습니다. 사용자 반응에 의해 시작되지 않은 콘텐츠 재배치는 사용자 경험에 특히 좋지 않습니다. 만약 일부 자원이 다른 자원들보다 로드되는 데 시간이 더 걸리는 경우, 이미 화면에 그려진 다음에 요소를 로드하는 경우에는, 미리 계획하여 자원을 위한 레이아웃 공간을 확보하세요. 이렇게 하면 사이트가 상호작용 가능해진 후에도 콘텐츠가 이동하거나 크기가 재조정되지 않습니다.

글꼴 선택은 중요합니다. 어울리는 글꼴을 선택하는 것은 사용자 경험을 크게 향상시킬 수 있습니다. 인지된 성능 관점에서, 최적이 아닌 글꼴을 불러오는 것은 문자가 꾸며지거나 다른 글꼴로 대체될 때 깜박거림을 유발할 수 있습니다.

대체 글꼴을 크기와 두께를 동일하게 설정하세요. 그러면 글꼴이 로드될 때 페이지 변경이 덜 눈에 띕띕니다.

보여지는 상호작용 요소는 언제나 상호작용 하고 응답하도록 만드세요. 입력 요소가 보인다면, 사용자는 입력 요소를 지연 없이 사용할 수 있어야 합니다. 사용자는 반응이 50ms보다 더 오래 걸릴 때 무언가 지연되고 있다고 느낍니다. 콘텐츠 리페인트가 16.67ms보다 느리거나 초당 60프레임이 되지 않거나 고르지 않은 간격일 때 사용자는 페이지가 좋지 않다고 느낍니다.

자동 완성 기능과 같은 점진적인 향상을 구현하세요. 입력 모달을 표시하는 데 CSS를 사용하고 자동 완성 기능을 사용 가능할 때 JS를 사용하여 추가하세요.

keyup까지 기다리는 것보다 keydown에서 콘텐츠를 요청하는 것이 인지된 콘텐츠 로드 시간을 200ms까지 줄일 수 있습니다. keyup 이벤트에 200ms 동안 흥미롭지만 방해되지 않는 애니메이션을 추가하는 것은 또 다른 200ms의 인지된 로드를 줄일 수 있습니다. 이렇게 해서 400ms를 단축하는 것이 아니지만, 사용자는 콘텐츠를 기다리고 있다고 느끼기 전까지는 기다린다고 생각하지 않을 것입니다.

사용자가 유용한 콘텐츠를 기다리는 시간을 줄이고 사이트를 반응적이고 흥미롭게 유지함으로써, 사용자는 실제로 자원을 로드하는 데 걸리는 시간이 동일하더라도 사이트가 더 빠르게 동작한다고 느낄 것입니다.

• 이전
• Overview: 웹 성능
• 다음