온라인 쇼핑몰 메인페이지 속도개선 팁 부탁드려요~~~ 꾸벅

Question

제가 생각하는 속도가 느린이유를 말씀드리자면1. 여러가지의 목록을 불러오고 목록에 많은 이미지를 포함- 여러 목록을 불러오는 쿼리가 일단 매우 복잡해서 서버에서 응답자체가 오래걸리고 이미지를 랜더링하는데 시간이 오래걸리는것 같아요.쿼리는 너무 복잡하게 되어있어서 건들면 큰일날것같고 이미지 받아오는 부분을 어떻게 해보려고 생각 중입니다.이미지는 AWS S3에서 가져오고, png보다는 대부분 jpg가 많았습니다. s3에서 jpg -> png 로 바꾸면 빠를까요? 그리고 그런 방법이 있나요?2. jstl 사용으로 페이지를 세팅함 ( Controller에서 Model에 세팅하고 jsp를 리턴하는 방식. ajax 미사용)- 모든 작업이 끝난 후 응답페이지를 만들어주다보니 사용자가 느끼는 시간이 엄청 길것같다는 생각입니다.구조가 jstl , vue.js 가 짬뽕되어있는데 먼저 목록이 세팅되어지지 않은 상태에서 페이지를 반환한 후 ajax로 목록을 요청하여 받아오는 식으로 바꾸어 보았는데 큰 속도차이는 느끼지 못하였고 바꿀부분이 너무많아 이부분은 살짝 손 놓았습니다..3. 다수의 css, js 파일 import- war file을 생성할 때 css, js 파일을 minify (compress) 하여 빌드하는 방식을 적용해보려고 하였습니다.maven을 사용중이라 관련해서 적용하는 것을 찾던 중에YUI Compressor를 적용하려고 시도하였으나 매뉴얼대로 해보고 별짓을 다해봤지만 잘 되지않았습니다 ㅠㅠ(참고한 페이지 : https://www.baeldung.com/maven-minification-of-js-and-css-assets) 혹시 제가 디렉토리 경로설정을 잘못한걸까요.. 선택경로 밑에 js 파일을 min 파일로 바꾼다는 설정에 경로를${basedir}/src/main/webapp/resources로 주었습니다. &#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;질문이 너무 많죠..? 아무 말씀이라도 해주세요 감사히 듣겠습니다 도와주세요!!~~~~

어쩌다프로그래머 · Answer

메인 페이지호출시 처리하는 쿼리에는 문제가 없나요...?이미지는 천천히 로딩이되더라도 페이지는 천천히라도 그려질태지만가장 비용이 큰부분은 디비부분이라

siva6 · Answer

1은 cloudfront를 쓰는게 좋을 것 같습니다.

ryankim777 · Answer

어쩌다님맞아요 디비에서 부터 오래걸려버리는게 문제인데.. 당장 해결은 불가능해보여요 ㅠㅠ siva6님찾아보다가 슬쩍 본것같은데 자세히 한번 볼께요 감사합니다!

너무그러지마렴 · Answer

메인 페이지에 걸리는 제품 이미지를 적당한 크기로 줄이고 썸네일 이미지로 이미지 파일 크기를 작게 만들면 좋을 것 같습니다. 그리고 메인에 걸리는 제품 목록을 한번에 불러오지 말고 사용자 화면에 보이는 부분만 가져온 후 마우스 스크롤 등으로 포커싱이 이동할 때 동적으로 목록이나 이미지를 띄우는 것도 방법이 될 수 있을 것 같네요.

ryankim777 · Answer

너무그러지마렴님두가지 방법 모두 적용 가능할것 같네요 찾아보겠습니다 감사합니다~

더미 · Answer

네이버 기술 블로그를 보면 도움될 내용이 많을겁니다,

ryankim777 · Answer

더미님오! 좋은 의견 감사합니다

온라인 쇼핑몰 메인페이지 속도개선 팁 부탁드려요~~~ 꾸벅

7개의 답변

#images 목록