웹 페이지 로딩 속도 개선을 위해 작업 도중,
내가 사용했던 요소들을 간단히 정리해보려고 합니다!
fetchpriority
- fetchpriority는 HTML의
<img>태그에서 사용할 수 있는 속성이다. - 이미지 리소스의 다운로드 우선순위를 지정하는 데 사용한다. 웹 페이지에서 이미지 리소스의 로딩 순서와 우선순위를 제어할 수 있다.
- fetchpriority 속성은 'low', 'medium', 'high'의 세 가지 값 중 하나를 갖는다.
- 높은 우선순위를 지정할수록 이미지 리소스가 더 빠르게 로딩된다.
- 웹 페이지의 뷰포트에 먼저 나타나는 이미지에 대해서 'high' 우선순위를 지정하여 빠르게 리소스를 가져올 수 있다.
- 예를 들어 메인 화면에 나오는 캐러셀 같은 슬라이드의 경우 아래와 같이 최적화하는 것이 좋겠다.
<div class="carousel">
<img fetchpriority="high" />
<img fetchpriority="low" />
<img fetchpriority="low" />
...
</div>preload
- preload는 HTML
<link>태그에서 사용할 수 있는 속성이다. - 웹 페이지에서 리소스를 사전에 로드한다. 이를 통해 웹 페이지 로딩 시에 필요한 리소스를 미리 다운로드하여, 로딩 속도를 향상시킬 수 있다.
- 브라우저가 웹 페이지 로딩 중에 리소스를 사전에 다운로드하므로, 사용자가 웹 페이지를 접속했을 때 로딩 시간을 단축시킬 수 있다.
<link rel="preload" href="/path/to/resource" as="type">-
위의 예시에서는 /path/to/resource 경로에 위치한 리소스를 type 타입으로 사전에 로드하도록 지정하고 있다. type은 로드할 리소스의 종류를 지정하며, 주로 style, script, image, font 등이 사용된다.
-
다음과 같은 경우에 사용한다.
- 웹 페이지 초기 로딩 속도를 개선하고 사용자 경험을 향상시키고 싶은 경우
- 로딩 시간이 긴 리소스를 사용하는 경우: 큰 이미지, 긴 스크립트, 폰트와 같이 로딩 시간이 긴 리소스를 사용하는 경우
- 우선순위가 높은 리소스를 로드하고 싶은 경우: 웹 페이지에서 우선적으로 로드되어야 하는 리소스가 있는 경우
prefetch
- prefetch는 브라우저에게 이미지 리소스를 사전에 미리 가져오도록 지시하는 HTML 태그의 속성이다.
- 브라우저가 페이지를 로드할 때 미리 가져와야 할 리소스를 지정하는 데 사용한다.
- 이는 브라우저가 사용자가 링크를 클릭하기 전에 미리 필요한 리소스를 미리 가져오도록 할 수 있으므로, 사용자 경험을 향상시키고 페이지 로딩 시간을 단축한다.
- 브라우저가 페이지의 렌더링을 방해하지 않고 리소스를 미리 가져온다.
<link rel="prefetch" href="path/to/resource">- href 속성에는 미리 가져올 리소스의 URL이 지정되며, 다른 속성은 사용하지 않는다.
preload와 prefetch는 무엇이 다른가?
- 로딩 시기
- preload는 현재 페이지의 리소스 로딩에 사용되며, 현재 페이지의 로딩이 완료되기 전에 필요한 리소스를 미리 로딩하여 현재 페이지의 로딩에 도움을 준다.
- prefetch는 다음 페이지나 현재 페이지에서 필요한 리소스를 미리 로딩하여 다음 페이지의 로딩 속도를 개선하는 데 사용된다.
- 우선순위
- preload는 현재 페이지의 리소스를 높은 우선순위로 로딩하여, 다른 리소스보다 먼저 로딩될 수 있도록 지정한다.
- prefetch는 높은 우선순위로 로딩되지 않으며, 브라우저가 리소스를 미리 로딩하는 것을 결정한다.
- 사용범위
- preload는 일반적으로 현재 페이지의 필수 리소스를 미리 로딩하여 로딩 속도를 향상시키는 데 사용한다.
- prefetch는 현재 페이지나 다음 페이지에서 필요한 리소스를 미리 로딩하는 데 사용되며, 다음 페이지의 로딩 속도를 개선하는 데 사용한다.
웹 퍼블리셔의 코딩 일기