Skip to main content

인포메이트 9주차 공유(최적화)

· 12 min read
haejinyun
haejinyun

인포메이트 9주차 공유(최적화) 모음입니다.

웹 성능 최적화가 필요한가요? - 윤해진

웹 성능 최적화가 필요한가요? - 윤해진​

들어가는 말)​

웹 성능 최적화라는 말은 많이 들어보셨을 것입니다.

최적화를 왜 하시나요? 라는 질문에 저는 빠른 웹 사이트가 사용하기 좋으니까요.라는 답이 전부였습니다.

이번 글을 읽으며 좀더 구체적인 웹 성능 최적화의 이유와 측성 기준에 대해서 알아보고자 합니다.

1. 성능 측정이 필요한 이유?​

비즈니스 관점​

만약 사용자가 koin에 접속하여 식단 정보를 확인하려 합니다. 이때 사이트에 접속해도 5초 이상 화면 로드가 되지 않는다고 한다면 사용자는 계속해서 사이트에 접속할까요?

저만하여도 바로 사이트를 이탈하여 다른 방식으로 정보를 얻으려 할 것입니다.

웹 사이트가 사용자에게 빨리 로딩되면 좋은 사용자 경험(UX, User Experince)을 제공할 수 있습니다.

사용자가 웹 사이트에 들어갔을 때, 하얀 화면을 노출시키거나 웹 사이트 로딩 및 렌더링에 지연이 발생하면 사용자는 자연스레 이탈하게 되고, 이 때 해당 웹 서비스는 방문 사용자에 대한 결제, 광고 등의 비즈니스 기회를 잃어버리게 됩니다.

Think with Google의 기사에서 발췌한 내용으로는 웹 페이지 로딩 시간과 사용자 이탈률에 대해 이야기 했습니다. 기사에 따르면 페이지 로딩 시간이 1초에서 3초로 증가하면 페이지 이탈률이 32%로 증가한다고 하고, 1초에서 10초가 되면 무려 페이지 이탈률이 123%나 된다고 합니다.

검색 엔진 관점(SEO)​

2021년 5월부터 Google에서는 웹 성능 지표(웹 성능 최적화가 어느정도 되었는가)는 검색엔진 순위에 영향을 미친다고 발표했습니다.

아래 Google이 소개한 표에서 보면 Core Web Vitas에 있는 LCP, FID(First Input Delay, 최초 입력 지연 시간), CLS(Cumulative Layout Shift, 페이지 로드시 축척된 화면의 움직임)를 말합니다. (이는 하위 단락에서 자세히 다룹니다.)

2. FE에서 측정해야 할 성능은?​

로딩​

로딩 성능은 서버에서 웹 페이지에 필요한 HTML, CSS, Javascript, 미디어 소스(Image, Video) 등의 리소스를 다운로드할 때의 성능을 말합니다.

  • FCP (First Contentful Paint)

    FCP는 페이지가 로드되기 시작하고 컨텐츠의 일부가 화면에 렌더링 될 때 까지의 시간을 의미합니다.

    즉, 첫 요소가 로드 될 때까지 걸리는 시간을 의미합니다.

  • FMP (First Meaningful Paint)

    브라우저가 페이지의 주요 컨텐츠들을 화면에 렌더링하기 시작하는 순간을 의미합니다.

    즉, 사용자에게 의미있는 첫 요소가 리드되는 순간입니다.

  • LCP (Largest Contentful Paint)

    페이지에서 가장 용량이 큰 컨텐츠가 표시되는 시점을 나타냅니다.

    즉, 주요 컨텐츠가 로드 될 때 걸리는 시간을 말합니다.

    구글 제시 기준.

    • 2.5 미만: 좋음
    • 2.5 ~ 4.0: 개선 필요
    • 4.0 이상: 형편 없음

    으로 구분합니다.

코인의 식단으로 예를 들자면, 처음 헤더와 레이아웃인 첫 요소가 뜨는 것이 LCP

사용자에게 의미 있는 요소와 페이지에서 가장 큰 컨텐츠를 차지하는 것이 동일하기에 식단 요소들이 FMP과 LCP가 동일한 시점이 될 것입니다.

+최근 FCP의 경우 로딩바와 같은 대기를 나타내는 요소가 있는 경우가 많아, 실제 컨텐츠와 관련 없는 로딩 상황을 사용자가 보는 것은 지연 시간으로 느낄 수 있어 FMP라는 사용자에게 의미있는 컨텐츠를 측정 기준으로 사용하였지만, 현재 약 20%의 항목에서 정확하지 않다는 연구 결과가 발표되어 LCP를 기준으로 로딩 속도를 측정한다고 합니다.

렌더링​

