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

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" 입니다!)

프리로드 되는 시점이 저 폰트쪽인거같은데 ..하나 안하나 비슷해서 여쭤봅니다~!

Answer

안녕하세요, jjongrrr님,

[1]

일반적으로 jquery(jquery 뿐만아니라 대부분의 스크립트)는 사전에 로드하지 않습니다.
그래서 문서 마지막에 두거나 defer를 걸어줘야합니다.
그렇지 않다면... 조금 문제가 있는 사이트 같네요. (직접 해당 페이지의 성능을 검사해보시면 정말 문제가 되는지 확실히 알 수 있을 것 같습니다.)

또한, 당장 jquery가 필요없다면 필요할 때 로드할 수 있도록 지연로딩을 해두는 것도 좋습니다.

[2]

네, 맞습니다. 첫 페이지의 리소스 외에는 지연로딩하는 것이 첫 페이지를 로드하는 성능에서는 유리합니다.
다만, 첫 페이지 이후, 사용자의 활동 과정에서 다른 리소스들이 바로 떠있지 않게되면 오히려 UX에는 좋지 않을 수 있습니다.
이건 서비스의 성격에 따라, 리소스의 중요도에 따라 결정하시면 될 것 같습니다.

[3]

해당 부분은 실제 코드가 어떻게 되어 있는지를 몰라서, 그리고 해당 환경에서 여러 방식으로 테스트 해본게 아니라 정확하게 확인이 어려울 것 같습니다.
다만 몇가지 고민해볼 수 있는건 as 속성을 넣지 않았기 때문에 생기는 현상일 수도 있다는 것과,
왜 font가 우선 로드되는 것인지(폰트가 프리로드 되고 있는건 아닌지 의심되네요) 등 일 것 같습니다.

참고: https://web.dev/i18n/ko/preload-critical-assets/

답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

jjongrrr

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

이 글과 비슷한 Q&A

router 이동 질문 드립니다.

Product 컨트롤러 api 결과값 리턴 질문

Like 검색으로 구현하려면 어떻게 하면 될까요?

코드 제공 되나요?