Make any app load faster with just 6 lines of HTML
- Speculation Rules API는 단 6줄의 HTML 코드로 웹 앱의 로딩 속도를 획기적으로 향상시킬 수 있는 새로운 브라우저 API입니다. 🚀
- 이 API는 향후 탐색 성능을 개선하기 위해 설계되었으며, 일부 Chromium 기반 브라우저에서 이미 사용 가능합니다. 🌐
- 'speculation rules' 스크립트 요소를 사용하여 prefetch 또는 prerender할 리소스를 정의하는 JSON 구조를 지정할 수 있습니다. 📜
- Prefetch 규칙은 페이지의 HTML만 다운로드하고, prerender 규칙은 HTML, CSS, JS, 이미지 등 모든 리소스를 다운로드하여 페이지를 미리 렌더링합니다. 🖼️
- 'eagerness' 설정을 통해 브라우저가 잠재적 탐색에 얼마나 빨리 반응할지 제어할 수 있으며, 'moderate' 또는 'immediate' 값을 사용할 수 있습니다. ⏱️
- Prerendering은 더 많은 리소스를 사용하므로, Chrome은 동시에 실행할 수 있는 prerender 작업 수를 제한합니다. 🤔
- Speculation Rules API는 기존의 prefetch 태그나 수동 스크립팅보다 선언적이며, 브라우저가 시스템 성능, 네트워크 상태, 사용자 행동을 고려하여 작업을 수행합니다. 💡
- Firefox 또는 Safari 사용자를 위해 JavaScript 폴백 스크립트를 사용하여 link prefetch를 동적으로 추가할 수 있습니다. 🦊
- Speculation Rules는 HTTP 응답 헤더를 통해 전송될 수도 있어, 마크업 변경 없이 규칙을 수정할 수 있는 유연성을 제공합니다. ⚙️
- Google 검색은 이미 Speculation Rules를 활발히 사용하여 사용자 경험을 향상시키고 있으며, Largest Contentful Paint를 데스크톱에서 59ms, 모바일에서 67ms 단축했습니다. 🔍
- 페이지 로딩 속도가 빨라지면 사용자는 더 빠르게 느끼고 참여도가 높아지는 심리적 효과가 있습니다. 🤩