search

Hah-nna / Tech_Interview

0 stars 0 forks source link

웹사이트 성능 최적화 #40

Open young-02 opened 9 months ago

young-02 commented 9 months ago

로딩 최적화 와 렌덜이 최적화로 구분하여 방법을 작성한다.

렌더링 최적화

웹 페이지 렌더링 최적화의 목표는 리플로우를 최대한 적게 발생시키면서, 빠르게 화면을 그리는 것

1. CSS 최적화

  1. 리플로우, 리페인트를 고려한 스타일 작성

리플로우 레이아웃의 넓이, 높이, 위치 등에 영향을 주는 CSS속성을 변경할 경우 'Layout'부터 다시 그려지게 된다. 이를 리플로우 라고 한다

position / width / height / margin / padding / display / top / left / right / bottom / box-sizing / border-color / text-align / border / border-width / font-family / float / font-size / font-weight / line-height / vertical-align / white-space / word-wrap / text-overflow / text-shadow ...

리페인트 레이아웃에 영향을 주지 않는 속성을 변경하면 레이아웃을 건너뛰고 페인트 작업부터 다시 수행하게 되는데 이를 리페인트라고 한다.

color / border-style / visibility / background / background-color / background-image / background-position / background-repeat / background-size / text-decoration / outline / outline-style / outline-color / outline-width / border-radius / box-shadow ...

리플로우와 리페인트를 발생시키지 않는 속성

opacity / transform / cursor / z-index ...

리플로우가 일어나면 브라우저가 전체 픽셀을 다시 계산해야 하기 때문에 리페인트 속성을 사용하여 스타일을 작성하는 것이 성능면에서 좋다.

  1. 사용하지 않는 CSS 제거 lighthouse 에서 확인후 제거한다.

  2. 간결한 스타일 작성 복잡한 셀렉터는 지양한다. 레이아웃을 그리는데 시간 소요가 된다.

    2. HTML최적화

  3. 인라인 스타일을 사용하지 않는다.

    • 불필요한 코드 중복 발생
    • 레이아웃에 영향을 미치면서 리플로우가 발생
    • 스타일 시트에 작성하는 것이 표준에 맞고 유지보수 에도 적합

  4. 복잡한 DOM 지양 자식요소가 많을 수록 DOM트리가 커지며 계산해야는 것들이 많아진다. (불필요한 div wrapper)

    3. 애니메이션 최적화

  5. css 통해 구현 하는 것이 성능면에서 좋다

  6. transform은 리플로우와 리페인트 모두 발생시키지 않고 합성만 발생시키는 속성이며 사용시 렌더링 속도를 향샹 시킬수 있다.

  7. position설정 시 absolute나 fixed로 설정하면 주변 요소에 영향을 주지 않는다.

    4. JS 최적화

    강제 동기 레이아웃 피하기/레이아웃 스레싱(thrashing) 피하기

    • 레이아웃 단계가 완료되기 전에 요소의 위치나 크기를 변경 후 바로 가져오려고 하면 강제로 레이아웃이 발생한다. (강제동기 레이아웃이라 한다.)
    • 레이아웃을 반복적으로 발생시키는것을 레이아웃 스레싱이다.

로딩 최적화

1. 렌더 블로킹 최적화

  1. css는 head, js는 body 하단에서 불러온다.
    • 빠르게 로드 되면 시각적으로 빠르게 그려진다.
    • script는 html파싱을 멈추고 파일을 다운로드 한다. 모든 구조들이 끝나고 js 다운로드 하는것이 좋다.
  2. media 속성 사용
    • 조건별로 css 불러올 수 있다.
    • media 속성이 없는 스타일시크는 해당 스타일 시트를 브라우저가 해석하는 동안 화면에 스타일을 불러오지 않는다.
  3. async/ defer
    • async : 다운로드 후 즉시 실행
    • defer : 웹헤이지가 모두 그려지고 DOM이 들어왔을때 스크립트 실행 
      
<!-- 병렬 다운로드 & 즉시실행 -->
<script async src="test.js"></script>
```null
<script> - 반드시 순서대로 실행되어야 할때
<script async> - 빨리 실행되어야 할때
<script defer> - 마지막에 파싱해도 상관없을때

2. 이미지 최적화

  1. 환경에 맞는 이미지
    • webp
    • avif : 크롬/삼성지원 저용량이면서 고품질
    • media 사용하여 브라우저 사이즈 맞는 이미지 제공 
      <source srcset="mob.webp" media="(max-width: 760px)">
  2. img 지연 로딩(loading)
    • 화면 지연/병렬 로딩
    • auto: 디폴트
    • lazy: 화면상 보이는 부분만 출력
    • eager : 위치 상관없이 페이지가 로딩되자마자 이미지 로드 
      <img src="item.jpg" loading="lazy" alt>
  3. 스프라이트 이미지
    • 이미지 파일 개수 자체를 줄이므로 리소스 ㅇ ㅛ청 개수를 줄일 수 있다.

      3. 웹팩(webpack)사용

      모듈 번들러 웹팩을 사용하여 css와 js파일을 번들링(하나의 파일로 묶는다.)해 리소스 요청을 줄일 수 있다.

      4. Gzip 사용

    • Gzip 사용하여 텍스트 기반의 리소스 압축
    • 이미지나 pdf는 이미 압축된 파일 경우가 많아 사용하지 않는다.

      5. js 압축

      UglifyJS 사용하여 js 파일을 압축한다.

    • 불필요한 공백이나 줄바꿈을 제거 -> 파일용량 감소

      6. CDN

      유저에게 많은 콘튼츠를 손실없이 빠르게 전달하는 서비스

    • 대용량 콘텐츠 다운 또는 스트리밍에 사용
    • 사용한 만큼 비용 지불

      7. 캐싱

      html,css,js,image 첫 요청시 내려 받은 뒤 특정 위치에 복사본을 저장하고 이후 동일한 URI의 리소스 요청이 왔을 때 이전에 저장해둔 파일을 사용하여 더빠르게 로딩하는데 사용

    • 브라우저가 다운로드할 파일 개수가 줄어들므로 시간이 줄어든다.
young-02 commented 9 months ago

https://ui.toast.com/fe-guide/ko_PERFORMANCE