렌더링 성능은 페이지 화면에 주요 리소스가 페이지에 그려질 때의 성능을 말합니다.

60은 사람이 자연스럽다고 느끼는 초당 프레임 수라고 합니다.

따라서 1s/60는 약 16ms로 브라우저 렌더링 과정이 0.16초를 초과하게 된다면 초당 프레임 수가 줄어들고 이는 사용자가 페이지가 버벅인다고 느끼게 될 것입니다.

⇒ 따라서 브라우저 렌더링 과정이 얼마나 걸리는지 측정을 통해 렌더링 성능을 측정할 수 있습니다.

메모리​

지난번에 다루었던 가비지 컬렉터와 연관된 파트입니다.

메모리와 관련해서는 메모리 누수가 있습니다.

할당 되었던 데이터의 해제가 재때 일어나지 않아 지속적으로 메모리에 남아있는 경우를 말합니다.

대부분의 경우에는 GC에 의해 해제되지만

  • 전역변수
  • 해제되지 않은 타이머, 콜백
  • 돔 외부에서의 참조

등의 원인으로 GC가 동작하지 않는다고 합니다.

따라서 메모리 사용이 감소하지 않으면, 힙과 노드사용양이 증가만 하고, 줄어들지 않게 됩니다.

Web Vitals?​

Google은 필수적인 웹 성능 지표인 Core Web Vital을 만들었습니다.

널리 사용되는 성능 측정 도구 중 하나인 Google의 Lighthouse를 이용하면 Core Web Vital에서 이야기하는 지표들을 확인하고 개선할 수 있습니다.

  • LCP (앞서 설명)

  • FID (First Input Delay)

    사용자 행동에 대한 실제적인 이벤트 핸들러의 반응하기 까지의 시간을 의미합니다.

    사용자가 이벤트를 발생시켰을때 메인 스레드에서 다른 동작을 하고 있다면, 해당 이벤트는 현재 진행중인 동작이 끝난 뒤 시작되게 될 것입니다.

    ⇒ 사용자의 이벤트를 받고 실제적인 동작을 처리할 때 까지 걸리는 시간

    • 이 시간이 짧을 수록 사용자는 입력에 대한 빠른 동작이 가능한 사이트라고 판단하 것입니다.

    구글 제시 기준.

    • 100ms 미만: 좋음
    • 100ms ~ 300ms: 개선 필요
    • 300ms 이상: 형편 없음

    으로 구분합니다.

  • CLS (Cumulative Layout Shift)

    시각적인 안정성을 측정할 때 사용합니다.

    이는 시작 위치에서 레이아웃이 얼마나 변화 하는지를 측정합니다.

    화면이 처음 렌더링 된 상황에서 덜컹거리며 요소가 추가되는 것을 측정합니다.

    변경도를 계산하여 구글 제시 기준.

    • 0.1 미만: 좋음
    • 0.1 ~ 0.25: 개선 필요
    • 0.25 이상: 형편 없음

    으로 구분합니다.

3. 어떤 것으로 성능을 측정하지?​

Lighthouse​

크롬 개발자 도구에서 제공하는 lighthouse는 많이 들어보셨을 것 같습니다.

lighthouse는 구글이 제시한 web vital를 이용하여 성능을 측정하고 결과를 제공합니다.

개발자 도구 탭 활용​

  • 퍼포먼스 탭: 직접 원하는 구간을 녹화하여 네트워크, 메모리, 렌더링 전반적인 사항 체크 가능
  • 네트워크 탭: 직접 네트워크 환경 속도를 조절하여 시뮬레이션 가능 및 네트워크 처리 요청 시간 확인 가능
  • 메모리 탭: 현재 메모리 사용량에 대해 확인 가능 ⇒ 각 스냅샷을 촬영하여 어느 항목에서 메모리 누수가 발생하는지 체크 가능

등 다양한 모니터링 도구가 존재합니다.

4. 마무리​

웹 사이트의 성능을 측정하는 다양한 기준도 측정을 하는 도구들도 많이 있는 것을 확인할 수 있었습니다.

그러면 어떤 것을 사용하면 좋은 것이지?라는 질문에 어떤 영상에서는 자신의 서비스의 우선순위를 두고 그에 맞는 성능 개선요소에 집중하는 것이 중요하다하는 것을 보았습니다.

본인의 사이트에서 중요한 요소를 판단하여 적절한 성능 요소를 파악하는 것이 성능 개선 전 가장 중요한 요소라고 생각되었습니다.

참고: https://devocean.sk.com/blog/techBoardDetail.do?page=&boardType=undefined&query=&ID=164863&searchData=&subIndex=#none
https://www.youtube.com/watch?v=A6J74xLWqYg&t=186s