breeze cache Preload로 웹사이트 속도 높이기

DNS Prefetch 란? #

DNS Prefetch는 외부 리소스를 불러오는 도메인에 대해 브라우저가 미리 DNS 조회를 수행하여 페이지 로딩 속도를 개선할 수 있는 기능입니다.

외부 리소스란? #

외부 리소스란 웹페이지가 로딩될 때, 해당 서버(자신의 서버)가 아닌 다른 서버에서 가져오는 파일이나 데이터를 의미합니다. 웹사이트를 구성할 때, 자주 사용하는 외부 리소스는 다음과 같은 것들이 있습니다:

1. **cdn(Content Delivery Network)**을 통해 불러오는 리소스 #

• CSS 파일: 웹사이트의 스타일을 정의하는 외부 스타일시트 파일.
  • 예: //fonts.googleapis.com에서 제공되는 Google Fonts
• JS 파일: 웹사이트의 기능을 구현하는 자바스크립트 파일.
  • 예: //cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js에서 제공되는 jQuery

2. 외부 API #

• **API(Application Programming Interface)**는 다른 서버에서 데이터를 불러오는 인터페이스입니다. 예를 들어, 날씨, 뉴스, 또는 외부 시스템과 통신하여 데이터를 가져오는 경우.
  • 예: //api.example.com/data/weather에서 날씨 데이터를 가져오는 API 요청

3. 이미지나 미디어 파일 #

• 자신의 서버가 아닌 다른 서버에서 호스팅되는 이미지, 비디오, 또는 오디오 파일을 말합니다.
  • 예: //cdn.example.com/images/logo.png

4. 폰트 #

• 외부 리소스로 불러오는 웹 폰트. 자주 사용되는 외부 웹 폰트는 Google Fonts입니다.
  • 예: //fonts.googleapis.com/css?family=Roboto

5. 광고 및 트래킹 스크립트 #

• Google AdSense, Facebook Pixel 같은 트래킹 코드나 광고 스크립트도 외부 리소스에 포함됩니다.
  • 예: //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
    
     

왜 외부 리소스를 사용할까? #

1. 성능 개선: cdn(Content Delivery Network) 같은 네트워크는 여러 지역에 분산된 서버에서 리소스를 제공하기 때문에, 사용자가 더 가까운 서버에서 리소스를 빠르게 다운로드할 수 있습니다.
2. 재사용: 자주 사용하는 라이브러리나 폰트 등을 여러 사이트에서 동일한 외부 리소스 URL로 호출하면, 사용자 브라우저가 한 번 다운로드한 리소스를 캐시에 저장해두고, 다른 사이트에서 다시 다운로드하지 않으므로 로딩 시간을 줄일 수 있습니다.
3. 저장 공간 절약: 자신의 서버에 모든 리소스를 호스팅하지 않고, 외부에서 불러오면 저장 공간과 대역폭을 절약할 수 있습니다.

요약: #

외부 리소스는 웹사이트를 만들 때, 자신이 운영하는 서버가 아닌 다른 서버에서 불러오는 리소스를 의미합니다. CDN을 통해 제공되는 CSS, JS, 이미지, 폰트 파일이나 외부 API 요청이 그 예에 해당합니다. DNS Prefetch를 설정하면 이러한 외부 리소스의 DNS 요청을 미리 처리해 페이지 로딩 속도를 개선할 수 있습니다.

현재 페이지에서 사용중인 외부 리소스를 확인하는 방법 #

 

방법 1: Chrome 개발자 도구 사용 #

1. 개발자 도구 열기
   • 웹페이지에서 F12 또는 Ctrl + Shift + I를 눌러 개발자 도구를 엽니다.
2. 네트워크 탭으로 이동
   • 개발자 도구에서 Network(네트워크) 탭을 선택합니다.
3. 페이지 새로고침
   • 네트워크 탭이 열려있는 상태에서 페이지를 새로고침(F5 또는 Ctrl + R)하면, 페이지가 로드되면서 발생하는 모든 네트워크 요청이 리스트에 표시됩니다.
4. 외부 리소스 확인
   • 네트워크 탭에서 나오는 각 요청의 도메인을 확인합니다.
   • 자신의 도메인과 다른 도메인에서 리소스를 불러오는 요청이 있다면, 그것이 외부 리소스입니다.
   예를 들어, 아래와 같은 항목들은 외부 리소스에 해당할 수 있습니다:
   • fonts.googleapis.com (Google Fonts)
   • cdn.jsdelivr.net (JS/CSS 라이브러리)
   • google-analytics.com (Google Analytics)
5. 요청된 리소스 필터링
   • 개발자 도구의 필터(Filter) 기능을 활용해 리소스 유형별로 필터링할 수 있습니다.
     • CSS: 스타일시트 파일만 보고 싶다면 “CSS” 필터를 클릭
     • JS: 자바스크립트 파일만 보고 싶다면 “JS” 필터를 클릭
     • Images: 이미지 파일만 보고 싶다면 “Images” 필터를 클릭
6. 외부 리소스 URL 확인
   • 각 요청의 Name(이름) 항목을 클릭하면, 요청이 어디에서 왔는지 세부 정보가 표시됩니다.
   • 이 정보를 통해 페이지에서 사용하는 외부 리소스를 확인할 수 있습니다.

방법 2: View Page Source (페이지 소스 보기) #

