목차
💡 중요 요청을 미리 로드하면 페이지 성능에 어떤 영향을 줍니까?
중요한 요청을 미리 로드 하는 것은 웹 사이트를 빠르게 로드하기 위해 필요한 중요한 자원들을 사전에 미리 로드하는 것을 의미합니다. 이렇게 하면 사용자가 웹 페이지를 방문할 때 필요한 자원들이 미리 다운로드되어 빠르게 화면에 표시되므로 웹 페이지가 빠르게 로드되는 것처럼 느껴집니다.
CSS 및 JavaScript 파일과 같은 중요한 리소스를 사전로드함으로써 브라우저는 이를 미리 가져와 지연 시간을 줄이고 전반적인 성능을 향상시킬 수 있습니다. <link rel="preload">를 사용하면 중요한 요청을 높은 우선순위로 처리하여 페이지 로드 속도를 높일 수 있습니다.
이는 중요 자원이 때로는 페이지 로드 과정의 늦은 시점에 요청되며, 브라우저가 해당 자원을 요청 체인에서 발견하기 전까지는 존재를 알지 못할 수 있기 때문입니다.
💡 중요 요청을 미리 로드하면 페이지 성능에 어떤 영향을 줍니까?
중요 요청 미리 로드는 페이지에서 필수적인 자원을 사전에 로드하여 페이지 로딩 시간을 단축시킬 수 있습니다. 이는 사용자가 페이지를 방문했을 때 더 빠른 페이지 로딩과 응답성을 제공하는 데 도움이 됩니다.
1. 로딩 속도 개선
Preload를 사용하여 중요한 자원을 미리 가져오면, 이 자원들이 더 빠르게 다운로드되어 웹 페이지가 더 빨리 로드됩니다. 사용자는 웹 페이지를 빠르게 보고 상호 작용할 수 있어 더 나은 사용자 경험을 얻게 됩니다.
2. Critical Rendering Path 최적화
Preload는 웹 페이지의 중요한 자원을 로드하기 때문에 크리티컬 랜더링 패스(Critical Rendering Path)를 최적화하는 데 도움이 됩니다. 이로써 웹 페이지가 초기 화면을 더 빨리 표시하고 렌더링할 수 있습니다.
3. 서버 부하 감소
Preload를 사용하면 필요한 자원을 미리 가져오기 때문에 웹 서버의 부하가 분산되고 서버 응답 시간이 감소합니다. 이는 웹 사이트의 전반적인 성능을 향상시키는 데 도움이 됩니다.
4. 사용자 경험 향상
늦게 로드되는 자원을 미리 가져오면 페이지가 완전히 로드될 때까지 사용자가 빈 화면을 보는 시간이 줄어듭니다. 사용자는 더 빠르게 콘텐츠를 볼 수 있으므로 웹 페이지를 더 즐겁게 사용할 수 있습니다.
5. SEO 개선
Preload를 사용하면 웹 페이지의 중요한 자원이 빠르게 로드되므로 검색 엔진이 페이지를 색인화할 때 이러한 자원을 놓치지 않습니다. 이는 검색 엔진 최적화(SEO)에 도움이 되어 웹 페이지의 검색 엔진 순위를 향상시킬 수 있습니다.
요약하면, 중요 요청 미리 로드를 사용하면 웹 페이지의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다. 중요한 자원을 미리 가져오므로 웹 페이지 로딩 시간이 단축되고, 사용자는 더 빠르게 콘텐츠를 볼 수 있습니다. 또한 서버 부하가 감소하고 SEO에도 긍정적인 영향을 미칩니다.
"preload"는 브라우저에게 리소스를 가져오도록 지시하는 방법 중 하나로, 브라우저가 스스로 찾아내는 것보다 리소스를 더 빨리 가져오도록 합니다. 이것은 해당 리소스가 중요하다고 확신할 때 사용합니다.
예를 들어, 폰트와 이미지와 같은 리소스는 CSS 내부에서 참조될 수 있습니다. 비슷하게 JavaScript는 JSON, 가져온 스크립트 또는 웹 워커와 같은 다른 리소스를 요청할 수 있습니다.
이로 인해 "크리티컬 리퀘스트 체인(critical request chain)"이 발생합니다.
뿐만 아니라 중요한 리소스를 포함하는 크리티컬 리퀘스트 체인에서 크거나 늦게 로드되는 요청을 실행하면 상당한 시간 지연이 발생할 수 있습니다. 그러므로 "<link rel="preload">"를 사용하면 위의 두 경우 모두 페이지 로드를 크게 빠르게 할 수 있습니다. 이렇게 하면 브라우저가 페이지를 더 빠르게 렌더링하고 사용자 경험을 향상시키는 데 도움이 됩니다.
💡 중요 요청을 미리 로드하는 방법은 무엇입니까?
HTML 헤더에 <link rel="preload"> 을 추가하고 as 속성을 사용하여 리소스 유형을 지정하면 브라우저에게 이 사전로드된 리소스를 캐시하도록 지시하여 이후 방문 시 즉시 사용할 수 있도록 합니다.
preload는 또한 페이지 로드 과정을 더욱 세밀하게 제어할 수 있게 해줍니다. 스크립트를 미리 다운로드하지만 나중에 실행할 수 있습니다. 이렇게 하면 스크립트가 페이지 로드의 중요한 단계에서 메인 스레드를 차단하지 않으므로 사용자가 페이지와 더 빠르게 상호작용할 수 있습니다.
웹 페이지에서 중요 요청을 미리 로드 하는 몇 가지 다른 방법이 있습니다.
● rel 속성이 "preload"로 설정된 <link> 태그를 사용하는 것입니다.
이 방법을 사용하면 CSS 파일, JavaScript 파일, 글꼴 및 이미지와 같은 리소스를 사전로드할 수 있습니다.
● CSS 파일에서 @font-face 규칙을 사용하여 폰트 미리 로드하기.
이 방법을 사용하면 웹 페이지에서 사용되는 사용자 정의 폰트를 미리 로드할 수 있습니다.
● CSS 파일에서 background-image 속성을 사용하여 이미지 미리로딩하기.
이 방법은 웹 페이지에서 사용하는 배경 이미지를 미리로딩할 수 있게 해줍니다.
● WordPress(또는 기타 CMS) 사용자는 플러그인을 사용하여 스타일시트, 글꼴 등과 같은 특정 파일 유형을 미리 로드할 수 있습니다. 사전 로드 설정에서 사전 로드할 자체 호스팅 글꼴을 지정할 수도 있습니다.
'E-커머스 쇼핑몰 운영' 카테고리의 다른 글
| [온라인 쇼핑몰 속도 최적화] 패시브 이벤트 리스너를 사용하여 스크롤 성능 향상 (1) | 2024.10.28 |
|---|---|
| [온라인 쇼핑몰 속도 최적화] Third-party 코드의 영향 감소 (1) | 2024.10.26 |
| [온라인 쇼핑몰 속도 최적화] JavaScript 실행 시간 단축 (1) | 2024.10.24 |
| [온라인 쇼핑몰 속도 최적화] 필요한 원본에 미리 연결 (3) | 2024.10.23 |
| [온라인 쇼핑몰 속도 최적화] Facades를 사용하여 외부(Third-party) 리소스를 지연 로드 (2) | 2024.10.22 |