웹 성능 최적화 ?

웹 성능 최적화? 그게 뭐야
그냥 빨리 로딩시킨다는건가

그게 맞을지도..?

어떤 글을 봤을 때 웹 성능 최적화 하면 뭐가 있는지 빠르게 나열해보라고 했을때 단 한개도 나열해보지 못했다.

그런데 그 작성자가 나열해둔 걸 보니 한번에 이해가 갔다.

단순히

• style 은 상단에 , js 는 하단에
• js 공백줄이기
• html 작성시 불필요한 div 줄이기 등등

더 많은 방법이 있지만

이를 로딩 최적화와 렌더링 최적화로 구분하여 그 방법을 작성해주었다.

성능 최적화 = 로딩 최적화 + 렌더링 최적화

라고 하는데, 로딩과 렌더링을 최적화 시키면 웹 지표(LCP,FID,CLS) 수치를 개선할 수 있다고 한다.

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

리플로우? 리페인트?

리플로우와 리페인트는 DOM 요소가 시각적으로 변경됐을때, 이 변화를 다시 계산하고 화면에 그려주는 작업으로 렌더링 작업이 리플로우와 리페인트를 뜻한다.

출처: https://kwangsunny.tistory.com/42

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

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

이외의 모든 속성은 다 리플로우 및 리페인트를 발생시킨다고 한다.

CSS 제거?

css는 렌더링 차단 요소이기때문에 불필요한 css 는 제거해야된다.

사용하지 않는 css는 구글 크롬 라이트하우스를 통해 확인할 수 있다.

간결한 스타일 작성

선택자를 간결하게 사용하여 렌더링을 막는다.

지금까지 웹 성능 최적화의 일부분인 CSS에 대해서 알아보았다.
CSS이외의 더 많은 다른 방법들이 존재하며 이는 이곳 에서 확인 할 수 있다.