👩‍💻 리소스 최적화 결과 (Mobile: 93점, Desktop: 97점)

📈 웹 성능 평가 도구

[개발자 도구] Lighthouse : 로컬에서 개발할 때 참고하는 용도
[성능 측정 도구]
- debugbear : 로딩 성능을 분석 및 다양한 성능 지표 참고
- PageSpeed Insights : 실제 사용 환경과 유사한 조건에서 성능 측정
  
  Mobile 점수
  
  Desktop 점수

✅ 카테고리별 리소스 최적화 과정

1. 폰트

웹 폰트 OR 로컬 폰트
- 디자인이 강조되는 작업이 아닐경우, 로드 속도 측면에서 판단
- 웹 폰트를 반드시 사용해야할 경우, preconnect 를 이용해서 빠르게 로드
- 웹 폰트의 경우, 일반적으로 50-100 KB 이하의 크기가 이상적
  1. 적용 폰트: Spoqa Han Sans Neo
    
    Spoqa Han Sans Neo
  2. [로컬폰트 → 웹폰트] 웹폰트로 변경
    1. 기존에 사용하던 Local 폰트 용량이 너무 커서 (Pretendard: 267KB) 웹 폰트로 변경
    2. CDN을 사용하여 폰트를 직접 서브하여 사용 (subset 폰트 사용)
      
      스포카 한 산스 웹폰트로 사용하기
[디자인 소통] OTF와 TTF 그리고 WOFF와 WOFF2
1. OTF 🆚 TTF
  - OTF(Open Type Font) : 마이크로 소프트와 어도비가 함께 만든 폰트
    - 벡터기반으로, 고화질 폰트, 고품질, 용량이 커서 TTF에 비해 무겁다.
    - 고품질 인쇄나 고화질이 필요한 그래픽 디자인에 사용
  - TTF(True Type Font) : 마이크로소프트와 애플이 만든 폰트
    - 비트맵 기반으로, 모니터용 작업에 최적화된 폰트, 로딩이 빠름, 가볍다.
    - 웹, 문서 등에 사용
2. WOFF 🆚 WOFF2
  - WOFF, WOFF2는 웹에서 폰트를 효율적으로 제공하기위한 두가지 폰트 형식
  - 페이지 로딩 속도를 개선, 다양한 브라우저와 장치에서 호환하도록 설계됨
  1. WOFF (Web Open Font Format)
    - TTF와 OTF 형식의 폰트를 기반으로 하지만, 압축되어 웹에 적합하게 최적화된 파일
    - 대부분의 브라우저에서 지원, 특히 구형 브라우저에서도 폭넓게 호환
  2. WOFF2
    - WOFF의 후속 버전, 더욱 향상된 압축 알고리즘을 사용
    - WOFF보다 약 30% 더 작은 파일 크기를 제공, 이는 페이지 로딩 속도를 더욱 개선
    - WOFF2는 최신 브라우저에서 지원, 일부 구형 브라우저에서는 지원되지 않을 수 있음
Subset 폰트 🆚 Variables 폰트
- 사용하는 폰트 종류는 1개만 사용
- Variables는 여러가지 font weight를 포함하고 있기때문에 subset보다 용량이 큼
- Variables 1개보다 필요한 굵기의 subset 폰트를 선택적으로 사용하는게 점수 개선에 도움이 됨
  - 👉 실제로 사용할 리소스만 채택, 폰트 종류는 1개로 고정 (Pretendard)
- font-display: swap;
  - 폰트 로딩 동안 사용자에게 텍스트 콘텐츠가 표시
- src : woff2와 woff 형식을 제공 → 다양한 브라우저에서 지원하는 최적의 폰트 파일을 사용
```
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src:
    local('Pretendard Regular'),
    url(/fonts/Pretendard-Regular.subset.woff2) format('woff2'),
    url(/fonts/Pretendard-Regular.subset.woff) format('woff');
}
```
[참고] Next.js에서 리소스를 프리로드(Preload) 방법
- 🙅‍♀️ 개선 과정에서 발견한 방법이나 사용하지는 않음
  - 폰트 preload와 font-face을 선언한 global.css 를 함께 사용해봄
  - preload가 될 뿐, 사용되지 않아 warning 발생
    
    The resource [URL] was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally
- 폰트를 브라우저가 우선적으로 다운로드하고 처리하도록 지시
  1. 리소스 프리로드용 client 컴포넌트를 별도 생성 (폰트말고 다른것도 추가 가능)
    - ✅ Next.js에서 메타데이터를 제외하고, head 태그 내부에 link를 추가하는 방법
    - as: 리소스의 유형을 지정
    - type: 리소스의 MIME 타입을 지정
```
'use client'
import ReactDOM from 'react-dom'

export function PreloadResources() {
  ReactDOM.preload('/fonts/Pretendard-Regular.subset.woff2', {
    as: 'font',
    type: 'font/woff2',
    fetchPriority: 'high',
  })

  return null
}
```
  2. 루트 경로의 layout.tsx에 프리로드 컴포넌트를 호출하여 head 내부에 적용
```
export default async function RootLayout({ children }: Readonly<RootLayoutType>) {
  return (
    <>
	    {/* 리소스 프리로드 컴포넌트 */}
      <PreloadResources />
      
      <html lang="ko">
	      <body>
		      {children}
	      </body> 
      </html>
    </>
  )
}
```

2. 이미지

이미지 압축 → 경량화
- 이미지 리소스를 Webp 확장자로 추출한 후, TinyPNG 웹사이트를 이용하여 이미지 압축
- [참고] 이미지 CDN 서비스도 함께 제공, 업로드하면 자동으로 압축(첫 업로드 500장 이미지, 매월 무료)
  
  TinyPNG – Compress WebP, PNG and JPEG images intelligently
CDN 사용
- [프로젝트 사용] Supabase Storage
  - DB 서비스와 함께 통합 개발 환경 → 관리 간편화, 개발 과정 간소화
[참고] 반응형 이미지
Next.js Image 컴포넌트 사용