[항해99] Web Vitals 세션

웹사이트를 느리게 하는 요소들

1. 사이트에 접속했을 때 로딩이 오래 걸린다
2. 동작이 느리다. 프레임이 끊긴다. 렉이 걸린다.

접속 시간을 느리게 하는 요소들

정적 파일

1. 이미지
2. 폰트
3. 라이브러리
4. 코드파일

빠르게 보이게 하기!

ssr(server Side Rendering)
서버쪽에서 렌더링을 마치고 클라이언트에게 전달하는 방식

csr(Client Side Rendering)
클라이언트쪽에서 렌더링이 일어나는 방식

렌더링 : 브라우저가 서버의 요청에 의해 받은 내용이 브라우저에 출력되는 과정

SSR vs CSR

웹페이지 로딩 시간

• 첫 페이지 로딩 시간 > ssr이 유리
• 페이지 이동 시 > csr이 유리 > 첫페이지 로딩 시 나머지 페이지 구성요소들을 전부 가져오기 때문

SEO(Search Engine Optimization) 대응

-ssr이 서버 사이드에서 컴파일 되어 넘어오기 때문에 크롤러에 대응에 더 유리

자원사용 : 페이지 이동 시마다 서버에 요청을 보내기 때문에 ssr이 서버 자원을 더 많이 사용함

ssg : 빌드 타임에서 페이지 생성, 캐싱 서버에 html을 두어 유저에게 넘겨주는 방식

초기 웹사이트의 용량 줄이기 :들이는 노력에 비해 엄청난 효율!

1. 이미지 : 웹페이지 용량의 많은 부분 차지. 50% 이상. 적절한 이미지를 사용하는 것은 웹페이지 크기를 줄여주고 빠른 웹 로딩속도를 만듦

   1. 적절한 이미지 크기를 사용
      

   2. 최적화된 이미지 포맷을 이용

      1. jpg vs png
         a. 카메라로 찍은 실제 사진 > jpg
         b. 만들어진 이미지(일러스트 등) > png
      2. WebP
      • 구글에서 Web을 위해 만들어진 효율적인 이미지 형식
      • 일반적으로 jpg보다 파일 용량이 낮음

   3. Image cdn
      
      이미지 최적화 및 변환을 중점으로 하는 서버

   4. lazy loading

      • 페이지를 불러올 때 모든 이미지를 불러오는 것이 아닌 뷰 포트에 노출된 이미지만을 불러오는 방식
      • 사용하지 않은 데이터의 로드를 뒤로 미룸으로써 웹사이트의 용량을 줄일 수 있다.
      • img 태그의 loading 속성에 lazy를 주는 방식을 사용하거나 IntersectionObserver를 사용하는 방식이 있다.

   5. 그 외

      • sharp, ImageMagick CLI tool, Thumbor 등 이미지 크기 조절 툴 사용
      • css spite 기법 사용
      • sqoosh와 같은 사이트 이용

2. 폰트
   - 한글 폰트 파일의 글자 수는 총 11173개
   - 각 폰트 굵기마다 다른 파일을 사용해야 함
   - 많이 사용하는 지마켓산스 폰트의 경우 파일 하나 당 약 2.5Mb
   2-2. 폰트 최적화
   1. 최적화된 파일 형식 사용 (woff, woff2 등)
   
   2. subset 파일 사용
   a. 사용하는 글자만 모아둔 파일
   b. 한글은 약 2600자
   c. 갊 과 같은 글자는 빠짐
   3. 특정 페이지에서만 사용되는 폰트는 그 페이지에서만 로드한다. 글로벌로 사용하면 불필요하기 때문임.
   

3. Code splitting
   
   유저 및 설정 페이지 등 자주 안보는 페이지는 레이지로 설정한다면 초기 접속시간을 줄일 수 있다.
   -> 단 꼭 필요한 부분만 다이나믹?하게 파일을 불러오는 방식을 사용할 것

4. 라이브러리 관리
   라이브러리도 하나의 파일이기 때문에 효율적으로 관리해야 함
   

5. 동작을 빠르게

   1. DOM?
      브라우저는 화면을 그리기 위해 DOM 이라는 개념을 사용
      DOM이란 화면을 그리기 위해 필요한 정보를 트리형태로 저장한 데이터
      리액트는 버츄얼돔을 사용함으로써 내부 변경 사항을 파악하고 반영하는 방식을 사용
      

   2. Reflow, repaint
      
      
      - Reflow : 레이아웃 수치(width, height, location 등)이 변경 시 영향을 받은 모든 노드를 계산하여 렌더 트리를 재생성하는 과정. 스타일 변경 외에도 element의 속성과 메서드를 사용해도 발생할 수 있다. 만약 reflow가 발생했다면 그 후에 repaint가 발생한다.
      - Repaint : 스타일 변경(background-color, visibility, outline 등) 시 발생하는 과정. repaint가 발생 이후에 reflow는 발생하지 않는다.
      

   2-2. Reflow, repaint를 개선시키는 방법
   1. DOM 구조 최하단 노드에서 작동하도록 코드를 작성
   2. 애니메이션이 들어간 항목을 absolute와 fixed에 사용 : 주변 레이아웃에 영향을 안주므로 영향 범위를 줄일 수 있음. 좀 더 빠른 성능개선
   3. transform을 이용 : 크기를 변경시키는 경우 transform 이용. 이 속성은 reflow, repaint가 일어나지 않아 성능변화를 줌
   4. JS를 통해 스타일 변화를 주어야 할 경우, 가급적 한번에 처리
   
   밑에처럼 한번에 넣으면 3번 쓰는 것보다 더 좋다.

   3. hooks: Throttle vs Debounce
   • Throttle는 일정 주기마다 이벤트가 발생되도록 하는 방식.
     주기가 2초라면 한번 함수가 실행된 후 2초 동안은 함수가 실행되지 않는다.
   • Debounce는 연이어 호출되는 함수들 중 마지막 함수만을 호출하는 것이다.
     주기를 2초로 정했다면, 2초 안에 함수를 호출하면 앞선 호출은 취소되고, 2초 동안 다시 호출하지 않는다면 함수가 실행된다.
   • 어디에 사용할까?
     1. 검색어 입력 : 글자 입력마다 하나하나 실행되는 onchange, 무수히 많은 요청을 보내기 때문에 서버와 클라운트가 과부화.
     2. scroll event -> intersectionObserver : 스크롤 이벤트는 많은 함수가 발생함. intersectionObserver을 사용한다면 부담을 줄일 수 있다.
     3. resize event
     4. mouse move
     5. hooks : useMemo, useCallback
     
     
     
     
     
     
     단 useMemo나 useCallback같은 경우 렌더링에 크게 영향을 미치는 함수에만 사용하는 것이 좋다.