1. 소개
Speculation Rules API를 사용한 사전 렌더링을 통해 순간 탐색 기능을 구현하는 방법을 학습할 수 있는 대화형 데모 및 Codelab입니다.
Codelab을 완료하는 데 약 30분이 소요되며, 화면 상단에서 남은 시간을 확인할 수 있습니다.
사전 요구 사항
- HTML과 JavaScript에 대한 초급 지식
학습할 내용
- 웹사이트에 추측 로드를 추가하는 방법
- Chrome DevTools를 사용하여 추측 문제를 디버깅하는 방법
필요한 항목
- Chrome 123 이상
- 웹사이트를 실행하거나 게시할 수 있는 기능(예제에서는 Glitch를 사용하지만, 비슷한 서비스나 로컬에서 실행되는 웹 서버도 사용 가능)
준비되셨나요? 그럼 시작해 보겠습니다.
2. 환경 설정
이 데모의 첫 번째 단계는 Glitch에서 다음과 같은 3개의 페이지가 있는 테스트 사이트를 만드는 것입니다.
- 페이지 1은 홈페이지로, 페이지 2와 페이지 3으로 연결되는 링크가 있는 페이지입니다.
- 페이지 2는 느린 로딩 페이지를 시뮬레이션하기 위한 차단 스크립트가 있는 페이지입니다. 또한 페이지의 로딩 시간을 측정하기 위해 콘솔에 최대 콘텐츠 페인트(LCP) 시간을 기록합니다.
- 페이지 3은 페이지 2와 거의 비슷하지만, 이번에는 이미지 LCP를 사용하므로 데모에는 두 개의 링크가 있어야 합니다.
자체 데모 사이트를 사용하고 싶은 경우, 해당 사이트에서 동일한 단계를 수행하면 됩니다.
Glitch를 사용하려면 Glitch 계정이 있어야 합니다. 로컬 개발 서버에서 Glitch 페이지를 제공하거나 다른 플랫폼이나 서비스를 사용할 수도 있지만, 여기에서는 그러한 방법을 다루지 않습니다.
Glitch 기본 웹사이트를 리믹스하여 웹사이트를 만듭니다.
그러면 다음과 같은 기본 사이트가 완성됩니다.
Glitch에서 프로젝트에 임의의 이름을 부여합니다(이 예제의 경우, open-chalk-asparagus.glitch.me). 그러면 프로젝트 이름에서 해당 프로젝트를 glitch.me의 하위 도메인으로 볼 수 있습니다. 이 예제에서는 https://open-chalk-asparagus.glitch.me/입니다.
왼쪽 목록에서 새 파일을 선택하여 추가하고 오른쪽에서 콘텐츠를 편집할 수 있습니다. 하단의 미리보기 버튼을 클릭하면 사이드 창 또는 새 창에서 미리 볼 수 있습니다.
이제 환경 설정을 완료했으므로 다음 단계로 이동하여 데모 사이트를 설정하면 됩니다.
3. 데모 사이트 생성
index.html 파일의 내용을 바꿔 몇 개의 링크가 있는 기본 페이지를 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
<title>Instant Loading Demo!</title>
</head>
<body>
<h1>Instant Loading Demo!</h1>
<p>This is a demo of the Speculation Rules API.</p>
<ul>
<li><a href="./page2.html">Page 2</a></li>
<li><a href="./page3.html">Page 3</a></li>
</ul>
</body>
</html>
왼쪽의 Files +(파일 +) 버튼을 클릭하고 page2.html을 입력한 후, Add this file(이 파일 추가)을 클릭하여 Glitch에서 page2.html 페이지를 생성합니다.
다음 내용을 복사하여 page2.html에 붙여넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
<title>Page 2</title>
<!-- Load script as a classic script to allow it to be blocking -->
<script src="./script.js"></script>
</head>
<body>
<h1>This is page 2</h1>
<h2>This is a demo of the Speculation Rules API.</h2>
<button back</button>
</body>
</html>
다음 내용으로 page3.html을 생성합니다. 페이지 2와 거의 동일하지만, 이미지를 추가한 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
<title>Page 3</title>
<!-- Load script as a classic script to allow it to be blocking -->
<script src="./script.js"></script>
</head>
<body>
<h1>This is page 3</h1>
<p>This is a demo of the Speculation Rules API.</p>
<button back</button>
<img src="./image.svg" alt="LCP image">
</body>
</html>
페이지 3에서는 image.svg 파일을 참조하므로 다음 내용으로 페이지를 생성합니다.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0.0 0.0 384.0 288.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10"><clipPath id="p.0"><path d="m0 0l384.0 0l0 288.0l-384.0 0l0 -288.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l384.0 0l0 288.0l-384.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m47.99836 24.0l288.0 0l0 96.0l-288.0 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m115.79305 40.46437l11.875 0l0 51.75l26.671867 0l0 11.265625l-38.546867 0l0 -63.015625zm76.99615 64.421875q-9.15625 0 -16.71875 -4.34375q-7.5625 -4.359375 -11.921875 -11.890625q-4.359375 -7.53125 -4.359375 -16.671875q0 -9.15625 4.359375 -16.671875q4.359375 -7.53125 11.921875 -11.890625q7.5625 -4.359375 16.71875 -4.359375q14.25 0 23.578125 10.296875l-8.359375 8.09375q-6.0625 -7.125 -15.125 -7.125q-5.90625 0 -10.75 2.6875q-4.828125 2.6875 -7.609375 7.625q-2.765625 4.921875 -2.765625 11.34375q0 6.421875 2.765625 11.359375q2.78125 4.921875 7.609375 7.609375q4.84375 2.671875 10.75 2.671875q9.9375 0 16.625 -8.265625l8.453125 8.0q-4.671875 5.640625 -11.046875 8.59375q-6.375 2.9375 -14.125 2.9375zm36.17192 -64.421875l22.171875 0q5.984375 0 10.90625 2.515625q4.9375 2.515625 7.75 7.046875q2.8125 4.53125 2.8125 10.328125q0 5.8125 -2.8125 10.390625q-2.8125 4.578125 -7.75 7.09375q-4.921875 2.5 -10.90625 2.5l-10.296875 0l0 23.140625l-11.875 0l0 -63.015625zm22.53125 28.609375q4.390625 0 6.890625 -2.546875q2.515625 -2.5625 2.515625 -6.171875q0 -3.609375 -2.515625 -6.109375q-2.5 -2.515625 -6.890625 -2.515625l-10.65625 0l0 17.34375l10.65625 0z" fill-rule="nonzero"/><path fill="#0cce6b" d="m43.2 177.60136l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m77.08874 201.5057q-1.234375 0 -2.265625 -0.578125q-1.03125 -0.59375 -1.640625 -1.609375q-0.59375 -1.03125 -0.59375 -2.296875q0 -1.265625 0.59375 -2.28125q0.609375 -1.03125 1.640625 -1.609375q1.03125 -0.59375 2.265625 -0.59375q0.984375 0 1.8125 0.34375q0.828125 0.34375 1.390625 0.96875l-0.90625 0.921875q-0.875 -0.984375 -2.296875 -0.984375q-0.84375 0 -1.578125 0.40625q-0.734375 0.390625 -1.171875 1.140625q-0.421875 0.734375 -0.421875 1.6875q0 0.953125 0.4375 1.703125q0.4375 0.734375 1.15625 1.140625q0.734375 0.390625 1.578125 0.390625q1.359375 0 2.21875 -0.84375q0.265625 -0.265625 0.453125 -0.671875q0.1875 -0.40625 0.265625 -0.90625l-2.953125 0l0 -1.15625l4.171875 0q0.078125 0.40625 0.078125 0.6875q0 0.828125 -0.265625 1.5625q-0.25 0.734375 -0.796875 1.296875q-0.578125 0.625 -1.390625 0.953125q-0.796875 0.328125 -1.78125 0.328125zm9.765564 0q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m139.2 177.60132l105.60631 0l0 38.393692l-105.60631 0z" fill-rule="evenodd"/><path fill="#000000" d="m173.98776 185.72441l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm8.700058 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0zm8.42131 1.4375q-1.0625 0 -1.921875 -0.625q-0.84375 -0.625 -1.1875 -1.75l1.25 -0.5q0.1875 0.71875 0.671875 1.171875q0.5 0.453125 1.203125 0.453125q0.640625 0 1.09375 -0.328125q0.453125 -0.34375 0.453125 -0.921875q0 -0.546875 -0.40625 -0.890625q-0.390625 -0.359375 -1.359375 -0.703125l-0.546875 -0.1875q-0.875 -0.3125 -1.453125 -0.859375q-0.578125 -0.5625 -0.578125 -1.484375q0 -0.640625 0.34375 -1.171875q0.34375 -0.546875 0.953125 -0.859375q0.625 -0.3125 1.40625 -0.3125q1.109375 0 1.78125 0.546875q0.671875 0.546875 0.90625 1.21875l-1.1875 0.515625q-0.109375 -0.4375 -0.5 -0.75q-0.375 -0.3125 -1.0 -0.3125q-0.578125 0 -1.0 0.3125q-0.40625 0.3125 -0.40625 0.796875q0 0.4375 0.359375 0.734375q0.375 0.296875 1.140625 0.5625l0.5625 0.1875q1.09375 0.390625 1.6875 1.0q0.609375 0.609375 0.609375 1.625q0 0.84375 -0.421875 1.421875q-0.421875 0.5625 -1.09375 0.84375q-0.671875 0.265625 -1.359375 0.265625zm3.431305 -0.1875l0 0z" fill-rule="nonzero"/><path fill="#000000" d="m150.18561 199.72441l1.328125 0l0 8.59375l-1.328125 0l0 -8.59375zm3.2520294 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm4.131668 -4.015625l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0zm8.351303 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm4.811569 -7.53125l1.4375 0l1.9375 5.71875l0.3125 0.96875l0.0625 0l0.328125 -0.96875l2.03125 -5.71875l1.4375 0l-3.140625 8.59375l-1.359375 0l-3.046875 -8.59375zm8.680923 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm10.450058 1.25l-2.40625 0l0 -1.25l6.125 0l0 1.25l-2.390625 0l0 7.34375l-1.328125 0l0 -7.34375z" fill-rule="nonzero"/><path fill="#ff4e42" d="m243.84 177.6l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m275.72064 192.7231l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm8.039276 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m196.8 240.0l95.999985 0l0 28.409454l-95.999985 0z" fill-rule="evenodd"/><path fill="#434343" d="m223.49895 257.87723l-5.15625 0l0 -1.34375l5.015625 -7.40625l1.84375 0l0 7.140625l1.390625 0l0 1.609375l-1.390625 0l0 2.1875l-1.703125 0l0 -2.1875zm0 -1.609375l0 -4.609375l-0.09375 0l-3.125 4.609375l3.21875 0zm5.9627686 3.890625q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm7.3638763 0.15625q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm5.294403 1.375l0 0zm7.712387 0.25q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125zm8.654007 0q-1.1875 0 -2.140625 -0.546875q-0.95310974 -0.5625 -1.4843597 -1.546875q-0.53125 -0.984375 -0.53125 -2.21875q0 -1.171875 0.515625 -2.171875q0.515625 -1.0 1.4374847 -1.59375q0.9375 -0.59375 2.109375 -0.59375q1.234375 0 2.125 0.546875q0.890625 0.53125 1.359375 1.484375q0.484375 0.9375 0.484375 2.140625q0 0.3125 -0.03125 0.53125l-6.3125 0q0.125 1.171875 0.84375 1.8125q0.71875 0.625 1.671875 0.625q0.78125 0 1.34375 -0.359375q0.5625 -0.359375 0.90625 -0.953125l1.421875 0.6875q-0.5625 1.015625 -1.5 1.59375q-0.921875 0.5625 -2.21875 0.5625zm2.15625 -5.265625q-0.03125 -0.4375 -0.28125 -0.890625q-0.25 -0.453125 -0.75 -0.734375q-0.484375 -0.296875 -1.203125 -0.296875q-0.859375 0 -1.46875 0.53125q-0.59375 0.515625 -0.8125 1.390625l4.515625 0zm7.1706543 5.265625q-1.21875 0 -2.1875 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.234375q0 -1.25 0.53125 -2.234375q0.53125 -0.984375 1.484375 -1.546875q0.96875 -0.5625 2.1875 -0.5625q1.34375 0 2.28125 0.609375q0.9375 0.59375 1.359375 1.65625l-1.578125 0.640625q-0.578125 -1.3125 -2.09375 -1.3125q-0.671875 0 -1.25 0.34375q-0.5625 0.34375 -0.890625 0.96875q-0.328125 0.625 -0.328125 1.4375q0 0.8125 0.328125 1.4375q0.328125 0.625 0.890625 0.96875q0.578125 0.34375 1.25 0.34375q0.765625 0 1.3125 -0.34375q0.5625 -0.34375 0.859375 -1.0l1.5625 0.671875q-0.484375 1.046875 -1.4375 1.65625q-0.9375 0.59375 -2.265625 0.59375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m91.2 240.39362l96.0 0l0 28.409454l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m114.02157 258.83334q3.25 -3.234375 4.0 -4.078125q0.703125 -0.734375 0.953125 -1.1875q0.265625 -0.46875 0.265625 -1.09375q0 -0.640625 -0.484375 -1.109375q-0.484375 -0.46875 -1.328125 -0.46875q-0.765625 0 -1.234375 0.4375q-0.46875 0.4375 -0.65625 1.03125l-1.546875 -0.640625q0.15625 -0.578125 0.59375 -1.140625q0.453125 -0.5625 1.1875 -0.9375q0.734375 -0.390625 1.6875 -0.390625q1.046875 0 1.84375 0.4375q0.796875 0.421875 1.234375 1.15625q0.453125 0.71875 0.453125 1.578125q0 1.734375 -1.75 3.46875q-0.703125 0.703125 -1.578125 1.59375q-0.90625 0.875 -1.359375 1.359375l0.015625 0.046875l4.796875 0l0 1.5625l-7.09375 0l0 -1.625zm9.984146 1.71875q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm6.598259 0.15625q-0.8125 0 -1.59375 -0.328125q-0.78125 -0.328125 -1.3750076 -0.984375q-0.578125 -0.671875 -0.8125 -1.640625l1.5468826 -0.609375q0.234375 0.890625 0.796875 1.421875q0.5625 0.53125 1.421875 0.53125q0.90625 0 1.5 -0.578125q0.609375 -0.59375 0.609375 -1.5q0 -0.921875 -0.59375 -1.515625q-0.578125 -0.59375 -1.5 -0.59375q-0.53125 0 -0.984375 0.234375q-0.453125 0.21875 -0.75 0.625l-1.6875076 -0.75l0.65625 -5.5l5.9062576 0l0 1.5625l-4.484375 0l-0.421875 2.9375l0.09375 0.015625q0.875 -0.6875 2.0 -0.6875q0.9375 0 1.734375 0.46875q0.796875 0.46875 1.265625 1.296875q0.484375 0.828125 0.484375 1.890625q0 1.046875 -0.5 1.90625q-0.484375 0.84375 -1.359375 1.328125q-0.875 0.46875 -1.953125 0.46875zm4.684021 -0.25l0 0zm7.712387 0.25q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125zm8.654022 0q-1.1875 0 -2.140625 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.21875q0 -1.171875 0.515625 -2.171875q0.515625 -1.0 1.4375 -1.59375q0.9375 -0.59375 2.109375 -0.59375q1.234375 0 2.125 0.546875q0.890625 0.53125 1.359375 1.484375q0.484375 0.9375 0.484375 2.140625q0 0.3125 -0.03125 0.53125l-6.3125 0q0.125 1.171875 0.84375 1.8125q0.71875 0.625 1.671875 0.625q0.78125 0 1.34375 -0.359375q0.5625 -0.359375 0.90625 -0.953125l1.421875 0.6875q-0.5625 1.015625 -1.5 1.59375q-0.921875 0.5625 -2.21875 0.5625zm2.15625 -5.265625q-0.03125 -0.4375 -0.28125 -0.890625q-0.25 -0.453125 -0.75 -0.734375q-0.484375 -0.296875 -1.203125 -0.296875q-0.859375 0 -1.46875 0.53125q-0.59375 0.515625 -0.8125 1.390625l4.515625 0zm7.170639 5.265625q-1.21875 0 -2.1875 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.234375q0 -1.25 0.53125 -2.234375q0.53125 -0.984375 1.484375 -1.546875q0.96875 -0.5625 2.1875 -0.5625q1.34375 0 2.28125 0.609375q0.9375 0.59375 1.359375 1.65625l-1.578125 0.640625q-0.578125 -1.3125 -2.09375 -1.3125q-0.671875 0 -1.25 0.34375q-0.5625 0.34375 -0.890625 0.96875q-0.328125 0.625 -0.328125 1.4375q0 0.8125 0.328125 1.4375q0.328125 0.625 0.890625 0.96875q0.578125 0.34375 1.25 0.34375q0.765625 0 1.3125 -0.34375q0.5625 -0.34375 0.859375 -1.0l1.5625 0.671875q-0.484375 1.046875 -1.4375 1.65625q-0.9375 0.59375 -2.265625 0.59375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m139.2 241.87541l0 -28.56694" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m139.2 241.87541l0 -20.986938" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m139.2 214.30849c1.8170166 0 3.2899933 1.4729767 3.2899933 3.2899933c0 1.8170166 -1.4729767 3.2899933 -3.2899933 3.2899933c-1.8170166 0 -3.2899933 -1.4729767 -3.2899933 -3.2899933c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.00492 115.2l288.0 0l0 28.7874l-288.0 0z" fill-rule="evenodd"/><path fill="#666666" d="m85.778755 122.4812l1.703125 0l0 12.6875l6.265625 0l0 1.625l-7.96875 0l0 -14.3125zm13.101868 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm7.19812 -9.015625l1.609375 0l0 1.640625l0.078125 0q0.3125 -0.84375 1.171875 -1.390625q0.859375 -0.546875 1.796875 -0.546875q0.703125 0 1.203125 0.203125l0 1.84375q-0.640625 -0.328125 -1.4375 -0.328125q-0.75 0 -1.375 0.421875q-0.609375 0.421875 -0.984375 1.140625q-0.375 0.703125 -0.375 1.515625l0 5.703125l-1.6875 0l0 -10.203125zm11.46875 14.84375q-1.796875 0 -2.96875 -0.84375q-1.171875 -0.84375 -1.5625 -2.015625l1.5625 -0.65625q0.3125 0.875 1.09375 1.421875q0.796875 0.546875 1.875 0.546875q1.578125 0 2.453125 -0.921875q0.875 -0.90625 0.875 -2.59375l0 -1.140625l-0.078125 0q-0.5 0.78125 -1.421875 1.28125q-0.90625 0.484375 -2.0625 0.484375q-1.3125 0 -2.40625 -0.671875q-1.09375 -0.6875 -1.734375 -1.90625q-0.640625 -1.21875 -0.640625 -2.78125q0 -1.546875 0.640625 -2.765625q0.640625 -1.234375 1.734375 -1.90625q1.09375 -0.6875 2.40625 -0.6875q1.15625 0 2.0625 0.484375q0.921875 0.484375 1.421875 1.296875l0.078125 0l0 -1.46875l1.625 0l0 9.796875q0 2.46875 -1.375 3.75q-1.359375 1.296875 -3.578125 1.296875zm0 -5.984375q0.921875 0 1.671875 -0.453125q0.75 -0.46875 1.203125 -1.328125q0.453125 -0.859375 0.453125 -2.03125q0 -1.203125 -0.453125 -2.0625q-0.453125 -0.859375 -1.203125 -1.3125q-0.75 -0.453125 -1.671875 -0.453125q-0.921875 0 -1.6875 0.46875q-0.75 0.453125 -1.203125 1.3125q-0.4375 0.859375 -0.4375 2.046875q0 1.171875 0.4375 2.046875q0.453125 0.875 1.203125 1.328125q0.765625 0.4375 1.6875 0.4375zm11.902489 1.65625q-1.453125 0 -2.6250076 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.1406326 -0.734375 2.5937576 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078133 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.2656326 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.0468826 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.2187576 0zm7.4381256 6.5q-1.625 0 -2.734375 -0.765625q-1.09375 -0.765625 -1.5625 -1.96875l1.53125 -0.671875q0.375 0.90625 1.125 1.40625q0.75 0.5 1.640625 0.5q0.96875 0 1.640625 -0.375q0.6875 -0.390625 0.6875 -1.125q0 -0.625 -0.546875 -1.015625q-0.53125 -0.390625 -1.6875 -0.671875l-1.25 -0.328125q-1.21875 -0.296875 -2.0 -1.015625q-0.78125 -0.71875 -0.78125 -1.859375q0 -0.875 0.53125 -1.546875q0.53125 -0.671875 1.40625 -1.03125q0.890625 -0.359375 1.90625 -0.359375q1.34375 0 2.390625 0.578125q1.046875 0.578125 1.484375 1.625l-1.46875 0.671875q-0.6875 -1.359375 -2.421875 -1.359375q-0.84375 0 -1.484375 0.390625q-0.625 0.390625 -0.625 0.984375q0 0.5625 0.4375 0.921875q0.453125 0.34375 1.328125 0.5625l1.484375 0.375q1.5 0.390625 2.25 1.140625q0.765625 0.75 0.765625 1.828125q0 0.9375 -0.546875 1.65625q-0.53125 0.703125 -1.453125 1.078125q-0.921875 0.375 -2.046875 0.375zm9.734985 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.132492 -0.15625l0 0zm12.5525055 0.3125q-2.078125 0 -3.78125 -0.96875q-1.6875 -0.984375 -2.65625 -2.6875q-0.96875 -1.71875 -0.96875 -3.8125q0 -2.109375 0.96875 -3.8125q0.96875 -1.71875 2.65625 -2.6875q1.703125 -0.984375 3.78125 -0.984375q1.609375 0 2.9375 0.609375q1.328125 0.59375 2.3125 1.734375l-1.21875 1.171875q-0.828125 -0.96875 -1.796875 -1.421875q-0.96875 -0.46875 -2.234375 -0.46875q-1.546875 0 -2.859375 0.734375q-1.296875 0.71875 -2.0625 2.046875q-0.765625 1.328125 -0.765625 3.078125q0 1.734375 0.765625 3.0625q0.765625 1.328125 2.0625 2.0625q1.3125 0.734375 2.859375 0.734375q2.609375 0 4.421875 -2.140625l1.25 1.203125q-0.984375 1.171875 -2.453125 1.859375q-1.46875 0.6875 -3.21875 0.6875zm12.060623 0q-1.5 0 -2.703125 -0.71875q-1.1875 -0.71875 -1.859375 -1.953125q-0.671875 -1.234375 -0.671875 -2.734375q0 -1.5 0.671875 -2.734375q0.671875 -1.25 1.859375 -1.96875q1.203125 -0.71875 2.703125 -0.71875q1.5 0 2.703125 0.71875q1.203125 0.71875 1.875 1.96875q0.671875 1.234375 0.671875 2.734375q0 1.5 -0.671875 2.734375q-0.671875 1.234375 -1.875 1.953125q-1.203125 0.71875 -2.703125 0.71875zm0 -1.53125q0.953125 0 1.75 -0.46875q0.8125 -0.46875 1.296875 -1.34375q0.5 -0.890625 0.5 -2.0625q0 -1.1875 -0.5 -2.0625q-0.484375 -0.890625 -1.296875 -1.359375q-0.796875 -0.46875 -1.75 -0.46875q-0.9375 0 -1.765625 0.46875q-0.8125 0.46875 -1.296875 1.359375q-0.484375 0.875 -0.484375 2.0625q0 1.171875 0.484375 2.0625q0.484375 0.875 1.296875 1.34375q0.828125 0.46875 1.765625 0.46875zm7.032486 -8.984375l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641861 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm7.4893646 0.15625q-1.453125 0 -2.625 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.140625 -0.734375 2.59375 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078125 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.265625 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.046875 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.21875 0zm3.7912445 -4.015625l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641861 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l4.640625 0l0 -1.09375q0 -0.96875 0.421875 -1.6875q0.4375 -0.71875 1.1875 -1.109375q0.75 -0.390625 1.640625 -0.390625q0.828125 0 1.5 0.25l0 1.65625q-0.390625 -0.15625 -0.703125 -0.234375q-0.3125 -0.09375 -0.75 -0.09375q-0.671875 0 -1.15625 0.484375q-0.46875 0.46875 -0.46875 1.296875l0 0.921875l2.625 0l0 1.546875l-2.625 0l0 8.65625l-1.671875 0l0 -8.65625l-4.640625 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm13.38562 0.15625q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -14.625l1.6875 0l0 14.3125l-1.6875 0l0 -14.3125zm2.9543762 14.3125l0 0zm6.233734 -14.3125l4.828125 0q1.203125 0 2.21875 0.546875q1.015625 0.53125 1.625 1.5q0.609375 0.96875 0.609375 2.1875q0 1.21875 -0.609375 2.1875q-0.609375 0.96875 -1.625 1.515625q-1.015625 0.53125 -2.21875 0.53125l-3.125 0l0 5.84375l-1.703125 0l0 -14.3125zm4.859375 6.859375q0.8125 0 1.421875 -0.375q0.609375 -0.390625 0.9375 -0.984375q0.34375 -0.609375 0.34375 -1.265625q0 -0.65625 -0.34375 -1.25q-0.328125 -0.609375 -0.9375 -0.984375q-0.609375 -0.390625 -1.421875 -0.390625l-3.15625 0l0 5.25l3.15625 0zm9.182495 7.765625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm8.19812 -10.890625q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm4.363739 0l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641876 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m244.8 241.37184l0 -28.283463" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m244.79999 241.37184l0 -20.703476" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m244.79999 214.08838c1.8170166 0 3.2900085 1.4729767 3.2900085 3.2899933c0 1.8170166 -1.472992 3.2900085 -3.2900085 3.2900085c-1.8170166 0 -3.2899933 -1.472992 -3.2899933 -3.2900085c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/></g></svg>
두 페이지 모두 Glitch에서 기본적으로 생성하는 script.js 리소스를 로드하므로, 해당 파일의 내용을 다음과 같이 변경합니다.
function blockPause(milliseconds) {
const start = performance.now();
let lastCheck = start;
let lastTime = 0;
// Synchronous blocking is NOT best practice at all, but is what we want here
// Don't do this on your real site please!
while(performance.now() - start < milliseconds) {
// Log once a second
lastTime = performance.now() - lastCheck
if (lastTime >= 1000) {
console.log(`Still blocking ${Math.round(performance.now() - start, 0)} ms out of ${milliseconds} ms`);
lastCheck = performance.now();
}
}
}
// Load web-vitals.js and log LCP updates to console
var script = document.createElement('script');
script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.iife.js';
script. () {
window.webVitals.onLCP(({value}) => {
console.log(`LCP time: ${Math.round(value)} ms`);
}, {reportAllChanges: true});
};
document.head.appendChild(script);
// Block page for 3 seconds to simulate a slow loading page
console.log('Simulate slow loading page by blocking page;');
blockPause(3000);
console.log('Page loaded');
그러면 데모 사이트 설정이 완료됩니다. 데모 사이트를 둘러보세요. 메인 스레드의 인위적인 차단으로 인해 페이지 2와 페이지 3의 로딩 속도가 느리다는 것을 알 수 있습니다.
DevTools 콘솔을 열면 script.js의 콘솔 로그를 볼 수 있습니다.
차단, 디버그 메시지를 확인할 수 있으며, 더미 차단 기능으로 인해 메인 스레드가 차단되어 LCP를 표시하는 데 3,658밀리초나 걸린 것을 확인할 수 있습니다. 이 페이지는 더미 차단 기능으로 인해 느린 것이지만, 어떤 이유에서든 느리게 로드되는 페이지를 나타냅니다. Speculation Rules API를 사용하여 로딩 속도를 높이는 방법을 살펴보겠습니다.
4. URL 목록 추측 규칙 추가
첫 번째로 추가할 추측 규칙은 하드코딩된 URL 목록을 사전 렌더링하기 위한 것입니다.
Glitch에서 index.html 문서를 복제합니다. 이름 위에 마우스를 가져가면 나타나는 점 3개 메뉴를 클릭하면 복제할 수 있습니다.
새 이름 page1-url-speculations.html을 입력합니다.
추측 규칙은 type="speculationrules"인 JSON 형식의 <script> 태그입니다.
page1-url-speculations.html 파일을 편집하고 페이지에 다음 코드를 추가합니다. 코드를 어디에 추가해도 상관없지만, 페이지의 나머지 부분이 먼저 처리되도록 하려면 닫는 본문 태그(</body>) 바로 앞에 넣는 것이 좋습니다.
<script type="speculationrules">
{
"prerender": [
{
"urls": ["page2.html", "page3.html"]
}
]
}
</script>
이제 모두 완료되었습니다. 페이지에 순간 로딩 기능을 추가하는 데 필요한 것은 이것이 전부입니다.
이 규칙은 사용자가 링크를 클릭할 때를 대비하여 두 페이지가 모두 백그라운드에서 로드되도록 URL page2.html과 page3.html을 사전 렌더링하도록 합니다.
5. 추측 규칙의 작동 방식
어떻게 실행되는지 확인해 보겠습니다. page1-url-speculations.html 페이지를 로드하면 원래 index.html 페이지와 달라진 것이 없어 보입니다. 하지만 Chrome에서는 백그라운드에서 page2.html과 page3.html을 사전 렌더링하기 시작합니다. 이를 숨겨진 백그라운드 탭이라고 생각하면 됩니다. 링크를 클릭하면 Chrome에서는 현재 페이지를 사전 렌더링된 페이지로 바꿉니다. 로드 후 3초 이상 기다렸다가 링크를 클릭하면 LCP가 0에 가까운 상태로 순간 로딩되는 것을 확인할 수 있습니다.
여기서 LCP가 50밀리초인 것을 확인할 수 있는데, 이는 권장되는 '양호' 기준점인 2.5초보다 훨씬 빠르며, 대부분의 사람들이 이를 '즉각적'이라고 인식합니다.
이를 index.html의 메인 홈페이지와 비교해 보면 페이지 간 이동이 느리고 응답이 없는 것처럼 느껴집니다.
이것은 단순한 데모 사이트일 뿐이며, 로딩을 인위적으로 늦춰둔 것이기는 합니다. 하지만 API의 강력한 성능을 직접 경험하고 이해하기에는 충분할 것입니다. 원본 페이지의 코드를 변경할 필요 없이 페이지에 추측 규칙을 추가하기만 하면 됩니다.
전체 로드 시간인 3초가 완전히 지나기 전에 링크를 클릭하면 부분적으로 로드된 페이지가 현재 페이지를 대체하고 콘솔에 나머지 차단 메시지가 표시됩니다.
Chrome에서는 사용자가 보는 중에 로딩을 완료합니다. 아울러 LCP가 1초 정도로 표시되는데, 이는 완전히 사전 렌더링되어 LCP가 50밀리초인 순간 로딩에는 미치지 못하지만 사전 렌더링이 전혀 되지 않아 페이지 로드에 3초가 걸리는 것보다는 빠릅니다. 여전히 페이지 로드를 눈에 띄게 개선할 수 있습니다.
6. JavaScript를 사용한 디버깅
JavaScript를 사용하여 페이지가 활성화될 때 이벤트 핸들러를 등록할 수 있습니다.
script.js 파일에 다음 코드를 // Block page for 3 seconds to simulate a slow loading page 행 바로 앞에 추가합니다.
// Load when the page is activated
document.addEventListener('prerenderingchange', () => {
console.log(`The page has been activated!`);
const activationStart = Math.round(performance.getEntriesByType('navigation')[0].activationStart);
console.log(`The page was activated at: ${activationStart}`);
});
page1-url-speculations.html 페이지로 돌아가서 페이지가 사전 렌더링될 때까지 몇 초간 기다리고, 링크 하나를 클릭하면 다음 스크린샷과 같은 내용이 표시됩니다.
여기를 보면 페이지 로딩이 시작되고 4,298밀리초 후에 페이지가 활성화된 것을 확인할 수 있습니다. 페이지 로드가 4초 정도 빨라진 것입니다.
로그의 순서를 보면 LCP가 트리거되기 전에 활성화 이벤트가 먼저 실행되는 것을 확인할 수 있습니다. 그때쯤이면 페이지가 완전히 로드되었을 테지만, LCP는 이름 그대로 '페인트'가 필요합니다. 즉, 페이지가 백그라운드에서 사전 렌더링되더라도 페이지가 활성화될 때까지 실제 '페인트'는 일어나지 않습니다. 따라서 활성화와 LCP 시간 사이에 약간의 지연이 발생합니다. 여기서는 128밀리초의 지연이 발생합니다. 사용자 입장에서는 거의 즉각적이라고 할 수 있습니다.
또한 이 예제에서 활성화 시간은 4,298밀리초이지만, LCP 시간은 이보다 훨씬 짧은 128밀리초라는 것을 알 수 있습니다. 성능 측정항목의 모든 타이밍 측정은 페이지 로딩 시작 시점을 기준으로 하지만, LCP를 기록하는 데 사용되는 Web Vitals 라이브러리에는 사용자를 기준으로 LCP를 측정하기 위해 activationStart 시간을 빼는 특수 로직이 포함되어 있습니다. 이는 Chrome 사용자 경험 보고서(CrUX)의 LCP가 계산되는 방식이기도 한데, 이는 Google Search Console의 PageSpeed Insights 및 Core Web Vitals 보고서와 같은 도구의 기반이 됩니다.
7. DevTools를 사용한 디버깅
콘솔 로깅도 좋은 디버깅 방법이지만(유서 깊고 좋은 디버깅 방법인 console.log를 싫어하는 사람은 없습니다), Chrome의 DevTools에서는 뛰어난 추측 규칙 디버깅을 지원합니다.
page1-url-speculations.html 페이지로 돌아가서 애플리케이션 패널을 열고 백그라운드 서비스 섹션에 있는 추측 로드 탭으로 이동합니다.
이 화면을 보면 페이지 자체는 추측되지 않았지만(오른쪽 상단 섹션) 두 개의 추측이 시작되었음을 알 수 있습니다. 모든 추측 규칙 보기 링크를 클릭하면 규칙 목록이 있는 화면이 표시됩니다. 이 페이지에는 하나의 규칙밖에 없습니다. 그보다 더 흥미로운 것은 모든 추측 보기 링크를 클릭하면 추측 탭으로 이동하게 된다는 점입니다.
여기에서 두 개의 페이지가 추측된 것을 볼 수 있습니다. 두 페이지 모두 준비됨으로 표시되어 있는데, 이는 두 페이지가 사전 렌더링되었고 활성화할 준비가 되었다는 의미입니다. 이는 앞서 본 것처럼 페이지 로딩이 완전히 완료되었다는 의미가 아니라, 사전 렌더링이 성공적으로 시작되었고 페이지를 활성화할 준비가 되었다는 의미입니다.
페이지 사전 렌더링에 실패한 경우, 해당 라인을 클릭하면 실패한 원인을 자세히 확인할 수 있습니다. 예를 들어 몇몇 JavaScript API가 사전 렌더링과 호환되지 않아 사전 렌더링 시도가 취소되기도 합니다.
8. 문서 규칙을 사용한 자동 링크 추측
이 추측에서는 하드 코딩된 URL 목록을 사용했습니다. 이는 추측할 URL을 미리 알고 있는 상황에 유용합니다. 또는 JavaScript를 통해 URL을 계산하여 페이지에 동적으로 삽입할 수 있는 고급 케이스에 유용합니다.
그러나 보통은 방문자가 페이지에서 어떤 링크를 클릭할지 알 수 없거나 예측하기 어렵습니다. 모든 링크를 사전 렌더링하는 것은 모든 페이지를 일일이 지정해야 하는 번거로움이 따르며 매우 낭비적인 작업입니다. 따라서 페이지의 특정 링크를 고려하되 사용자가 링크를 클릭할 것이라는 더 확실한 힌트가 있어야 합니다. 이럴 때 문서 규칙을 사용하면 됩니다.
index.html 파일을 page1-document-speculations.html 파일에 다시 복제하고, 이번에는 닫는 태그인 </body> 바로 앞에 다음 규칙을 추가합니다.
<script type="speculationrules">
{
"prerender": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": {"selector_matches": ".do-not-prerender"}}
]
},
"eagerness": "moderate"
}]
}
</script>
이 규칙이 의미하는 것은 do-not-prerender 클래스가 <a> 요소에 있는 경우를 제외하고 모든 동일 출처 링크(/*로 시작)를 사전 렌더링한다는 것입니다. 이 예제에서는 moderate eagerness로 페이지를 사전 렌더링합니다. eagerness는 다음 페이지에서 다룰 예정입니다.
페이지로 이동하면 두 가지 잠재적 추측이 표시되며 두 가지 모두 트리거되지 않음 상태여야 합니다.
링크 중 하나에 마우스를 가져가면 추측이 트리거됩니다.
링크를 클릭하면 사전 렌더링된 페이지가 로드됩니다. 페이지 로딩에 충분한 시간이 있었다면 순간 로드처럼 느껴질 것이고, 링크를 클릭할 때까지 페이지 로드가 완료되지 않았어도 평소보다 훨씬 빠르게 느껴질 것입니다. 어느 쪽이든 추측 규칙을 사용하지 않은 것보다 LCP 시간이 더 빨라질 것입니다.
문서 규칙은 어떤 URL을 사전 렌더링할지 신중하게 고려할 필요 없이 웹사이트에 추측 탐색을 빠르게 추가할 수 있는 강력한 방법입니다. 사전 렌더링이 완료되는 데 걸리는 시간은 짧지만, 다음 탐색을 미리 시작할 수 있으므로, 다음 페이지 로드를 개선하는 데 도움이 됩니다.
9. 추측 시점을 나타내는 사용자 eagerness
이전 단계에서는 "eagerness": "moderate"를 사용했습니다. 4개의 eagerness 설정이 있습니다.
immediate: 가능한 한 빨리, 즉 추측 규칙이 관찰되는 대로 추측할 때 사용합니다.eager: 이는immediate설정과 동일하게 작동하지만, 향후에는immediate와moderate의 중간 정도로 작동할 예정입니다.moderate: 링크에 마우스를 200밀리초 동안 가져가면(또는 그보다 빠른 경우pointerdown이벤트에서 그리고 마우스 오버 이벤트가 없는 모바일에서) 추측을 수행합니다.conservative: 포인터 다운 또는 터치 다운 시 추측합니다.
eagerness 설정은 URL 기반 목록 규칙 또는 where 기반 문서 규칙 모두에 사용할 수 있습니다. immediate 및 eager 설정은 일반적으로 목록 규칙에 더 적합합니다. 목록 규칙을 사용할 때는 URL을 알고 있고, 따라서 가능한 한 빨리 추측하여 리드 타임을 최대한 확보할 수 있기 때문입니다. moderate 및 conservative 설정은 일반적으로 추측할 정확한 URL을 알 수 없는 문서 규칙에 더 유용합니다.
DevTools를 사용하여 다양한 eagerness 설정을 페이지에 사용해 보면서 추측이 발생하는 시점을 확인해 보세요.
10. 결론
Codelab을 완료하신 것을 축하드립니다. 이제 Speculation Rules API가 단 코드 몇 줄로 사이트에 추가할 수 있는 강력한 API라는 것을 아셨을 것입니다.
이 짧은 소개에서는 이 API의 가능성에 대해 극히 일부만 다루었지만, 웹사이트를 지원하는 데는 이 정도면 충분합니다.
애널리틱스나 광고에 고려해야 하는 사항 등 고급 주제와 관련된 내용은 아래의 자세히 알아보기 링크를 참고하세요.
자세히 알아보기
의견
이 Codelab에 대한 의견이나 궁금한 점, 우려되는 점이 있다면 언제든지 알려 주세요.