웹 성능 개선이란?
'웹 성능이 향상되었다' 라는 표현에서 웹 성능이 대체 무엇일까? 처음에는 단순하게 빨라지면 그만이라고 생각했지만 그것 외에도 고려해야 할 사항들이 많았다.
- 사이트내의 로드시간 단축 : 리소스들이 렌더링되기 위하여 빠르게 받아져야 한다.
- 서비스를 빠르게 사용 가능하게 준비 : 웹사이트에 접근했을 때 바로 클릭할 수 있고 스크롤이 가능해지는 등의 상호작용이 가능한지 여부이다.
- 매끄러운 상호작용성 : 서비스를 클릭했을 때 반응이 즉각적인지에 대한 여부이다.
- 사용자의 체감 성능 : 실제로 느리더라도 사용자가 로딩이 느리지 않게 느끼게 만드는 방법들이 있다. 예를 들면 유튜브 등에서 사용하는 데이터를 로드하기 전 미리 위치를 보여주는 lazy loading이 있다.
그렇다면 이런 성능들을 어디서 측정할 수 있을까? 답은 개발자 도구에 나와있다.
개발자 도구 활용하기
로딩 성능
우선 웹 성능 지표 중 하나인 로딩 속도에 대해 알아보자. 로딩 성능이란 리소스가 렌더링 되기 전에 불러오는 성능이다. 그러므로 네트워크 탭에서 리소스가 불러와지는 시간을 확인할 수 있다.
네트워크의 여러 탭들 중 시간의 밀리초가 네트워크 로딩속도에 영향을 미치게 된다. 로딩 속도를 줄이기 위해서는 캐시를 적용해 기존에 접속했던 웹사이트의 기록을 저장하거나 리소스를 압축하는 등의 노력이 필요하다.
렌더링 성능
리소스들을 빠르게 받아온다고 모든 것이 빨라지는 것은 아니다. 받은 리소스들을 빠르게 그려내지 못한다면 사용자 경험이 크게 떨어지게 될 것이다. 이 리소스를 빠르게 그리는 능력을 렌더링 성능이라고 한다.
렌더링 성능을 알기 위해서 우리는 html이 그려지는 과정을 알아야 한다. html이 그려지는 과정은 performance 탭에서 볼 수 있다.
DCL, FP 등 딱지처럼 붙어있는 것이 화면을 완전히 그려지기 까지의 과정을 의미한다. 하나씩 살펴보자
FP (First Paint)
처음 픽셀이 그려진 시점(점 하나가 찍히는 시점이다). 최초로 렌더링이 실행되는 시작지점이라고 볼 수 있다
FCP (First Contratful Paint)
최초의 컨텐츠가 그려진 시점이다.
LCP (Largest Contentful Paint)
보여지는 화면에서 가장 큰 컨텐츠가 그려지는 시점이다. 사용자는 LCP의 시점이 빠를 수록 로딩이 빠르다고 느낀다.
DCL (Document Content Loaded)
DOM이 완성되는 시점이다. DCL 이전에는 DOM 요소로 접근할 수 없다.
L (Load)
문서가 완료되는 시점이다.
사용자 경험
로딩속도와 렌더링 성능이 좋다고 모든 것이 해결된 것은 아니다. 결국 사용자가 해당 페이지를 이용하는 것이기에 사용자 경험이 웹 성능 개선의 마지막 열쇠가 된다. 사용자 경험은 어떤 식으로 수치화 할 수 있을까? 이 물음에 대한 답이 Core Web Vitals이다.
Core Web Vitals는 사용자 경험을 개선하는 지표로 3가지 기준점이 있다.
LCP(Largest Contentful Paint)
빠른 로딩
FID(First Input Delay)
빠른 상호작용
CLS(Cumulative Layout Shift)
시각적인 안정성
이러한 점수를 점수화해서 보여주는것이 바로 lighthouse이다.
Lighthouse로 측정하기
측정 방법
lighthouse로 측정하는 방식은 간단하다. 개발자모드를 켜서 lighthouse탭에 들어가 페이지 로드 분석을 누르기만 하면 끝이다. 여기서 여러 지표 중 나에게 가장 유용한 부분은 기기 부분이다. 모바일과 데스크톱 두 가지 모두 개발하는 나로선 가장 유용하게 사용할 수 있었다.
이후 성능, 접근성, 권장사항, 검색엔진 최적화, PWA 5가지 분류를 통해 점수가 매겨진다.
성능
성능 탭에서는 다시 5가지 조건으로 나뉘게 된다.
FCP(First Contentful Paint)
페이지 로딩이 시작한 순간부터 첫번째 콘텐츠가 일부 그려진 시점이다. FCP가 짧다는 뜻은 빈 페이지가 아닌 일부라도 그려진 상태가 빨리 노출된다는 내용이다. 이는 곧 사용자에게 '로딩이 되고 있구나' 하는 안정감을 줄 수 있다.
SI(Speed Index)
페이지가 그려지는 중 시각적으로 표시되는 속도를 나타내는 지표이다. 같은 속도로 컨텐츠가 채워지더라도 더 큰 범위를 먼저 채울수록 SI지표가 좋아진다.
LCP(Largest Contentful Paint)
가장 큰 컨텐츠가 빠르게 나올 수록 높은 점수를 준다. LCP가 높게 나올 수록 사용자는 빠르게 렌더링 되고 있다고 느끼게 된다.
TBT(Total Blocking Time)
FCP와 TTI 사이의 시간에서 longtask들을 뺀 값이다. 어려운 내용이 너무 많으니 하나씩 살펴보자면...
longtask : 50ms가 초과되는 작업으로 메인 스레드를 독점하는 JS작업을 의미한다.
TTI(Time to Interactive) : 사용자의 상호작용이 안정적으로 응답할 수 있는 시점까지의 시간
결국 TBT란 50ms를 제외한 나머지 시간을 의미한다. TBT가 높을수록 상호작용에 걸리는 시간이 더뎌지게 된다.
CLS(Cumulative Layout Shift)
레이아웃이 로딩될 때 움직이는 범위를 뜻한다. CLS 지표가 낮다면 로딩시간 동안 레이아웃이 크게 움직여 클릭미스를 하게 만들어줄 가능성이 높아진다. 실수로 링크라도 타거나 결제창이라도 누르게 된다면 사용자 경험이 대폭 나빠질것이다.
이렇게 라이트하우스의 탭들을 알아보았다. 다음편에는 이 지식들을 들고 실제 업무에 적용해보겠다.
