HTML preload와 preconnect 차이, 웹폰트와 리소스는 언제 먼저 불러와야 할까?

기술정보 26.08.13 조회 23

홈페이지를 열었을 때 화면은 보이는데 웹폰트가 늦게 적용되거나, 아이콘·이미지가 뒤늦게 나타나는 경우가 있습니다. 이런 차이는 작아 보여도 첫 화면의 완성도와 로딩 체감에 영향을 줄 수 있습니다.

이때 확인해볼 수 있는 HTML 리소스 힌트가 preload와 preconnect입니다.

핵심은 간단합니다. preload는 특정 파일을 미리 불러오게 하는 방식이고, preconnect는 외부 도메인 연결을 미리 준비하게 하는 방식입니다.

웹폰트나 첫 화면 이미지처럼 빠르게 필요한 파일은 preload를 검토하고, 외부 폰트·CDN처럼 외부 주소 연결이 필요한 경우에는 preconnect를 검토할 수 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 웹폰트, 이미지, CSS, JavaScript, 외부 CDN 리소스를 함께 확인하게 됩니다. 이때 리소스를 모두 같은 우선순위로 보기보다, 첫 화면에 필요한 것과 나중에 필요한 것을 나눠 보는 것이 좋습니다.

preload는 특정 파일을 먼저 불러오는 방식입니다

preload는 현재 페이지에서 곧 필요할 리소스를 브라우저가 더 일찍 발견하고 가져올 수 있도록 알려주는 방식입니다.

예를 들어 첫 화면에서 중요한 웹폰트를 미리 불러오고 싶다면 아래처럼 작성할 수 있습니다.

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

여기서 as="font"는 해당 리소스가 폰트라는 것을 알려주는 역할을 합니다. 이미지라면 as="image", 스타일시트라면 as="style"처럼 리소스 종류에 맞게 지정해야 합니다.

웹폰트처럼 별도 요청 조건이 필요한 리소스는 crossorigin도 함께 확인해야 합니다. 설정이 맞지 않으면 미리 불러온 폰트를 다시 요청하는 상황이 생길 수 있습니다.

preconnect는 외부 주소 연결을 미리 준비하는 방식입니다

preconnect는 특정 외부 도메인에 미리 연결을 준비하도록 브라우저에 알려주는 방식입니다.

예를 들어 외부 폰트 서비스를 사용한다면 아래처럼 작성할 수 있습니다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

브라우저가 외부 리소스를 가져오려면 주소를 찾고, 서버와 연결하고, 보안 연결을 준비하는 과정이 필요합니다. preconnect는 이 준비를 조금 더 일찍 시작하게 도와줍니다. 즉, preload가 특정 파일을 먼저 가져오는 것이라면, preconnect는 특정 외부 주소에 미리 연결해두는 방식에 가깝습니다.

preload와 preconnect 차이 정리

둘은 비슷해 보이지만 적용 기준이 다릅니다.

preload: 특정 파일을 먼저 불러오고 싶을 때
preconnect: 외부 도메인 연결을 미리 준비하고 싶을 때
preload 예시: 웹폰트 파일, 첫 화면 이미지, 핵심 CSS
preconnect 예시: 외부 폰트, CDN, 외부 스크립트 도메인

중요한 것은 둘을 많이 넣는 게 아니라, 실제로 첫 화면에 필요한 리소스인지 확인하는 것입니다.

웹폰트와 첫 화면 이미지에 어떻게 활용할까요?

웹폰트는 preload와 preconnect를 함께 고민하게 되는 대표적인 리소스입니다.

직접 호스팅하는 폰트라면 첫 화면에서 바로 쓰이는 핵심 폰트 파일에 preload를 검토할 수 있습니다. 외부 폰트 서비스를 사용한다면 해당 도메인에 preconnect를 검토할 수 있습니다.

이미지도 경우에 따라 preload를 사용할 수 있습니다. 특히 첫 화면의 메인 비주얼 이미지가 CSS background-image로 들어가 있다면 브라우저가 해당 이미지를 늦게 발견할 수 있습니다.

<link rel="preload" href="/images/main-visual.jpg" as="image">

