웹페이지 로딩 속도는 사용자 경험과 SEO에 직결되는 중요한 요소입니다. HTML에는 preload라는 속성이 있어, 페이지가 로드될 때 리소스를 어떻게, 그리고 더 중요하게는 언제 불러올지에 대한 힌트를 브라우저에 미리 전달할 수 있습니다.
CSS 프리로드 힌트란?
preload 속성은 여러 HTML 요소에 적용할 수 있습니다. 대표적인 활용 예가 바로 <link> 요소에 추가하여 브라우저가 CSS 스타일시트를 평소보다 훨씬 이른 시점에 가져오도록(fetch) 하는 것입니다. 이렇게 하면 렌더링 차단 리소스인 CSS가 더 빨리 준비되어 화면 표시 속도가 개선됩니다.
흔히 저지르는 잘못된 사용법
일부 웹사이트에서 아래와 같은 방식을 권장하기도 하지만, 이렇게 사용하면 안 됩니다.
<link rel="preload" rel=stylesheet href="/css/styles.css" as="style">그 이유는 위 코드가 스타일시트를 미리 다운로드만 할 뿐, 실제로 문서에 적용하지는 않기 때문입니다. 결과적으로 CSS 파일은 내려받아졌는데도 스타일이 화면에 반영되지 않는 문제가 발생합니다.
올바른 사용 방법: onload 이벤트 핸들러 활용
스타일시트를 미리 로드하고, 로드가 완료되는 즉시 적용까지 하려면 <link> 요소에 인라인 JavaScript onload 이벤트 핸들러를 함께 사용하면 됩니다.
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">이 코드의 동작 원리는 간단합니다. 브라우저가 CSS 파일 다운로드를 마치는 순간, JS onload 이벤트 핸들러가 해당 link 요소의 rel="preload" 속성을 rel="stylesheet"로 변경합니다. 그러면 브라우저는 이미 내려받은 스타일시트를 즉시 문서에 적용합니다.
이렇게 설정하면 preload를 지원하는 브라우저에서는 이 속성을 사용하지 않았을 때보다 CSS 스타일시트 다운로드가 훨씬 일찍 시작됩니다.
브라우저 지원 현황
preload 속성은 아직(다소 의외로) Firefox에서는 지원되지 않지만, Chrome, Edge, Safari 등 다른 모든 최신 브라우저에서는 정상적으로 동작합니다.
다행히 Firefox 사용자를 위한 별도의 대응이 필요하지는 않습니다. preload 속성을 사용하더라도 Firefox에서는 단순히 CSS를 미리 가져오지 않을 뿐, 기존 방식대로 정상적으로 로드되기 때문입니다. 즉, 점진적 향상(progressive enhancement) 관점에서 안심하고 도입할 수 있는 기술입니다.