마지막 강의 js파일로 바꿀 시 스크롤 프레임 렉? 버벅임?

Question

마지막 강의에서 올리신 js파일로 바꾸니 애니메이션이 들어가있는 section 0, 2에서 터치패드로 스크롤 시 멈추는 부분에서 몇프레임 앞뒤 왔다갔다 하는 현상이 좀 심하게 발생합니다. 이전만큼 부드럽게 진행이 되지 않고 좀 간격이 넓게 스크롤 되는 느낌입니다. 이미지 로딩 후 정렬 때문에 이렇게 되는건가요? 아니라면 혹시 팁을 좀 주실 수 있나요? 다시 확인해본 바 새로고침을 하면 이러한 문제가 사라지긴 합니다만 원인을 잘 모르겠네요. 좀 더 알아보겠습니다. 제가 진행한 파일입니다! https://leealvinlee.github.io/Leeum_Maurizio_Catellan/

stu · Answer

엇 이거 저도 답변 남겨도 되나요? 님 크롬 브라우저의 라이트 하우스 에서 검사 돌려보세요. 대량의 이미지가 로드가 되는데, 그 중 불필요하게 사이즈가 커서 용량을 차지하는 것하고, 이미지 로드가 실패해서 괜히 홈페이지 렌더링에 불필요한 시간 소요가 발생해서 버벅임이 심한 것 같아여. 첫 로드 시에는 파일 다운로드로 시간이 잡아 먹는 것 땜에 렉이 심하고 두 번째 부터도 일부 렌더링에 버벅임이 지속 발생하는데 이미지 로드가 안 되는 부분이 좀 큰 것 같아여. 그 외 버벅임은 용량이 너무 커요. 최적화가 필요할 것 같아여, 글고 몇 몇 이미지 파일(?.)이 불필요하게 사이즈가(사진크기) 너무 커요. 즉 화면에 굳이 그렇게 크게할 필요가 없는 이미지 파일이 너무 크게 설정되어 있어서 괜히 렌더링에 방해가 되고 있어요. 이 부분도 고려해보셔야 할 것 같아여.

studiomeal · Answer

아무래도 스크롤 동작과 아랫 부분 이미지를 로딩하는 부분이 겹치면서 그런 현상이 발생할 수 있을 것 같습니다. 브라우저들이 이미지를 최초로 로드하는 경우에 특히 자원을 많이 쓰는 경향이 있더라고요. 더 좋은 해결 방법이 있는지 저도 연구를 좀 해보도록 하겠습니다^^
와, 그나저나 프로젝트 페이지 너무 멋지게 구성하셨네요!! 😍