웹 성능 최적화

저는 현재 CS Broker라는 AI로 서술형을 채점해주는 Computer Science 문제풀이 사이트를 개발중이며 웹 프론트엔드를 홀로 맡고 있습니다. 외로아요열심히 개발해서 서술형, 객관식, 단답형 문제풀이나 채점도 가능하고, 마이페이지에서 어떤 문제를 풀었는지도

가장 눈에 띄는 것은 이미지의 로딩 속도였습니다. 따라서 lighthouse에서 이미지 관련 항목들을 살펴보니 두가지가 보였습니다.이미지에 width, height 속성 부여이미지 확장자 png -> webp로 변경따라서 웹 페이지 내의 모든 이미지에 적절한 width

react-material-ui-carousel 라이브러리를 사용해 넣어놓았던 메인페이지, 문제 목록 페이지의 캐러셀을 직접 구현하기로 했습니다. 이유는 다음과 같습니다.최적화를 하기로 하며 결정한 사항인만큼 번들 사이즈를 줄이려는 목적이 있었습니다.첫 로딩시에 캐러셀