자회사 홈페이지를 모노레포로 마이그레이션하면서 모바일웹 부분을 따로 관리할 수 있게 되었다.
웹 페이지성능을 측정했는데 아래와 같이 빨간색 지표를 보게되었다.
원인을 파악해본 결과 다음과 같은 문제점이 있었다.
사용자 경험 측면에서 좋지 않은 서비스라는 생각에 성능을 개선하기로 했는데 검사결과에서 추천하는 방법들을 하나씩 적용해서 해결하기로 했다.
이미지 Height 값이 지정되지 않거나, width에 맞춰서 auto로 설정된 경우 이미지 로드 전 엘리먼트 Height 값이 0이었다가 변경되기 때문에 Layout이 변경되고 reflow/repaint를 발생시킨다.