1. 페이지 소스 보기:
   • 웹페이지에서 마우스 오른쪽 버튼을 클릭하고 **’페이지 소스 보기’**를 선택합니다.
   • 또는 Ctrl + U를 눌러 직접 소스 코드를 확인할 수 있습니다.
2. 외부 리소스 URL 찾기:
   • HTML 코드 내에서 <link>, <script>, <img>, <iframe> 같은 태그들을 찾아봅니다.
   • 이 태그들에 포함된 href나 src 속성에서 외부 URL이 있는지 확인하세요.
     • 예: <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.min.js"></script>
     • 예: <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
3. 필터링하여 외부 도메인 확인:
   • HTML 파일 내에서 https:// 또는 //로 시작하는 경로를 찾으면 외부 리소스 경로임을 알 수 있습니다.

예시: #

• Google Fonts: <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
• Google Analytics: <script src="https://www.google-analytics.com/analytics.js"></script>
• cdn(Content Delivery Network): <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

요약: #

• 개발자 도구의 네트워크 탭을 통해 페이지에 로드되는 모든 리소스와 그 출처를 확인할 수 있습니다.
• 페이지 소스 보기로도 외부 리소스의 경로를 직접 확인할 수 있습니다.
• 외부 리소스는 주로 다른 도메인(예: cdn, API, 외부 서비스)에서 제공하는 파일들로, 이를 통해 웹페이지가 더 빠르게 로드되거나 기능이 추가될 수 있습니다.

이 방법을 사용해 현재 페이지에서 불러오는 외부 리소스를 쉽게 확인할 수 있습니다.

DNS Prefetch 설정 방법: #

1. 입력란에 도메인 추가:
   • 외부 리소스(예: 서드파티 API, 폰트, 이미지 호스팅 등)를 사용하는 경우, 해당 리소스의 도메인 URL을 한 줄에 하나씩 입력합니다.
   • 예를 들어://fonts.googleapis.com //cdnjs.cloudflare.com //example-cdn.com 과 같이 입력합니다.
   • 각 도메인은 `//`로 시작하며, `http`나 `https` 없이 도메인만 입력하는 형식을 사용합니다.
2. 사용 목적:
   • 서드파티 콘텐츠 로드 최적화: 외부 도메인에서 불러오는 리소스가 많은 경우, 브라우저가 해당 도메인에 대한 DNS 정보를 미리 요청하여 리소스 로딩 시간을 단축할 수 있습니다. 이를 통해 폼메일 페이지나 외부 리소스를 불러오는 페이지의 **초기 로딩 속도**를 개선할 수 있습니다.
3. 추가 설정 고려 사항:
   • 외부 리소스를 많이 사용하는 페이지에서는 DNS Prefetch를 사용하면 성능이 개선될 수 있습니다. 하지만 모든 도메인을 추가할 필요는 없습니다. 실제로 사용되는 외부 리소스에 대해서만 추가하는 것이 좋습니다. 이 설정을 통해 페이지 로딩 속도를 개선할 수 있으며, 특히 폼메일 페이지와 같은 외부 리소스를 사용하는 페이지에 유용하게 적용될 수 있습니다.

DNS Prefetch의 속도 개선 효과? #

DNS Prefetch 설정만으로는 로딩 속도를 획기적으로 개선하기 어려울 수 있습니다. 이는 브라우저가 외부 리소스를 미리 불러오는 과정을 최적화하는 것일 뿐, 로딩 속도에 영향을 미치는 다양한 요인이 있기 때문입니다. 다음은 추가로 고려할 수 있는 최적화 방법들입니다.

1. Lazy Loading: #

• 이미지나 비동기식 자바스크립트 로딩을 사용해 필요한 리소스만 먼저 로드하고, 화면에 나타나는 시점에서 나머지 리소스를 로딩합니다.
• Breeze 플러그인에도 Lazy Load 옵션이 있으므로 이를 활성화해보세요.

2. 파일 압축 및 최소화: #

• CSS, JS 파일의 크기를 줄이는 작업을 통해 로딩 속도를 개선할 수 있습니다.
• Breeze의 Minify CSS/JS 기능을 활용하여 파일 크기를 줄여보세요.
• 또한, Gzip 압축이 서버에서 설정되어 있는지 확인하십시오.

3. 브라우저 캐싱: #

• 외부 리소스를 캐시하여 사용자 브라우저가 동일한 리소스를 재요청하지 않도록 설정할 수 있습니다.
• Breeze에서 Browser Cache 기능을 활성화하여 사용자 브라우저에 리소스를 캐시하도록 설정합니다.

4. cdn 사용: #

• 외부 리소스는 cdn(Content Delivery Network)을 통해 전송 속도를 향상시킬 수 있습니다.
• 클라우드플레어 cdn 외에도 리소스를 효율적으로 제공할 수 있는 다른 cdn을 추가로 사용하는 것을 고려해보세요.

5. 비동기 및 지연 로딩: #

• 외부 리소스 중 페이지 렌더링에 필수적이지 않은 리소스는 async 또는 defer 속성을 사용하여 비동기로 로딩할 수 있습니다. 이는 브라우저가 중요한 리소스부터 로딩한 후 나머지를 로딩하도록 만듭니다.

6. 불필요한 리소스 제거: #

• 현재 불필요한 외부 스크립트나 스타일이 포함되어 있지는 않은지 검토해보고, 필요하지 않은 경우 해당 리소스를 제거해 페이지 로딩 속도를 개선할 수 있습니다.

이 방법들을 종합적으로 적용하면, 로딩 속도가 더 개선될 가능성이 높습니다.