728x90
반응형
<link rel="preconnect"> 설명
1. 개념 및 역할
- **<link rel="preconnect">**는 브라우저가 외부 서버와 미리 연결하도록 지시하는 HTML 태그입니다.
- 외부 리소스(예: 폰트, 이미지, API 등)를 불러올 때 DNS 조회, TLS 핸드셰이크, 연결 설정 시간을 단축시켜 페이지 로딩 속도를 개선합니다.
- 즉, 서버와의 연결을 미리 준비해두어 사용자가 웹사이트를 더 빠르게 이용할 수 있도록 합니다.
2. 코드 분석
html
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- https://fonts.googleapis.com : 구글 폰트의 CSS를 가져오는 도메인
- https://fonts.gstatic.com : 폰트 파일을 호스팅하는 실제 서버 도메인
- crossorigin : 다른 도메인에서 리소스를 가져오므로 CORS (Cross-Origin Resource Sharing) 정책에 따라 이 옵션을 추가합니다.
- crossorigin을 지정하지 않으면, 브라우저는 기본적으로 same-origin 정책을 따릅니다.
3. 동작 방식
- 사용자가 웹 페이지를 방문하면, 브라우저는 해당 서버와 연결하고 리소스를 다운로드하는 데 시간이 걸립니다.
- preconnect를 사용하면 페이지가 완전히 로드되기 전에 필요한 서버와 미리 연결합니다.
- 예를 들어, Google Fonts와 같은 리소스를 빠르게 불러옵니다.
4. preconnect와 dns-prefetch 차이
| 속성 | 설명 | 사용예시 |
| preconnect | 서버 연결(HTTP 요청 이전) 미리 수행 |
<link rel="preconnect" href="https://cdn.example.com"> |
| dns-prefetch | DNS 조회만 미리 수행 | <link rel="dns-prefetch" href="//cdn.example.com"> |
- **dns-prefetch**는 DNS 조회만 하고, 서버와 연결을 설정하지 않습니다.
- **preconnect**는 DNS 조회 + TLS 연결까지 수행하여 더 빠르게 리소스를 불러옵니다.
5. preconnect가 필요한 경우
- 웹 폰트, CDN, 외부 API, 광고 스크립트 등 외부 서버에서 리소스를 로드하는 경우.
- 사이트에서 외부 리소스가 많을수록 preconnect는 효과적입니다.
- 사용자가 처음 접속했을 때 빠르게 콘텐츠를 표시해야 할 때 사용됩니다.
6. 실제 사용 예시 (Google Fonts 불러오기)
html
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> </head>
- preconnect를 사용해 폰트 서버에 미리 연결해둔 뒤, 폰트를 불러오는 CSS를 링크합니다.
- 이렇게 하면 폰트 로딩 속도가 빨라지고, 웹 페이지의 초기 로딩 시간이 단축됩니다.
7. 성능 향상 효과
- FCP (First Contentful Paint), 즉 페이지가 처음으로 화면에 렌더링되는 시간을 줄이는 데 도움을 줍니다.
- 특히 웹 폰트, 이미지, 비디오 등 대용량 외부 리소스를 불러오는 경우 성능 개선이 두드러집니다.
8. 주요 포인트
- preconnect는 사용자가 보기도 전에 서버와 연결을 준비하는 역할을 합니다.
- CORS 문제를 방지하기 위해 외부 리소스에는 crossorigin 속성을 추가하는 것이 중요합니다.
- 성능 최적화를 위한 HTML5의 필수 태그 중 하나로, 웹사이트의 속도 개선에 적극 활용됩니다.
728x90
반응형
'IT공부' 카테고리의 다른 글
| [지식루프의 웹개발공부] CSS 선택자 (0) | 2025.01.05 |
|---|---|
| [지식루프의 웹개발공부] 블록(block) 요소와 인라인(inline) 요소의 차이 (0) | 2025.01.02 |
| [지식루프의 웹개발공부] padding과 margin의 차이 (0) | 2024.12.31 |
| [지식루프의 웹개발공부] HTML <link> 태그의 rel 속성 (0) | 2024.12.31 |
| [지식루프의 웹개발공부] CSS에서 id와 class의 차이 (0) | 2024.12.30 |
