웹사이트를 운영하다 보면 PC나 모바일 어디서든 로딩이 묘하게 느려질 때가 있죠. 이런 지연 현상은 SEO에도 꽤 큰 영향을 미치게 되는데요, 오늘은 핵심 리소스를 중심으로 DNS를 최적화해서 체감 속도와 페이지 경험 점수를 높이는 방법을 이야기해 볼게요.
우리가 인터넷 주소창에 영문으로 된 도메인 이름을 입력하지만, 사실 컴퓨터는 숫자로 된 IP 주소로 소통하거든요. 사람이 보기 편한 도메인을 컴퓨터가 아는 IP로 바꿔주는 게 바로 DNS(도메인 네임 시스템)예요. 모바일 페이지 속도를 높이려면 이 주소를 찾아 바꾸는 시간을 줄이는 게 정말 중요해요.
DNS 최적화로 페이지가 빨라지는 원리
앞서 말했듯이 DNS는 인터넷상의 주소록 같은 역할을 해요. 우리가 ‘example.com’이라고 치면 컴퓨터는 ‘192.0.2.1’ 같은 숫자로 번역해서 찾아가죠. DNS 최적화는 이 번역 과정을 미리미리 준비해서 검색 엔진 속도를 높이는 방법 중 하나예요.
보통 내 사이트 안의 정보뿐만 아니라 외부 사이트의 폰트나 이미지를 가져올 때 속도가 느려지곤 해요. 이렇게 제3자 도메인을 불러올 때 생기는 지연을 줄이는 게 요즘 웹사이트 관리의 핵심이라고 볼 수 있어요.
브라우저가 외부 정보를 가져오려고 기다리는 시간이 길어지면 화면이 늦게 뜨는 ‘렌더링 차단’ 현상이 생겨요. 당연히 검색 엔진 점수도 떨어지고 방문자들도 답답해할 수밖에 없겠죠?
두 가지 핵심 기술: Prefetch와 Preconnect
속도를 높이는 기술은 크게 두 가지가 있는데, 어떤 차이가 있는지 표로 정리해 봤어요.
| 기술 이름 | 주요 역할 | 어느 단계에서 쓰나요? | 추천하는 상황 |
|---|---|---|---|
| DNS Prefetch | 도메인을 IP로 미리 변환 | DNS 조회 단계 | 외부 링크가 많을 때 |
| Preconnect | DNS 조회부터 연결 설정까지 | 전체 연결 단계 | 정말 중요한 핵심 서버 |
로딩 시간을 줄여주는 실전 설정 방법
외부 자료를 가져올 때 버벅거리지 않도록 미리 준비시키는 방법인 DNS Prefetch와 Preconnect를 어떻게 쓰는지 알려드릴게요. 이 두 가지만 잘 활용해도 구글의 핵심 웹 지표인 LCP 점수를 좋게 만드는 데 큰 도움이 돼요.
미리 주소를 찾아두는 Prefetch
Prefetch는 방문자가 클릭할 것 같은 리소스를 브라우저가 미리 살짝 불러오게 만드는 거예요. 특히 DNS-prefetch는 외부 사이트의 도메인 이름과 IP 주소를 미리 연결해 둬서 나중에 불필요한 대기 시간을 없애줍니다.
외부 이미이나 링크가 많은 블로그 같은 곳에서 쓰면 체감 속도가 확실히 달라지는 걸 느낄 수 있어요. HTML 코드에 아래처럼 넣어주면 되는데, 주로 외부 리소스를 많이 쓰는 주소를 적으면 돼요.
<link rel="dns-prefetch" href="https://tistory1.daumcdn.net/" />
<link rel="dns-prefetch" href="https://t1.daumcdn.net/" />
<link rel="dns-prefetch" href="https://blog.kakaocdn.net/" />
<link rel="dns-prefetch" href="https://developers.kakao.com/" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
연결까지 미리 해두는 Preconnect
Preconnect는 단순히 주소만 찾는 게 아니라 서버랑 연결까지 미리 맺어두는 더 강력한 방법이에요. 보통 이런 일들을 미리 처리해 줘요.
- 도메인 이름을 IP로 바꾸는 과정
- 데이터를 주고받을 길을 만드는 TCP 연결
- 보안 연결이 필요할 때 TLS(SSL) 인증 과정
구글 폰트처럼 사이트가 뜨자마자 꼭 필요한 리소스에 사용하면 좋아요. 코드는 이렇게 작성하면 돼요.
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<link rel="preconnect" href="https://cdn.example.com" crossorigin />
설정할 때 주의할 점도 있어요
- 욕심부려서 너무 많이 쓰지 않기: 좋다고 해서 모든 외부 도메인에 다 걸어버리면, 브라우저가 한꺼번에 너무 많은 일을 하려다 오히려 인터넷이 느려질 수 있어요.
- 진짜 중요한 것만 골라서: 자주 쓰는 외부 도메인이나 화면을 띄우는 데 없으면 안 되는 리소스에만 딱 적용하는 게 효율적이에요.
- 결과는 꼭 확인하기: 적용한 뒤에 구글 PageSpeed Insights 같은 도구로 점수가 정말 올랐는지, LCP 시간이 줄었는지 확인해 보는 게 좋아요.
자주 묻는 질문 (FAQ)
Q1. DNS 최적화가 SEO에 정말 도움이 되나요?
그럼요. 구글은 페이지가 얼마나 빨리 뜨는지를 순위 매길 때 중요하게 봐요. DNS 최적화로 첫 반응 시간(TTFB)을 줄이면 검색 결과에서 더 좋은 점수를 받을 수 있어요.
Q2. 둘 중에 뭘 먼저 써야 하나요?
폰트나 API 서버처럼 ‘이거 없으면 화면이 깨진다’ 싶은 중요한 곳에는 Preconnect를 쓰시고요, 그 외에 자잘한 외부 링크들에는 DNS Prefetch를 쓰는 게 네트워크 자원을 아끼는 길이에요.
Q3. 모든 브라우저에서 다 되나요?
크롬, 엣지, 사파리 같은 요즘 브라우저들은 대부분 지원해요. 혹시 아주 옛날 브라우저라도 그냥 이 코드를 무시할 뿐이라서 사이트가 고장 나거나 하지는 않으니 안심하고 쓰셔도 돼요.
빠른 웹사이트는 방문자들도 좋아하지만, 검색 엔진도 참 좋아해요. 외부 자료를 많이 가져다 쓰는 요즘 같은 환경에서는 이런 웹 성능 최적화가 선택이 아닌 필수가 된 것 같아요.
- DNS Prefetch로 외부 주소 미리 알아오기
- Preconnect로 서버랑 미리 인사해두기
- 꼭 필요한 곳에만 써서 과부하 막기
이렇게만 챙겨도 검색 엔진 최적화(SEO)와 로딩 속도 두 마리 토끼를 잡을 수 있어요. 내 사이트가 조금 무겁게 느껴진다면 오늘 바로 DNS 최적화 코드를 한 줄 추가해 보는 건 어떨까요?
