최적화에 대해서 질문있습니다~~

Question

안녕하세요 강의 잘 듣고 있습니다! 강의 들으며 테스트도 해보고 기술블로그도 보면서 사이트 분석하고 있는데요 ..! 질문1) 몇몇 사이트에서 jquery min 같은 라이브러리 압축파일을 사전로드 하는 것 같은데 defer를 걸어 다운로드 후 실행하는 것이 아닌 다운로드 만 하는 것은 HTML 파싱을 막지 않기 때문에 성능에는 지장이 없어서 사전 다운로드 받는걸까요 ? (필요에 의해서) 어떤 블로그에서 보니 병렬다운로드를 하면 한번에 많은 것을 다운받기 때문에 전체적으로 느려져, 필요한 파일만 병렬다운로드 받는게 효과적이라고 봤는데 그렇다면 jquery가 나중에 필요하다면 나중에 다운로드 받게끔 하는게 맞는걸까요 ? 질문2) 최적화 방법중 가장 중요한게 필요한 파일은 미리받고 필요없는 파일은 나중에 받는게 효과적이라고 봤는데요 ! 그렇다면 메인 첫화면에 필요한 image, css, js 등은 preload로 사전로드 시키고 나중에 필요한 image, css, js는 지연로딩 시키는게 맞을까요 ? 질문3) preload 되는 시점이 궁금해요 어떤 블로그에서는 퍼포먼스탭에 표시되기 전에 다운로드받아 캐시에 저장해놓고 실제 퍼포먼스탭에서 다운받는건 캐시에서 받는거라는 말도 있고 ...아니면 하단 스크린샷처럼 index.html파일을 받은 직후에 일어나는게 preload 시점일까요 ? 그럼 css는 preload 시켜도 왜 퍼포먼스탭에서 다운로드와 파싱 시점은 거의 변하지 않을까요 ..? ㅠ (프리로드 넣은게 더 늦는거같아요.. 피시 태블릿 css는 rel="stylesheet" 입니다!) 프리로드 되는 시점이 저 폰트쪽인거같은데 ..하나 안하나 비슷해서 여쭤봅니다~!

hackurity01 · Answer

안녕하세요, jjongrrr님, [1] 일반적으로 jquery(jquery 뿐만아니라 대부분의 스크립트)는 사전에 로드하지 않습니다. 그래서 문서 마지막에 두거나 defer를 걸어줘야합니다. 그렇지 않다면... 조금 문제가 있는 사이트 같네요. (직접 해당 페이지의 성능을 검사해보시면 정말 문제가 되는지 확실히 알 수 있을 것 같습니다.) 또한, 당장 jquery가 필요없다면 필요할 때 로드할 수 있도록 지연로딩을 해두는 것도 좋습니다. [2] 네, 맞습니다. 첫 페이지의 리소스 외에는 지연로딩하는 것이 첫 페이지를 로드하는 성능에서는 유리합니다. 다만, 첫 페이지 이후, 사용자의 활동 과정에서 다른 리소스들이 바로 떠있지 않게되면  오히려 UX에는 좋지 않을 수 있습니다. 이건 서비스의 성격에 따라, 리소스의 중요도에 따라 결정하시면 될 것 같습니다. [3] 해당 부분은 실제 코드가 어떻게 되어 있는지를 몰라서, 그리고 해당 환경에서 여러 방식으로 테스트 해본게 아니라 정확하게 확인이 어려울 것 같습니다. 다만 몇가지 고민해볼 수 있는건 as 속성을 넣지 않았기 때문에 생기는 현상일 수도 있다는 것과, 왜 font가 우선 로드되는 것인지(폰트가 프리로드 되고 있는건 아닌지 의심되네요) 등 일 것 같습니다. 참고: https://web.dev/i18n/ko/preload-critical-assets/   답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)