렌더링 성능 최적화 - Layout Shift 피하기

Layout Shift 피하기

Layout Shift: 화면 레이아웃이 계속 변경되는 것

-> 리플로우 발생, 사용성에 많이 안 좋은 영향 (ex: 원래 클릭하려던 애가 밀리면서 다른 애 클릭)

원인

• 사이즈가 정해져 있지 않은 이미지
• 사이즈가 정해져 있지 않은 광고
• 동적으로 삽입된 콘텐츠
• Web font (FOIT, FOUT)

해결

• 이미지, 광고의 사이즈를 예측해서 width, height을 준다
• 동적으로 삽입될 콘텐츠의 크기를 예측하고 다른 화면요소들이 밀리지 않게 설계한다.
• 폰트 최적화

이미지 사이즈 비율 맞추기

이미지의 width, height을 고정된 값으로 주면 Layout Shift는 발생하지 않지만 이미지의 비율이 깨지게 된다. (반응형으로 이미지 크기가 변하는 경우)

이런 경우 Wrapper에 padding-bottom을 원하는 비율을 넣고, Image를 absolute, width,height을 100%로 줌으로써 Layout Shift도 발생시키지 않고, 비율도 유지할 수 있다.

const PhotoListWrap = styled.div`
  margin: 20px auto;
  width: 70%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
`;

const ImageWrap = styled.div`
  width: 100%;
  padding-bottom: 56.25%; /// (16:9 비율 -> 9/16)
  position: relative;
`;

const Image = styled.img`
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
`;