Frontend/웹최적화 (4) 썸네일형 리스트형 [웹팩] html onclick 조심하기 웹팩으로 빌드를하려면 js안에 HTML을 넣어야하는데 그렇다보니 innerHtml과 같은 방식을 사용해야해서 문자열로 html을 넣어주게되는데 이때 onclick을 사용하면 자바스크립트함수도 문자열처리가되어 먹지를 않는다. ${}로 해줘도 최초 로드시에 한번만 실행되는것 같음. 그냥 click eventListener로 해결 이미지 src경로비교 aws외부링크 vs 내부경로 이미지 src를 넣는 방법이 다양한데 문득 궁금해져서 직접 실험해 보았다. AWS s3에 이미지를 업로드한뒤에 그 링크를 넣고 로드 시간을 측정해보았다. const bg = `` 다음은 위의 코드를 주석처리하고 파일은 동일하되 내부 public폴더내에 있는 이미지를 불러왔다. const bg = `` 의외의 결과로 내부경로가 조금더 로딩 속도를 감소시켰다. 혹시 이미지 용량도 속도에 영향을 미칠까? 위의 이미지의 용량은 1mb로 같은 사이즈이지만 300kb로 최적화한이미지를 웹팩을 돌려 비교해보았다. 여러번 로딩해본결과 크게 차이는 없었다. 제이쿼리 최초 로딩시간 제이쿼리 로딩시간 문득 제이쿼리가 최초 로드시간에 미치는 영향이 궁금하였다. jquery cnd으로 스크립트를 첨부하고 최초 로드하는데 거의 1초가 육박한다. 물론 100% 제이쿼리때문만은 아니고 이미지파일, js파일, 다른 라이브러리도 들어있다. 이를 줄여보고자 js안에 import하여서 웹팩 빌드를 시도했다. 파일크기는 88kb이다. import $ from './jquery-3.6.0.min.js' js에 제이쿼리 내장후 웹팩 빌드 결과는 대략 744밀리초가 나왔다. import말고 script src로 경로를 설정하고 웹팩 빌드해보았는데 로드시간은 비슷하게 나왔다. 문득 아예 제이쿼리를 제거하면 얼마나 걸리나 궁금해서 제거하고 측정해보았다. 개인적인 실험 결과 제이쿼리를 첨부하면 대략 0.2초~0.. 웹 디자이너 요청사항 1. 용량최적화 포토샵에 save for web으로 용량최적화는 필수이다. 1mb만 넘어도 최초로딩시에 깜박이는 듯한 느낌을 지울 수 없다. 직접 측정한결과 이미지용량이 최초로딩속도에 영향을 미치는것같지는 않지만 이미지가 보여지기까지 시간이 걸리기 때문에 이미지퀄리티가 저하되지않는선에서 작은사이즈가 좋다. 2. 사이즈 특별한경우가 아니고서야 1920넘지말것 넘은것과 비교해보았는데 화질차이는 크게 느껴지지않았다. 넘을수록 사이즈만 커짐 3. 파일 이름 통일 숫자나 아무이름 붙이고 주는경우가 있는데.. 되도록 logo_blabla.jpg 혹은 bg-blabla.jpg이런식으로 앞에 어떤건지 분간할 수 있도록. 이전 1 다음