다만 모든 배너 이미지와 섹션 이미지를 미리 불러올 필요는 없습니다. 첫 화면에서 바로 보이는 핵심 이미지인지, 실제로 로딩 체감에 영향을 주는지 확인한 뒤 적용하는 것이 좋습니다.

너무 많이 넣으면 오히려 부담이 될 수 있습니다

preload와 preconnect는 브라우저에게 “이 리소스가 중요할 수 있다”고 알려주는 힌트입니다. 그런데 너무 많은 리소스에 이 힌트를 주면 어떤 파일이 진짜 중요한지 흐려질 수 있습니다.

예를 들어 폰트 여러 개, 이미지 여러 개, 스크립트 여러 개를 모두 preload하면 초기 로딩에 부담이 생길 수 있습니다. preconnect도 실제로 중요하지 않은 외부 도메인까지 모두 연결하면 불필요한 준비 작업이 늘어날 수 있습니다.

그래서 적용 전에는 아래 기준을 확인하는 것이 좋습니다.

첫 화면에서 바로 필요한 리소스인가?
브라우저가 늦게 발견할 가능성이 있는가?
웹폰트라면 crossorigin 설정이 필요한가?
as 값이 리소스 종류에 맞는가?
너무 많은 파일에 적용하지 않았는가?
적용 후 실제 로딩 체감이 좋아졌는가?

디자인키트 템플릿 수정 시 확인할 부분

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때는 먼저 <head> 영역과 리소스 연결 구조를 확인하는 것이 좋습니다.

메인 화면에 쓰이는 웹폰트가 있는지, 외부 CDN에서 아이콘이나 라이브러리를 불러오는지, 첫 화면 이미지가 HTML 이미지인지 CSS 배경 이미지인지 확인하면 preload와 preconnect를 적용할 후보를 찾기 쉽습니다.

예를 들어 메인 타이틀에 쓰이는 핵심 웹폰트는 preload를 검토할 수 있고, 외부 폰트 도메인은 preconnect를 검토할 수 있습니다. 반면 페이지 아래쪽에서만 쓰이는 이미지나 효과 스크립트는 먼저 불러올 필요가 없는 경우도 있습니다.

자주 묻는 질문

Q. preload와 preconnect를 같이 써도 되나요?

같이 사용할 수 있습니다. 다만 역할은 다릅니다. preload는 특정 파일을 먼저 불러오는 방식이고, preconnect는 외부 도메인 연결을 미리 준비하는 방식입니다.

Q. 웹폰트는 무조건 preload 해야 하나요?

아닙니다. 첫 화면에서 바로 쓰이는 핵심 폰트라면 검토할 수 있지만, 모든 폰트 파일을 preload하면 오히려 초기 로딩 부담이 커질 수 있습니다.

Q. preload를 넣었는데도 빨라지지 않을 수 있나요?

그럴 수 있습니다. 이미 브라우저가 충분히 빨리 발견하는 리소스라면 효과가 크지 않을 수 있습니다. 실제 적용 후에는 성능 측정과 화면 표시 상태를 함께 확인해야 합니다.

리소스는 먼저 불러올 것과 나중에 불러올 것을 나눠야 합니다

홈페이지 로딩 최적화는 모든 파일을 빠르게 불러오는 작업이 아닙니다. 사용자가 처음 보는 화면에 필요한 리소스는 먼저 준비하고, 나중에 필요한 리소스는 기본 로딩 흐름에 맡기는 작업에 가깝습니다.

preload는 중요한 파일을 브라우저가 더 빨리 발견하도록 도와주고, preconnect는 외부 리소스의 연결 준비를 미리 시작할 수 있게 해줍니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 웹폰트, 이미지, CSS, JavaScript, 외부 CDN 리소스를 함께 확인하게 됩니다. 이때 preload와 preconnect의 차이를 이해하고 적용할 리소스를 구분하면 템플릿 구조를 유지하면서도 더 안정적인 로딩 구성을 검토할 수 있습니다.

작성자: 디자인키트

발행일: 2026.08.13

최종 수정일: 2026.08.13

블로그 전체목록

최근 포스트