[온라인 쇼핑몰 속도 최적화] 필요한 원본에 미리 연결

 

목차

 

💡 필요한 원본에 미리 연결하면 페이지 성능에 어떤 영향을 줍니까?

💡 Preconnect를 유의해서 사용하세요

💡  필요한 원본에 미리 연결을 설정하는 방법은 무엇입니까?

 

---

 

 

preconnect를 사용하면 브라우저가 중요한 타사 연결을 우선순위로 처리하고, 타사 요청이 오래 걸릴 수 있는 경우 페이지 로드 속도를 높일 수 있습니다.
외부 리소스(예: Facebook 또는 YouTube 임베드)는 도메인에서 가져오지 않기 때문에 동작을 예측하기 어려울 수 있으며 사용자의 페이지 경험에 부정적인 영향을 미칠 수 있습니다.
웹 페이지에서 사용되는 외부 리소스(예: 이미지, 스크립트, 스타일 시트)가 필요할 때 그 리소스가 있는 원본 서버로 사전에 연결을 설정하는 것을 의미합니다. 이렇게 하면 웹 페이지가 해당 리소스를 필요로 할 때, 브라우저는 이미 해당 원본과 연결이 설정되어 있으므로 리소스를 빠르게 가져올 수 있습니다.

 

 

---

 

💡 필요한 원본에 미리 연결하면 페이지 성능에 어떤 영향을 줍니까?

기본적으로 외부 리소스 요청은 느린 네트워크, 긴 DNS 조회, 다중 리디렉션, 느린 서버, 낮은 성능의 CDN 등과 같은 여러 가지 이유로 페이지 로드를 느리게 만들 수 있습니다.

필요한 원본에 미리 연결하면 아래와 같이 몇가지 이점이 있습니다.

 

1. 로딩 속도 개선
필요한 리소스가 저장된 원본과 사전에 연결을 설정하면, 브라우저가 해당 리소스를 빠르게 가져올 수 있습니다. 이로 인해 웹 페이지가 더 빨리 로드되며 사용자는 페이지를 더 빠르게 볼 수 있습니다.
2. 연결 지연 감소
브라우저는 사전에 원본과의 연결을 설정하므로 필요한 리소스를 요청할 때 추가적인 연결 지연이 없어집니다. 이것은 웹 페이지의 로딩 시간을 단축시키고 사용자 경험을 향상시킵니다.
3. 프리페치와 조합
필요한 리소스를 사전에 연결하는 것은 프리페치(prefetch)와 함께 사용될 수 있습니다. 프리페치는 리소스를 미리 다운로드하여 브라우저 캐시에 저장하는 것인데, 사전에 연결된 리소스는 프리페치가 더 효과적으로 작동할 수 있도록 도와줍니다.
4. 전반적인 사용자 경험 향상
페이지의 로딩 속도 개선과 연결 지연 감소는 사용자들에게 더 빠른 웹 경험을 제공합니다. 웹 페이지가 더 빨리 반응하고 콘텐츠가 더 빨리 로드되므로 사용자는 페이지를 보다 편안하게 탐색할 수 있습니다.

preconnect는 외부 리소스 요청의 출처는 알지만 실제 리소스 자체가 무엇인지 모를 때 유용합니다. 이는 페이지가 다른 출처에 연결하려는 의도를 브라우저에 알리고 이 프로세스를 가능한 빨리 시작하길 원한다는 것을 알려줍니다

 

 

---

 

💡 Preconnect를 유의해서 사용하세요

 

● preconnect는 타사 리소스에만 효과적입니다.
preconnect는 주로 타사(외부) 리소스를 빠르게 가져오기 위해 사용됩니다. 여기서 "타사 리소스"란 여러분의 웹 페이지 서버가 아닌 외부 도메인에서 제공되는 리소스를 의미합니다.

● preconnect를 사용할 때 주의해야 합니다. 
왜냐하면 preconnect가 CPU 시간을 소비하고, 특히 안전한 연결(HTTPS)에서는 다른 중요한 리소스의 로딩을 지연시킬 수 있기 때문입니다.

● 브라우저 연결 제한
브라우저는 10초 이내에 사용되지 않는 연결을 닫습니다. 따라서 preconnect는 주로 타사 도메인에서 중요한 리소스를 가져올 때만 사용해야 합니다.

● DNS 조회 시간을 줄이기 위해 dns-prefetch 사용
그 외의 타사 리소스에 대해서는 dns-prefetch를 사용하여 DNS 조회 시간을 줄일 수 있습니다. 이것은 브라우저가 리소스를 찾는 데 도움을 줍니다.

 

 

요약하면,
preconnect를 사용할 때 타사 리소스를 빠르게 가져오는 데 주의를 기울여야 합니다. 
preconnect는 주로 외부 도메인에서 중요한 리소스를 가져올 때 사용되며, 
다른 리소스에 대해서는 dns-prefetch와 같은 기술을 사용하여 DNS 조회 시간을 줄일 수 있습니다.

 

 

---

 

💡  필요한 원본에 미리 연결을 설정하는 방법은 무엇입니까?

외부 리소스가 중요한지 여부에 따라 해당 리소스의 링크 태그에 preconnect 또는 dns-prefetch를 추가하는 방법을 설명해드리겠습니다.

예를 들어, 다음과 같은 타사 리소스 목록이 있다고 가정해봅시다

1. 중요한 리소스 (예: 메인 스타일을 제공하는 CDN)

2. 중요하지 않은 리소스 (예: 소셜 미디어 위젯)

리소스의 중요성에 따라 preconnect 또는 dns-prefetch를 추가하는 방법은 다음과 같습니다

 

1) 중요한 리소스에 대해 Preconnect 사용(사전 연결 설정)

여기서 중요한 리소스인 main.css의 로딩 속도를 향상시키기 위해 https://cdn.example.com 도메인과의 사전 연결을 설정하고 있습니다.

2) 중요하지 않은 리소스에 대해 dns-prefetch 사용 (DNS 조회 시간 감소)

이 경우 중요하지 않은 리소스인 widget.js를 위해 https://widget.example.com 도메인의 DNS 정보를 미리 가져오도록 브라우저에 지시하고 있습니다. 이렇게 하면 브라우저는 필요할 때 DNS 조회 시간을 줄일 수 있지만 연결을 설정하는 데는 시간을 소비하지 않습니다.

이렇게 각 리소스의 중요성에 따라 preconnect 또는 dns-prefetch 태그를 타사 리소스의 링크에 추가함으로써 리소스 로딩을
최적화할 수 있습니다. 

 

 

중요한 리소스는 사전 연결을 통해 빠르게 가져오고, 
중요하지 않은 리소스는 DNS 조회 시간을 줄이면서 전체 연결 설정을 피하므로 웹 페이지의 성능과 사용자 경험을 향상시킬 수 있습니다.