nextjs/google-font-preconnect 정확성
작동 방식
<link> 태그를 통해 구글 폰트를 사용할 때, rel="preconnect"의 존재를 강제합니다.
왜 문제가 될까?
구글 폰트를 사용할 경우, 필요한 원본에 조기에 연결을 설정하기 위해 사전 연결(예: preconnect) 리소스 힌트를 포함하는 것이 권장됩니다.
preconnect가 없으면 브라우저는 폰트 파일을 다운로드하기 전에 DNS 조회, TCP 핸드셰이크, TLS 협상 과정을 거쳐야 하며, 이는 폰트 로딩 지연을 유발하고 성능에 부정적인 영향을 미칠 수 있습니다.
예시
이 규칙에 대한 잘못된 코드 예시:
javascript
<link href="https://fonts.gstatic.com" />
<link rel="preload" href="https://fonts.gstatic.com" />이 규칙에 대한 올바른 코드 예시:
javascript
<link rel="preconnect" href="https://fonts.gstatic.com" />사용 방법
이 규칙을 구성 파일 또는 명령줄 인터페이스에서 활성화하려면 다음을 사용할 수 있습니다:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/google-font-preconnect": "error"
}
}bash
oxlint --deny nextjs/google-font-preconnect --nextjs-plugin