preload
<link>의 rel 속성 중 preload를 사용하면 특정 리소스를 빠르게 불러올 수 있습니다. <head> 태그 사이에 우선 로딩할 리소스를 작성하면 브라우저 주요 렌더링 절차가 개입하기 전 페이지 생명주기의 초기에 리소스를 불러옵니다.
<head>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="app.js" as="script">
</head>href: 특성에 리소스의 경로를 명시해야 합니다.
as: 특성에 리소스의 유형을 명시해야 합니다.
사용예시
<!DOCTYPE html>
<html>
<head>
<title>Preloading Images Example</title>
<link rel="preload" href="example.jpg" as="image">
</head>
<body>
<h1>Preloading Images Example</h1>
<p>Here is an example image:</p>
<img src="example.jpg" alt="Example Image">
</body>
</html>