[Web.dev] Fast (1) - Introduction

 

 

 

Overview

web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다.

 

 

Table of Contents

• Why does speed matter?
• What is speed?
• How to measure speed?
• How to stay fast?
• Measure performance with the RAIL model

 

 

Why does Speed Matter?

연구에 따르면 낮은 성능은 비즈니스 목표에 부정적인 영향을 미칠 수 있습니다. 예를 들어 BBC는 사이트를 로드하는 시간이 1초 추가될 때마다 사용자 수가 추가로 10% 줄어든다는 사실을 발견했습니다.

 

"속도"에 대해 공부하는 것이 중요한 이유는 개발자가 이것을 항상 염두에 두고 신경 쓰지 않으면, 예상하지 못한 순간에 이것이 비즈니스 목표를 달성하는데 중요한 걸림돌이 될 수 있기 때문입니다. 느린 웹 페이지에 접근하는 사용자는 이탈할 가능성이 높으며, 한번 이탈한 사용자를 다시 데려오는 것은 사용자를 처음 웹사이트를 방문하게 하는 것보다 일반적으로 어렵습니다.

 

 

Speed Impacts UserExperience

사용자 경험에서 속도는 중요한 역할을 합니다. 소비자 연구에 따르면 모바일 속도 지연에 대한 스트레스 반응은 공포 영화를 보거나 수학 문제를 푸는 것과 유사하며, 소매점 계산대에서 기다리는 것보다 더 큽니다.

 

 

 

https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report

Streaming delays mentally taxing for smartphone users: Ericsson Mobility Report

 

 

 

What is Speed?

"빠른 속도"를 갖는 웹 사이트를 만드는 것은 생각보다 까다로운 일일 수 있는데 이는 "속도"라는 것이 하나의 Metric으로 측정될 수 있는 것이 아니기 때문입니다. 실제로 속도는 "유저의 입장"에서 생각해보아야 합니다. 즉 "유저가 느끼는 속도"가 가장 중요하다는 것입니다. 실제로 캐싱, 작은 번들 사이즈, 서버사이드 렌더링을 통해 속도를 개선할 수도 있지만, 유저에게 적절한 피드백을 제공함으로써 유저를 "지루하지 않게"하는 것도 "속도 개선"의 일부로 생각할 수 있을 것입니다.

 

 

When a user navigates to a web page, they're typically looking for certain types of feedback:

 

 

 

How to Measure Speed

Lab Data

Lighthouse 등의 도구를 사용해서 "특정 환경"을 시뮬레이션해서 성능을 테스트할 수 있습니다. 여기서의 특정 환경이란, 네트워크 속도, CPU Throttling, Device Width & Height를 설정할 수 있는 환경을 의미합니다. 실제로 Lighthouse와 같은 도구를 사용하면 시뮬레이션된 환경에서 속도뿐만 아니라 SEO, Accessibility등의 진단 기능도 활용해서 웹 사이트를 개선할 수 있습니다.

 

offers reproducible results and a debugging environment, but might not capture real-world bottlenecks and cannot correlate against real-world page KPIs. With lab data, you need to understand your users' typical devices and networks and appropriately mirror those conditions when you test performance. Have in mind that even in areas with 4G, users may still experience slower or intermittent connections when in elevators, while commuting, or in comparable environments.

 

 

 

 

Field Data

Field Data는 시뮬레이션 된 환경이 아닌 실제 유저가 보는 화면으로부터 얻은 데이터를 의미합니다. 실제 유저가 사용하는 브라우저와 OS, 환경 등을 의미하며, Lab Data보다 정확한 데이터들을 얻을 수 있습니다. 다만 이런저런 초기 설정 비용이 발생합니다. 

 

also called Real User Monitoring or RUM) captures true real-world user experience and enables correlation to business KPIs, but has a restricted set of metrics and limited debugging capabilities.

 

elastic-rum

 

How to Stay Fast

Internal Google study has found that 40% of brands regress on web performance after 6 months

 

"속도"는 지속적으로 신경 쓰지 않으면 느려집니다. 따라서 "속도"라는 메트릭 자체에 관심을 가지고

꾸준히 모니터링하는 것이 중요합니다.

 

 

 

RAIL Model

RAIL 모델은 성능에 대해 생각할 수 있는 구조를 제공하는 “사용자 중심"의 성능 모델을 의미합니다. 다음 웹 앱 수명 주기의 4가지 뚜렷한 측면에 대해 고려할 수 있습니다. (자세한 내용은 이후 포스팅에서 다룹니다)

 

• 응답 (Response)
• 애니메이션 (Animation)
• 유휴 상태 (Idle)
• 로드 (Load)