Layout Shift 방지 스타일 변경, react-slick 사용 컴포넌트에 lazyLoad 옵션 추가

[yeodahui]

작업한 내용

• Slider 컴포넌트를 만들고 있으나 아직 미완성입니다.
• 리뷰에서 사진이 로드될 때 Layout Shift가 발생하는 것을 발견하고 ReviewContainer 스타일을 변경했습니다.
• react-slick 슬라이더를 사용하는 컴포넌트에서 settings에 lazyLoad: "ondemand" 옵션을 추가했습니다. 다음 컴포넌트로 넘겼을 때 해당 컴포넌트가 로드되게끔 만듭니다.

중점적으로 봐 주었으면 하는 부분

• 미완성인 Slider 컴포넌트가 브랜치에 포함되어있는데 같이 merge 해도 될까요? 혹시 미완성 컴포넌트가 develope에 추가되는 것이 꺼려진다면 삭제해서 다시 commit 하겠습니다!

요청

• lazy load 옵션을 사용한 환경에서 성능 측정을 정확하게 해보면 좋겠습니다.
• 이 브랜치가 merge되었을 때 다시 배포환경에서 pagespeed를 돌려보면 어떨까요?
• npm start했을 때, npm run build해서 build 폴더에서 live server 열었을 때 각각 52점, 55점으로 측정되었습니다.(재 측정마다 점수가 조금씩 달라집니다.) 두 경우 모두 TBT 점수가 많이 올랐습니다.

[npm start]

[build live server]

[chodakk]

질문이 있어 코멘트를 답니다! npm start, npm run build 두 가지 버전으로 성능 측정을 하셨는데,

1. 슬라이더 코드만 적용된 사례인가용? 혹은 다른 개선점들 포함되어 있나요?
2. 보고서에 npm start와 npm run build 둘 중 하나를 기입한다면 어떤게 적합할까요? (저는 npm run build가 적합하다 생각하지만... 잘 모르겠네요^^ㅎ.,,)
3. react-slick 라이브러리 대체 작업은 진행하지 않기로 되었나용?,?

[yeodahui]

질문이 있어 코멘트를 답니다! npm start, npm run build 두 가지 버전으로 성능 측정을 하셨는데,

1. 슬라이더 코드만 적용된 사례인가용? 혹은 다른 개선점들 포함되어 있나요?
2. 보고서에 npm start와 npm run build 둘 중 하나를 기입한다면 어떤게 적합할까요? (저는 npm run build가 적합하다 생각하지만... 잘 모르겠네요^^ㅎ.,,)
3. react-slick 라이브러리 대체 작업은 진행하지 않기로 되었나용?,?

1. Slider에 대한 개선 내용만 포함되어있습니다!
2. 두 버전 모두 체크해 올려도 괜찮을 것 같아요~ 하나를 꼽자면 제 생각에도 build file 진단이 좋을 것 같네요.
3. 라이브러리를 사용함으로써 오히려 성능 개선에 도움이 될 것 같아서, 대체하지 않는 편이 좋은 것 같아요!