-
Preload의 개념, 그리고 올바른 사용법개발 블로깅/기타 개념 2021. 9. 5. 00:54
웹 사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하게 되고 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다.
이때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 Pre Load를 지정하는 방식이다.
Head 태그에 빠르게 로딩시킬 파일을 Pre Load로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행하게 된다.
<head> <link rel="preload" as="script" href="super-important.js"> <link rel="preload" as="style" href="critical.css"> </head>한번 해당 기능이 어떻게 동작하는지 확인해보자.
const JenkinsLogo= () => { return ( <img src={'/static/images/jenkins.png'} width='400' height='260'/> ); }; export default JenkinsLogo;간단하게 Next.js 환경에서 jenkins.png 파일을 img 태그를 통해 화면에 띄우는 코드를 돌려보았다.
적용 전
네트워크 탭을 확인해보니, 우선적으로 Next.js에서 서버 사이드 렌더링한 document를 먼저 보내준 뒤, 해당 페이지에 필요로 한 js 코드들을 우선적으로 로딩한다. 그리고 이후에 jenkins.png 이미지 소스를 요청하여 다운로드되었다.
리소스 요청에 대해서 더 자세히 파악하고 싶다면, performance 탭을 이용하면 된다.
빨간색 박스로 표시한 부분이 jenkins.png 로딩이 언제, 얼마나 걸렸는지를 보여주는 부분인데, 해당 이미지 이전에 document와 관련 JS 파일이 먼저 요청된 것을 확인할 수 있다.만약 해당 이미지를 먼저 요청하고 싶을 때는 어떻게 하면 될까? 이때 PreLoad를 이용하면 해당 이미지 소스를 우선적으로 로드하게 된다.
import Head from 'next/head'; const JenkinsLogo= () => { return ( <> <Head> <link rel="preload" href={'/static/images/jenkins.png'} as="image" /> </Head> <img src={'/static/images/jenkins.png'} width='100%'/> </> ) }; export default JenkinsLogo;위 코드는 Next.js에서 제공하는 Head 태그를 통해 간단히 선언하였는데, 만약 next.js 환경이 아니면 실제 태그가 선언되어있는 HTML 코드 쪽에 선언을 하면 된다.
적용 후
해당 이미지를 Pre Load 적용 후 다시 페이지 요청을 해보니, 이전과 다르게 젠킨스 이미지가 우선적으로 요청이 된 것을 확인할 수 있다.
지금까지는 PreLoad가 무엇인지 간략히 소개하였고, 아래에서부터는 PreLoad를 올바르게 사용하기 위한 글을 적어보려고 한다.
불필요한 리소스에 PreLoad는 걸지 않기
우선 PreLoad로 선언되는 순간, 해당 소스가 실제로 사용하든 하지 않든 무조건 서버로부터 요청하여 다운로드를 하게 된다.
예시로, 위 코드에서 추가로 github.png를 PreLoad 하도록 설정해보았다.
페이지에서는 젠킨스 이미지만 사용하고 있으나, 실제로 사용되지 않는 Github 이미지까지 요청하여 다운로드되어 있는 것을 볼 수 있다.
이 처럼 잘못 사용하면 오히려 초기 로딩 성능을 저하시키는 역효과를 발생시킬 수 있으므로, 초기 로드 시 사용되지 않는 리소스에 PreLoad를 설정하지 않게 주의해야 한다.
비즈니스에 맞게 전략적으로 사용하기
초기 로드에 필요한 리소스에만 PreLoad를 잘 걸어주었다 하더라도, 무조건 전부다 PreLoad를 하는 것 또한 올바르지 않다.
PreLoad를 전부 걸면 결국 우선순위 없이 모든 리소스를 요청하고, 다운로드 후 브라우저에서 렌더링 시 메인 스레드가 분산되어 PreLoad 역할의 의미가 없어지게 된다.
Preload는 전체적인 웹 성능을 빠르게 하기 위해 사용되는 속성이 아니다.
비즈니스에 따라 빠르게 로딩해야 하는 특정 리소스를 위해 사용되는 속성이다.예를 들어 Qanda.ai 서비스에서는, SEO 최적화 작업으로 Core Web Vitals 지표 중 LCP(Largest Contentful Paint) 수치를 개선하기 위해 페이지 내에서 가장 큰 컨텐츠 요소를 빠르게 로딩시키는 것이 중요하다.
그러므로 Qanda.ai에서는 큰 영역을 차지하는 이미지에만 PreLoad를 걸어 다른 소스들보다 먼저 요청을 시도하도록 해야 비즈니스적으로 큰 이점을 얻을 수 있다.
Qanda.ai처럼 SEO 중점이 아닌 일반 블로그 같은 페이지에서는 주로 이미지보다는 WebFont에 PreLoad를 많이 걸고는 한다.
이처럼 각 서비스 별로 어떤 리소스를 우선적으로 로딩하는 게 좋은지 판별하여 적절하게 PreLoad를 걸어주는 것이 좋다.
반응형'개발 블로깅 > 기타 개념' 카테고리의 다른 글
[Yarn berry] pnp(Plug And Play), Zero Install을 위한 Dependency 문제 해결하기 (3) 2022.09.11 ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자. (12) 2021.12.18 자바스크립트 검색엔진 최적화(SEO) 가이드 총 정리 (0) 2021.07.20 [2020.12.28] React 내 Render Stream 처리 기법(with kefir.js) (0) 2020.12.28 [2020.10.16] Google Chrome V8 엔진을 파헤쳐보자 (2) 2020.10.17