링크 유형: preload

[innerstella]

mdn docs

link 요소의 rel 특성의 preload 값은 HTML의 에서 가져오기 요청을 선언할 수 있게 해주며, 페이지에서 즉시 필요로 할 리소스를 명시할 수 있습니다. 이러한 리소스는 브라우저의 주요 렌더링 절차가 개입하기 전에 페이지 생명주기의 초기에서 불러오고자 하는 리소스입니다. 이는 해당 리소스들을 더 빨리 사용할 수 있게 하고, 페이지의 렌더링을 막을 가능성이 낮아져 성능이 향상됩니다.

[innerstella]

javascript로만 preload를 한다면,

const preload = (images) => {
    images.forEach((image) => {
        const img = new Image();
        img.src = image;
    });
};

link 태그 preload를 같이 사용하면

const preload = (images: string[]) => {
  images.forEach((image) => {
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'image';
    link.href = image;
    document.head.appendChild(link);
  });
};

• Image() 객체 대신 엘리먼트를 생성
• rel="preload"와 as="image" 속성을 설정하여 브라우저에게 이미지 리소스임을 알림
• document.head에 추가하여 브라우저가 우선순위를 높게 처리하도록 함

장점

• 브라우저의 preload scanner가 더 일찍 리소스를 발견할 수 있음
• 네트워크 우선순위가 더 높아짐
• 리소스 힌트를 명시적으로 제공함