August 2024
Beginner to intermediate
384 pages
7h 38m
Korean
Content preview from 자바스크립트 + 리액트 디자인 패턴
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
Start your free trial
322
자바스크립트 + 리액트 디자인 패턴
12.10
로딩 우선순위
로딩 우선순위 패턴은 필요하다고 예상되는 특정 리소스를 우선적으로 요청하도록 설정합
니다.
Preload
(
<
link
rel
="
preload
">
)는 브라우저의 최적화 기능으로, 브라우저가 늦게 요청
할 수도 있는 중요한 리소스를 더 일찍 요청할 수 있도록 합니다. 주요 리소스의 로딩 순서를
수동으로 지정한다면, 핵심 웹 지표
Core
Web
Vitals
(
CWV
)의 로딩 성능 및 지표에 긍정적인 영향
을 미칠 수 있습니다. 하지만
preload
가 만능은 아니며, 몇 가지 트레이드오프를 고려해야
합니다.
<link rel="preload" href="emoji-picker.js" as="script" />
...
</head>
<body>
...
<script src="stickers.js" defer></script>
<script src="video-sharing.js" defer></script>
<script src="emoji-picker.js" defer></script>
TTI
Time
to
Interactive
또는
FID
First
Input
Delay
와 같은 지표를 최적화할 때
preload
는 상호작용에
필요한 자바스크립트 번들 (또는 청크
chunk
)을 로드하는 데 유용합니다. 단, ...