이미지 fetchpriority로 빠르게 불러오기

프로젝트 진행 중 상단 NavBar의 유저 프로필 img가 페이지 전환할 때마다 뒤늦게 Load되는 이슈를 발견했습니다.

 

프로필 이미지는 이미 리사이즈 되어 작은 파일로 데이터를 주고받고 있어서 로드 우선순위를 위로 올리는 방법이 적당하다고 생각했고, MDN에서는 아직은 실험적인 기술이라고 소개하지만, 괜찮은 메서드가 있어서 적용해보기로 했습니다.

 

 

적용전 프로필이미지의 Priority가 "Low"로 자동 설정된 것을 확인할 수 있었습니다.

 

 

<img src={fileUrl || noUser} fetchpriority="high" alt="프로필 이미지" />

fetchpriority="high"로 img 태그에서 사용할 수 있는데, 기본값은 "auto"이고, 낮은 우선순위는 "low", 높은 우선순위는 "high"로 값을 지정할 수 있습니다.

 

하지만 진행중인 프로젝트는 타입스크립트를 사용하고 있고, 타입스크립트는 해당 태그를 지원하지 않았습니다.

 

해결 방법은 커스텀 속성 파일을 생성하여 tsconfig.json에 포함시켜 주는 것입니다.

// src/types/custom.d.ts
import 'react';

declare module 'react' {
  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
    fetchpriority?: 'high' | 'low' | 'auto';
  }
}

//tsconfig.json
{
  "compilerOptions": {
//    (생략)
  },
  "include": ["src/types"]
}

 

그래도 eslint의 에러메시지가 사라지지 않아서 추가적으로 .eslintrc.json파일에 해당 메시지가 뜨지 않도록 처리해주었습니다.

// .eslintrc.json
{
  // (생략)
  "rules": {
    "react/no-unknown-property": ["error", { "ignore": ["fetchpriority"] }]
  }
}

 

수정 후 프로필이미지의 Priority가 "High"로 변경된 것을 확인할 수 있었습니다.

 

유저정보를 불러오는 데 아직 최적화가 이루어지지 않아서인지, 아쉽게도 Time은 2배 이상으로 늘어났습니다.

이 부분도 차근차근 해결해나갈 예정입니다..!