웹 성능 최적화 끄적끄적

브라우저에서의 렌더링 최적화

DOM 최적화

• HTML 구문 오류 최소화 (CPU 리소스 절약)
• HTML 중첩 완화 (depth 깊을수록 layout 계산 리소스 증가)
• <script> 지연 로드 (async, defer)
  • GTM(Google Tag Manager) 스크립트 기본값은 async=true
  • GTM 실행 시점을 defer로 미뤄 병목을 방지해야 할까?
    • 트레이드오프 고려 필요
    • 로드 속도를 빠르게 할 수 있지만, 그 효과가 크지 않고 GTM 로드 시점이 늦춰지면서 조기 이탈한 사용자에 대한 정보 누락 가능
    • https://stackoverflow.com/questions/72531926/defer-attribute-for-the-google-tag-manager

async, defer

실무에 써먹을 만한 DOM 최적화

windowing

라이브러리 사용, 혹은 직접 구현

 

content-visibildity css

.content-block {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

 

display:none 대안으로 content-visibility: hidden 고려

 

Compare it to other common ways of hiding element's contents:

display: none: hides the element and destroys its rendering state. This means unhiding the element is as expensive as rendering a new element with the same contents. visibility: hidden: hides the element and keeps its rendering state. This doesn't truly remove the element from the document, as it (and it's subtree) still takes up geometric space on the page and can still be clicked on. It also updates the rendering state any time it is needed even when hidden.

content-visibility: hidden, on the other hand, hides the element while preserving its rendering state, so, if there are any changes that need to happen, they only happen when the element is shown again (i.e. the content-visibility: hidden property is removed).

Some great use cases for content-visibility: hidden are when implementing advanced virtual scrollers, and measuring layout. They're also great for single-page applications (SPA's). Inactive app views can be left in the DOM with content-visibility: hidden applied to prevent their display but maintain their cached state. This makes the view quick to render when it becomes active again.

In an experiment, Facebook engineers observed an up to 250ms improvement in navigation times when going back to previously cached views.

 

지원 브라우저

 

그렇게 많지는... 않다

@supports selector로 fallback 처리 가능

    @supports (content-visibility: hidden) {
      content-visibility: hidden;
    }
    @supports not (content-visibility: hidden) {
      display: none;
    }

 

IE 컷

 

 

참조

https://web.dev/content-visibility/

content-visibility: the new CSS property that boosts your rendering performance

https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports_static

CSS: supports() static method - Web APIs | MDN

https://d2.naver.com/helloworld/59361