Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!
================================================ FILE: demos/hrefFn/2.json ================================================ { "title": "API Target to Prefetch Example", "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!" } ================================================ FILE: demos/hrefFn/hrefFn_demo.html ================================================Link 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This demo uses network-idle-callback to only prefetch when network activity goes idle in the current tab.
Link 1 Link 2 Link 3
{{ trustedByLogo.companyName }}
{%- endfor %}
{%- endfor %}
{% markdownConvert %}
Quicklink attempts to make navigations to subsequent pages load faster. It:
* **Detects links within the viewport** (using [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API))
* **Waits until the browser is idle** (using [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback))
* **Checks if the user isn't on a slow connection** (using `navigator.connection.effectiveType`) or has data-saver enabled (using `navigator.connection.saveData`)
* **Prefetches URLs to the links** (using [``](https://www.w3.org/TR/resource-hints/#prefetch) or XHR). Provides some control over the request priority (can switch to `fetch()` if supported).
{% endmarkdownConvert %}
{% markdownConvert %}
## Future: Double-keyed HTTP Cache
Most Quicklink users use the library to prefetch links on the same origin. Some users do however care about cross-origin prefetches and this section outlines some relevant notes on double-keyed caching that may impact you.
Modern browsers are shifting towards a double-keyed HTTP cache. This partitions the HTTP cache roughly by the top-frame-origin that a request is made from. This breaks cross-origin resource prefetching, whose goal is to prefetch cross-origin resources and store them in the HTTP cache for later re-use. This [limits cache timing attacks](https://github.com/xsleaks/xsleaks/wiki/Browser-Side-Channels#cache-and-error-events) but does limit cross-origin prefetching from being effective.
Chrome [will](https://groups.google.com/a/chromium.org/g/blink-dev/c/bSMOY-evrV4/m/qT0gCByxBAAJ) allow cross-origin prefetched resources in the HTTP cache to be re-used for top-level navigations, which should be safe because by navigating, the user is explicitly sharing their interest with the destination site.
What this means for Quicklink is that the library will continue to work for same-origin navigations. If you choose to [control which origins can be prefetched](https://github.com/GoogleChromeLabs/quicklink#specify-a-custom-list-of-allowed-origins), these will be limited to prefetching same-origin use-cases only. As this is a browser-level limitation, it will impact any prefetching library.
## Session Stitching
Cross-origin prefetching (e.g `a.com/foo.html` prefetches `b.com/bar.html`) has a number of limitations. One such limitation is with session-stitching. `b.com` may expect `a.com`'s navigation requests to include session information (e.g a temporary ID - e.g `b.com/bar.html?hash=<>×tamp=<>`), where this information is used to customize the experience or log information to analytics.
If session-stitching requires a timestamp in the URL, what is prefetched and stored in the HTTP cache may not be the same as the one the user ultimately navigates to. This introduces a challenge as it can result in double prefetches.
To workaround this problem, you can consider passing along session information via the [ping attribute](https://caniuse.com/ping) (separately) so the origin can stitch a session together asynchronously.
## Ad-related considerations
Sites that rely on ads as a source of monetization should not prefetch ad-links, to avoid unintentionally counting clicks against those ad placements, which can lead to inflated Ad CTR (click-through-rate).
Ads appear on sites mostly in two ways:
- **Inside iframes:** By default, most ad-servers render ads within iframes. In these cases, those ad-links won't be prefetched by Quicklink, unless a developer explicitly passes in the URL of an ads iframe. The reason is that the library look-up for in-viewport elements is restricted to those of the top-level origin.
- **Outside iframes:** In cases when the site shows same-origin ads, displayed in the top-level document (e.g. by hosting the ads themselves and by displaying the ads in the page directly), the developer needs to explicitly tell Quicklink to avoid prefetching these links. This can be achieved by passing the URL or subpath of the ad-link, or the element containing it to the [custom ignore patterns list](/#custom-ignore-patterns).
{% endmarkdownConvert %}
{% endblock %}
================================================
FILE: site/src/assets/js/script.js
================================================
window.addEventListener('load', () => {
'use strict';
function initGoToTopBtn() {
const goTopBtn = document.querySelector('.back-to-top');
function trackScroll() {
const scrolled = window.pageYOffset;
const threshold = 400;
if (scrolled > threshold) {
goTopBtn.classList.remove('hidden');
}
if (scrolled < threshold) {
goTopBtn.classList.add('hidden');
}
}
function scrollToTop() {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
}
function backToTop() {
if (window.pageYOffset > 0) {
scrollToTop();
}
}
window.addEventListener('scroll', trackScroll, {passive: true});
goTopBtn.addEventListener('click', backToTop);
}
initGoToTopBtn();
const clipboard = new ClipboardJS('#copy-snippet-button', {
text: trigger => trigger.parentNode.previousElementSibling.textContent.trim(),
});
clipboard.on('success', event => {
event.clearSelection();
event.trigger.blur();
const notifyCopiedSnippet = document.querySelector('.notify-copied-snippet');
notifyCopiedSnippet.classList.add('notify-copied-snippet--displayed');
});
clipboard.on('error', event => {
console.error('[clipboard error] Action:', event.action);
console.error('[clipboard error] Trigger:', event.trigger);
});
});
================================================
FILE: site/src/assets/styles/_copy-snippet.scss
================================================
.copy-snippet-widget {
background: linear-gradient(hsla(0deg, 0%, 100%, .775), hsla(0deg, 0%, 100%, .7));
border-radius: 6px;
padding: 10px 18px 17px;
margin: 1.5em 0;
box-shadow: inset 0 1px 0 hsla(0deg, 0%, 100%, 1), 0 3px 20px hsla(0deg, 0%, 0%, .1);
}
.snippet-for-copy {
// border: 1px solid hsla(0, 0%, 0%, .15);
border-radius: 1px;
// background: hsla(0, 0%, 0%, .075);
margin: 10px 0;
font-size: .95em;
}
.copy-snippet-widget .snippet-for-copy pre {
margin-bottom: 0;
}
.notify-copied-snippet {
font-size: .8em;
margin-top: .35em;
margin-left: .35em;
display: none;
}
.notify-copied-snippet--displayed {
display: block;
}
.button {
background: linear-gradient(hsla(0deg, 0%, 95%, 1), hsla(0deg, 0%, 90%, 1));
border: 1px solid;
--border-color-opacity: .25;
--border-color: hsla(0deg, 0%, 25%, var(--border-color-opacity)) hsla(0deg, 0%, 10%, var(--border-color-opacity)) hsla(0deg, 0%, 0%, var(--border-color-opacity));
border-color: var(--border-color);
border-radius: 4px;
padding: 4px 10px;
--light-opacity: 1;
--shadow-opacity: .05;
--shadow-blur-radius: 1px;
--box-shadow: inset 0 1px 0 hsla(0deg, 0%, 100%, var(--light-opacity)), 0 1px var(--shadow-blur-radius) hsla(0deg, 0%, 0%, var(--shadow-opacity)); // An intermediate variable is needed for Safari
box-shadow: var(--box-shadow);
cursor: pointer;
font-size: 16px;
}
.button--copy-snippet {
background: radial-gradient(ellipse at top, hsla(0deg, 0%, 100%, .25), transparent), linear-gradient(hsla(330deg, 73%, 49%, .65), hsla(330deg, 73%, 49%, 1));
color: #fff;
text-shadow: 0 1px 1px hsla(0deg, 0%, 0%, .25);
--light-opacity: .2;
--border-color-opacity: .25;
vertical-align: top;
font-size: .8em;
padding: 7px 14px;
border-radius: 7px;
--shadow-opacity: .25;
--shadow-blur-radius: 3px;
font-weight: 700;
letter-spacing: .01em;
}
@media (min-width: 600px) {
.button--copy-snippet {
font-size: 1em;
}
}
================================================
FILE: site/src/assets/styles/github-markdown.scss
================================================
// stylelint-disable declaration-no-important
@use "vendor/github-markdown";
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
// TODO: !important use does not look pefect, the github font looks better
font-family: Arial, Helvetica, sans-serif !important;
// TODO: opt for font color
color: hsl(226deg, 52%, 27%) !important;
}
.markdown-body h1,
h2,
h3,
h4,
h5 {
// Google Sans is for headlines only per Google guidelines
font-family: Arial, Helvetica, sans-serif !important;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
.markdown-body h2 {
font-size: 1.2em !important;
}
}
================================================
FILE: site/src/assets/styles/main.scss
================================================
@use "vendor/prism";
@use "copy-snippet";
html {
height: 100%;
}
html,
body {
min-height: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
p,
ul {
margin: 0 0 16px;
font-style: normal;
}
.page-header {
text-align: center;
background: #fff;
padding-top: 1rem;
box-shadow: 0 0 6px rgba(57, 73, 76, .35);
}
.page-header__title {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 7px;
}
.page-header__subtitle {
font-size: 1em;
margin: 0;
}
.page-header__logo-link {
margin-right: 14px;
border: none;
border-right: 2px solid rgb(197, 197, 197);
}
.page-header__logo-image {
width: 160px;
height: auto;
margin-right: 6px;
}
.page-header__navigation a {
position: relative;
display: inline-block;
text-decoration: none;
border: none;
white-space: nowrap;
padding: 8px 0;
min-width: 40px;
z-index: 1;
}
.page-header__navigation a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: -.5em;
right: -.5em;
background-color: #46aee8;
transform-origin: 50% 100%;
transform: scaleY(0);
transition: transform .15s ease-in-out;
}
.page-header__navigation a:hover::before {
transform: scaleY(1);
transform-origin: 50% 100%;
}
.page-header__navigation a.active {
pointer-events: none;
}
.page-header__navigation a.active::before {
transform: scaleY(1);
opacity: .5;
transform-origin: 50% 100%;
}
.page-header__navigation ul {
margin: 0;
padding: .5rem .5rem 0;
}
.page-header__navigation li {
display: inline;
margin: 6px 0 0 15px;
}
.page-header__navigation li:last-child {
margin-right: 0;
}
main.page-main {
padding: 0;
width: 96%;
margin-top: 16px;
margin-bottom: 16px;
}
.page-main > h1 {
color: #fff;
}
.page-main > ul {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
.text-center {
text-align: center;
}
.center {
display: flex;
justify-content: center;
}
.back-to-top {
opacity: 1;
pointer-events: all;
position: fixed;
bottom: 3rem;
right: 3rem;
z-index: 9999;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
cursor: pointer;
border-radius: 50%;
transform: translate3d(0, 0, 0);
transition: transform .3s ease;
}
.back-to-top:hover {
transform: translate3d(0, -2px, 0);
}
.back-to-top.hidden {
opacity: 0;
pointer-events: none;
transform: translate3d(300%, 0, 0);
transition: transform .3s ease, opacity .3s ease;
}
// no bullet list
.page-main ul.no-bullet {
list-style-type: none;
padding-left: 0;
}
.list-icon svg {
margin-right: 1rem;
}
// grid
.flex-grid {
display: flex;
}
.overflow-x-auto {
overflow-x: auto;
}
.flex-grid .flex-grid__item {
margin-left: 24px;
}
.flex-grid .flex-grid__item:last-child {
margin-right: 16px;
}
.normal-section {
padding: 0 8px;
}
.trusted-by img {
max-width: 92px;
}
.use-with img {
width: 112px;
min-width: 92px;
}
.highlighted-section {
padding: 16px 24px;
margin: 16px 0;
}
.highlighted-section__text {
// TODO: opt for bg color
// background-color: #d8217d;
background-color: #283646;
color: #fff;
}
.highlighted-section__text p {
color: #fff;
}
.highlighted-section.highlighted-section__text h2 {
border: 0;
}
// heading
.primary-font-color {
// TODO: opt for font color
color: hsl(226deg, 52%, 27%);
}
.secondary-font-color {
color: #fe8ec6;
}
.tertiary-font-color {
color: #d74b91;
}
main.page-main .heading {
letter-spacing: -1px;
font-size: 1.5em;
font-weight: 900;
margin: 0;
border: 0;
}
main.page-main .heading em {
font-style: normal;
white-space: nowrap;
}
.flex-between-center {
display: flex;
justify-content: space-between;
align-items: center;
}
.large-github {
display: none;
}
.article-image {
margin: 20px auto;
display: block;
max-width: 100%;
height: auto;
}
@media (min-width: 600px) {
main.page-main .heading {
font-size: 2.1em;
margin: 24px 0 18px;
}
.page-header__navigation a {
padding: 16px 0;
min-width: 50px;
}
.page-header__subtitle {
margin: 1.7em 0;
}
.page-header__logo-image {
width: 200px;
}
.small-github {
display: none;
}
.large-github {
display: block;
}
}
@media (min-width: 992px) {
body {
background-color: #eee;
}
main.page-main {
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 6px rgba(57, 73, 76, .35);
margin-top: 3.2rem;
margin-bottom: 3.2rem;
padding-bottom: 1rem;
}
.page-header {
padding-top: 0;
}
.page-header-content {
display: flex;
justify-content: space-between;
align-items: center;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
}
.page-header__title {
padding: 14px;
}
.page-header__logo-link {
display: inline-block;
}
.page-header__logo-image {
width: 222px;
}
.page-header nav {
display: inline-block;
}
main.page-main .heading {
margin: 24px 0;
}
.normal-section {
padding: 0 24px;
}
.highlighted-section {
padding: 16px 24px;
margin: 16px 0;
}
}
.site-footer {
margin-top: 1rem;
border-top: 1px dotted #cecece;
}
.site-footer p.text-center {
margin-top: 16px;
}
================================================
FILE: site/src/assets/styles/vendor/_github-markdown.scss
================================================
.markdown-body .octicon {
display: inline-block;
fill: currentcolor;
vertical-align: text-bottom;
}
.markdown-body .anchor {
float: left;
line-height: 1;
margin-left: -20px;
padding-right: 4px;
}
.markdown-body .anchor:focus {
outline: 0;
}
.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
color: #1b1f23;
vertical-align: middle;
visibility: hidden;
}
.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
text-decoration: none;
}
.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
visibility: visible;
}
.markdown-body {
text-size-adjust: 100%;
color: #24292e;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
}
.markdown-body .pl-c {
color: #6a737d;
}
.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
color: #005cc5;
}
.markdown-body .pl-e,
.markdown-body .pl-en {
color: #6f42c1;
}
.markdown-body .pl-s .pl-s1,
.markdown-body .pl-smi {
color: #24292e;
}
.markdown-body .pl-ent {
color: #22863a;
}
.markdown-body .pl-k {
color: #d73a49;
}
.markdown-body .pl-pds,
.markdown-body .pl-s,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sra,
.markdown-body .pl-sr .pl-sre {
color: #032f62;
}
.markdown-body .pl-smw,
.markdown-body .pl-v {
color: #e36209;
}
.markdown-body .pl-bu {
color: #b31d28;
}
.markdown-body .pl-ii {
background-color: #b31d28;
color: #fafbfc;
}
.markdown-body .pl-c2 {
background-color: #d73a49;
color: #fafbfc;
}
.markdown-body .pl-c2::before {
content: "^M";
}
.markdown-body .pl-sr .pl-cce {
color: #22863a;
font-weight: 700;
}
.markdown-body .pl-ml {
color: #735c0f;
}
.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
color: #005cc5;
font-weight: 700;
}
.markdown-body .pl-mi {
color: #24292e;
font-style: italic;
}
.markdown-body .pl-mb {
color: #24292e;
font-weight: 700;
}
.markdown-body .pl-md {
background-color: #ffeef0;
color: #b31d28;
}
.markdown-body .pl-mi1 {
background-color: #f0fff4;
color: #22863a;
}
.markdown-body .pl-mc {
background-color: #ffebda;
color: #e36209;
}
.markdown-body .pl-mi2 {
background-color: #005cc5;
color: #f6f8fa;
}
.markdown-body .pl-mdr {
color: #6f42c1;
font-weight: 700;
}
.markdown-body .pl-ba {
color: #586069;
}
.markdown-body .pl-sg {
color: #959da5;
}
.markdown-body .pl-corl {
color: #032f62;
text-decoration: underline;
}
.markdown-body details {
display: block;
}
.markdown-body summary {
display: list-item;
}
.markdown-body a {
background-color: transparent;
}
.markdown-body a:active,
.markdown-body a:hover {
outline-width: 0;
}
.markdown-body strong {
font-weight: inherit;
font-weight: bolder;
}
.markdown-body h1 {
font-size: 2em;
margin: .67em 0;
}
.markdown-body img {
border-style: none;
}
.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
font-family: monospace, monospace;
font-size: 1em;
}
.markdown-body hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
.markdown-body input {
font: inherit;
margin: 0;
}
.markdown-body input {
overflow: visible;
}
.markdown-body [type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
.markdown-body * {
box-sizing: border-box;
}
.markdown-body input {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.markdown-body a {
color: #0366d6;
text-decoration: none;
}
.markdown-body a:hover {
text-decoration: underline;
}
.markdown-body strong {
font-weight: 600;
}
.markdown-body hr {
background: 0 0;
border: 0;
border-bottom: 1px solid #dfe2e5;
height: 0;
margin: 15px 0;
overflow: hidden;
}
.markdown-body hr::before {
content: "";
display: table;
}
.markdown-body hr::after {
clear: both;
content: "";
display: table;
}
.markdown-body table {
border-collapse: collapse;
border-spacing: 0;
}
.markdown-body td,
.markdown-body th {
padding: 0;
}
.markdown-body details summary {
cursor: pointer;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-bottom: 0;
margin-top: 0;
}
.markdown-body h1 {
font-size: 32px;
}
.markdown-body h1,
.markdown-body h2 {
font-weight: 600;
}
.markdown-body h2 {
font-size: 24px;
}
.markdown-body h3 {
font-size: 20px;
}
.markdown-body h3,
.markdown-body h4 {
font-weight: 600;
}
.markdown-body h4 {
font-size: 16px;
}
.markdown-body h5 {
font-size: 14px;
}
.markdown-body h5,
.markdown-body h6 {
font-weight: 600;
}
.markdown-body h6 {
font-size: 12px;
}
.markdown-body p {
margin-bottom: 10px;
margin-top: 0;
}
.markdown-body blockquote {
margin: 0;
}
.markdown-body ol,
.markdown-body ul {
margin-bottom: 0;
margin-top: 0;
padding-left: 0;
}
.markdown-body ol ol,
.markdown-body ul ol {
list-style-type: lower-roman;
}
.markdown-body ol ol ol,
.markdown-body ol ul ol,
.markdown-body ul ol ol,
.markdown-body ul ul ol {
list-style-type: lower-alpha;
}
.markdown-body dd {
margin-left: 0;
}
.markdown-body code,
.markdown-body pre {
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
}
.markdown-body pre {
margin-bottom: 0;
margin-top: 0;
}
.markdown-body input::-webkit-inner-spin-button,
.markdown-body input::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
.markdown-body .border {
border: 1px solid #e1e4e8 !important;
}
.markdown-body .border-0 {
border: 0 !important;
}
.markdown-body .border-bottom {
border-bottom: 1px solid #e1e4e8 !important;
}
.markdown-body .rounded-1 {
border-radius: 3px !important;
}
.markdown-body .bg-white {
background-color: #fff !important;
}
.markdown-body .bg-gray-light {
background-color: #fafbfc !important;
}
.markdown-body .text-gray-light {
color: #6a737d !important;
}
.markdown-body .mb-0 {
margin-bottom: 0 !important;
}
.markdown-body .my-2 {
margin-bottom: 8px !important;
margin-top: 8px !important;
}
.markdown-body .pl-0 {
padding-left: 0 !important;
}
.markdown-body .py-0 {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.markdown-body .pl-1 {
padding-left: 4px !important;
}
.markdown-body .pl-2 {
padding-left: 8px !important;
}
.markdown-body .py-2 {
padding-bottom: 8px !important;
padding-top: 8px !important;
}
.markdown-body .pl-3,
.markdown-body .px-3 {
padding-left: 16px !important;
}
.markdown-body .px-3 {
padding-right: 16px !important;
}
.markdown-body .pl-4 {
padding-left: 24px !important;
}
.markdown-body .pl-5 {
padding-left: 32px !important;
}
.markdown-body .pl-6 {
padding-left: 40px !important;
}
.markdown-body .f6 {
font-size: 12px !important;
}
.markdown-body .lh-condensed {
line-height: 1.25 !important;
}
.markdown-body .text-bold {
font-weight: 600 !important;
}
.markdown-body::before {
content: "";
display: table;
}
.markdown-body::after {
clear: both;
content: "";
display: table;
}
.markdown-body > :first-child {
margin-top: 0 !important;
}
.markdown-body > :last-child {
margin-bottom: 0 !important;
}
.markdown-body a:not([href]) {
color: inherit;
text-decoration: none;
}
.markdown-body blockquote,
.markdown-body dl,
.markdown-body ol,
.markdown-body p,
.markdown-body pre,
.markdown-body table,
.markdown-body ul {
margin-bottom: 16px;
margin-top: 0;
}
.markdown-body hr {
background-color: #e1e4e8;
border: 0;
height: .25em;
margin: 24px 0;
padding: 0;
}
.markdown-body blockquote {
border-left: .25em solid #dfe2e5;
color: #6a737d;
padding: 0 1em;
}
.markdown-body blockquote > :first-child {
margin-top: 0;
}
.markdown-body blockquote > :last-child {
margin-bottom: 0;
}
.markdown-body kbd {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5;
color: #444d56;
display: inline-block;
font-size: 11px;
line-height: 10px;
padding: 3px 5px;
vertical-align: middle;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
font-weight: 600;
line-height: 1.25;
margin-bottom: 16px;
margin-top: 24px;
}
.markdown-body h1 {
font-size: 2em;
}
.markdown-body h1,
.markdown-body h2 {
border-bottom: 1px solid #eaecef;
padding-bottom: .3em;
}
.markdown-body h2 {
font-size: 1.5em;
}
.markdown-body h3 {
font-size: 1.25em;
}
.markdown-body h4 {
font-size: 1em;
}
.markdown-body h5 {
font-size: .875em;
}
.markdown-body h6 {
color: #6a737d;
font-size: .85em;
}
.markdown-body ol,
.markdown-body ul {
padding-left: 2em;
}
.markdown-body ol ol,
.markdown-body ol ul,
.markdown-body ul ol,
.markdown-body ul ul {
margin-bottom: 0;
margin-top: 0;
}
.markdown-body li {
word-wrap: break-all;
}
.markdown-body li > p {
margin-top: 16px;
}
.markdown-body li + li {
margin-top: .3em;
}
.markdown-body dl {
padding: 0;
}
.markdown-body dl dt {
font-size: 1em;
font-style: italic;
font-weight: 600;
margin-top: 16px;
padding: 0;
}
.markdown-body dl dd {
margin-bottom: 16px;
padding: 0 16px;
}
.markdown-body table {
display: block;
overflow: auto;
width: 100%;
}
.markdown-body table th {
font-weight: 600;
}
.markdown-body table td,
.markdown-body table th {
border: 1px solid #dfe2e5;
padding: 6px 13px;
}
.markdown-body table tr {
background-color: #fff;
border-top: 1px solid #c6cbd1;
}
.markdown-body table tr:nth-child(2n) {
background-color: #f6f8fa;
}
.markdown-body img {
background-color: #fff;
box-sizing: content-box;
max-width: 100%;
height: auto;
}
.markdown-body img[align="right"] {
padding-left: 20px;
}
.markdown-body img[align="left"] {
padding-right: 20px;
}
.markdown-body code {
background-color: rgba(27, 31, 35, .05);
border-radius: 3px;
font-size: 85%;
margin: 0;
padding: .2em .4em;
}
.markdown-body pre {
word-wrap: normal;
}
.markdown-body pre > code {
background: 0 0;
border: 0;
font-size: 100%;
margin: 0;
padding: 0;
white-space: pre;
word-break: normal;
}
.markdown-body .highlight {
margin-bottom: 16px;
}
.markdown-body .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.markdown-body .highlight pre,
.markdown-body pre {
background-color: #f6f8fa;
border-radius: 3px;
font-size: 85%;
line-height: 1.45;
overflow: auto;
padding: 16px;
}
.markdown-body pre code {
background-color: transparent;
border: 0;
display: inline;
line-height: inherit;
margin: 0;
max-width: auto;
overflow: visible;
padding: 0;
word-wrap: normal;
}
.markdown-body .commit-tease-sha {
color: #444d56;
display: inline-block;
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 90%;
}
.markdown-body .blob-wrapper {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
overflow-x: auto;
overflow-y: hidden;
}
.markdown-body .blob-wrapper-embedded {
max-height: 240px;
overflow-y: auto;
}
.markdown-body .blob-num {
color: rgba(27, 31, 35, .3);
cursor: pointer;
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
line-height: 20px;
min-width: 50px;
padding-left: 10px;
padding-right: 10px;
text-align: right;
user-select: none;
vertical-align: top;
white-space: nowrap;
width: 1%;
}
.markdown-body .blob-num:hover {
color: rgba(27, 31, 35, .6);
}
.markdown-body .blob-num::before {
content: attr(data-line-number);
}
.markdown-body .blob-code {
line-height: 20px;
padding-left: 10px;
padding-right: 10px;
position: relative;
vertical-align: top;
}
.markdown-body .blob-code-inner {
color: #24292e;
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
overflow: visible;
white-space: pre;
word-wrap: normal;
}
.markdown-body .pl-token.active,
.markdown-body .pl-token:hover {
background: #ffea7f;
cursor: pointer;
}
.markdown-body kbd {
background-color: #fafbfc;
border: 1px solid #d1d5da;
border-bottom-color: #c6cbd1;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #c6cbd1;
color: #444d56;
display: inline-block;
font: 11px SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
line-height: 10px;
padding: 3px 5px;
vertical-align: middle;
}
.markdown-body :checked + .radio-label {
border-color: #0366d6;
position: relative;
z-index: 1;
}
.markdown-body .tab-size[data-tab-size="1"] {
tab-size: 1;
}
.markdown-body .tab-size[data-tab-size="2"] {
tab-size: 2;
}
.markdown-body .tab-size[data-tab-size="3"] {
tab-size: 3;
}
.markdown-body .tab-size[data-tab-size="4"] {
tab-size: 4;
}
.markdown-body .tab-size[data-tab-size="5"] {
tab-size: 5;
}
.markdown-body .tab-size[data-tab-size="6"] {
tab-size: 6;
}
.markdown-body .tab-size[data-tab-size="7"] {
tab-size: 7;
}
.markdown-body .tab-size[data-tab-size="8"] {
tab-size: 8;
}
.markdown-body .tab-size[data-tab-size="9"] {
tab-size: 9;
}
.markdown-body .tab-size[data-tab-size="10"] {
tab-size: 10;
}
.markdown-body .tab-size[data-tab-size="11"] {
tab-size: 11;
}
.markdown-body .tab-size[data-tab-size="12"] {
tab-size: 12;
}
.markdown-body .task-list-item {
list-style-type: none;
}
.markdown-body .task-list-item + .task-list-item {
margin-top: 3px;
}
.markdown-body .task-list-item input {
margin: 0 .2em .25em -1.6em;
vertical-align: middle;
}
.markdown-body hr {
border-bottom-color: #eee;
}
.markdown-body .pl-0 {
padding-left: 0 !important;
}
.markdown-body .pl-1 {
padding-left: 4px !important;
}
.markdown-body .pl-2 {
padding-left: 8px !important;
}
.markdown-body .pl-3 {
padding-left: 16px !important;
}
.markdown-body .pl-4 {
padding-left: 24px !important;
}
.markdown-body .pl-5 {
padding-left: 32px !important;
}
.markdown-body .pl-6 {
padding-left: 40px !important;
}
.markdown-body .pl-7 {
padding-left: 48px !important;
}
.markdown-body .pl-8 {
padding-left: 64px !important;
}
.markdown-body .pl-9 {
padding-left: 80px !important;
}
.markdown-body .pl-10 {
padding-left: 96px !important;
}
.markdown-body .pl-11 {
padding-left: 112px !important;
}
.markdown-body .pl-12 {
padding-left: 128px !important;
}
================================================
FILE: site/src/assets/styles/vendor/_prism.scss
================================================
/**
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/
code[class*="language-"],
pre[class*="language-"] {
color: #ccc;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #2d2d2d;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
================================================
FILE: site/src/demo.njk
================================================
---
title: Demo
layout: layouts/base.njk
description: Faster subsequent page-loads by prefetching in-viewport links during idle time.
eleventyNavigation:
key: Demo
order: 3
---
{% extends "layouts/normal-section-wrapper.njk" %}
{% block section %}
{% markdownConvert %}
## Demos
This page contains some demo sites that use Quicklink to improve navigation, grouped by architecture: **Multi Page Apps** / **Single Page Apps**.
If you like the library, and want to try them on your site, check out the **Installation** section of the [home page](/).
#### Multi Page Apps
In this demo you’ll compare an ecommerce site with and without Quicklink to see how navigation is improved thanks to the library.
The following waterfall shows a typical navigation for a site without Quicklink (top) vs. the same site using the library (bottom):
{% endmarkdownConvert %}
{% markdownConvert %}
To try the demo:
1. Open the [unoptimized site](https://mini-ecomm.glitch.me/) in Chrome.
1. Open **DevTools** and go to the **Network panel** to simulate a **Fast 3G** Connection.
1. Pick **Galaxy S5** as a simulated device.
1. Make sure **Disable cache** is not checked.
1. Reload the page.
{% endmarkdownConvert %}
{% markdownConvert %}
Now, measure performance on the same site, that uses Quicklink:
1. Open the [optimized site](https://mini-ecomm-quicklink.glitch.me/) in Chrome.
1. Open **DevTools** and go to the **Network panel** to simulate a **Fast 3G** Connection.
1. Pick **Galaxy S5** as a simulated device.
1. Make sure **Disable cache** is not checked.
1. Reload the page.
Prefetched links can be identified in the **Network** panel by having `quicklink` as the **Initiator** and **Lowest** as the **Priority**:
{% endmarkdownConvert %}
{% markdownConvert %}
To measure the impact of `quicklink` on navigations:
1. Clear the **Network** trace.
1. Click on a list item.
1. Take a look at the **Network** panel.
{% endmarkdownConvert %}
{% markdownConvert %}
In the **Size** column of the **Network** panel the trace shows that the product page was retrieved from the **prefetch cache** and now takes **3ms** to load: a **97% improvement** compared to the unoptimized version.
Here is a comparison video:
{% endmarkdownConvert %}
{% markdownConvert %}
### Single Page Apps
Quicklink 2.0 includes support for React-based single-page-apps. This has been covered to the detail in this [guide](https://web.dev/quicklink/).
To try the demo:
1. Open the [optimized site](https://create-react-app-quicklink.glitch.me/) in Chrome.
1. Open DevTools and go to the **Network** panel to simulate a **Fast 3G** Connection.
1. Pick **Galaxy S5** as a simulated device.
1. Make sure **Disable cache** is not checked.
1. Reload the page.
When the home page loads the chunks for that route are loaded. After that, `quicklink` prefetches the route's chunks for the in-viewport links:
{% endmarkdownConvert %}
{% markdownConvert %}
Next:
1. Clear the **Network** log again.
1. Make sure **Disable** cache is not checked.
1. Click the Blog link to navigate to that page.
{% endmarkdownConvert %}
{% markdownConvert %}
The Size column indicates that these chunks were retrieved from the "prefetch cache", instead of the network. Loading these chunks without a Quicklink takes approximately 580ms. Using the library it takes 2ms, which represents a 99% reduction!
{% endmarkdownConvert %}
{% endblock %}
================================================
FILE: site/src/index.njk
================================================
---
title: Home
layout: layouts/base.njk
description: Faster subsequent page-loads by prefetching in-viewport links during idle time.
eleventyNavigation:
key: Home
order: 0
extra_head:
---
{% include "components/heading.njk" %}
{% include "components/why-quicklink.njk" %}
{% include "components/copy-snippet.njk" %}
{% include "components/download.njk" %}
{% include "components/trusted-by.njk" %}
{% include "components/installation.njk" %}
{% include "components/usage.njk" %}
{% include "components/over-prefetching.njk" %}
{% include "components/react.njk" %}
{% include "components/chrome-extension.njk" %}
{% include "components/why-prefetch.njk" %}
{% include "components/use-with.njk" %}
================================================
FILE: site/src/measure.njk
================================================
---
title: Measure
layout: layouts/base.njk
description: Faster subsequent page-loads by prefetching in-viewport links during idle time.
eleventyNavigation:
key: Measure
order: 4
---
{% extends "layouts/normal-section-wrapper.njk" %}
{% block section %}
{% markdownConvert %}
## Measuring impact of Quicklink in sites
Implementing Quicklink in sites can speed up navigations, by automatically prefetching in-viewport links during idle time.
Different metrics can be improved as a result of this, the most common ones being [Start Render](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide#TOC-Start-Render:) and [First Contentful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint).
In this section, we explore different ways of measuring the impact of Quicklink in sites. To showcase that, we’ll use the following sites:
- An [unoptimized e-commerce demo](https://mini-ecomm.glitch.me/), consisting of a listing and a product page. The demo introduces a 1s delay before the product page response, to similate the backend processing time of a real e-commerce site. You can see the code, and make changes by remixing the [Glitch project](https://glitch.com/edit/#!/mini-ecomm?path=server.js:11:58).
- An [optimized version of the site](https://mini-ecomm-quicklink.glitch.me/), which is a copy of the original version, but this time, using Quicklink in the listing page, to prefetch links that come to the view. You can view and edit the code, in the [Glitch project](https://glitch.com/edit/#!/mini-ecomm-quicklink?path=server.js:1:0).
If you take a look at the code of the listing page, in the optimized version of the site, you'll find the code to initialize Quicklink:
{% endmarkdownConvert %}
{% highlight "js" %}
{% endhighlight %}
{% markdownConvert %}
## Using Chrome DevTools
The first tool you’ll use is [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools), which is useful both for local development, and also for production URLs.
First, measure performance before implementing Quicklink:
- Open the [unoptimized demo](https://mini-ecomm.glitch.me/) in Chrome.
- Open the **Network** panel and simulate a **Fast 3G** Connection.
- Pick **Galaxy S5** as simulated device.
- Make sure **Disable cache** is not checked.
- Reload the page.
- Click on the first product in the listing.
Take a look at the **Time** column: the product page takes approximately **2.5s** to load:
{% endmarkdownConvert %}
{% markdownConvert %}
Now, measure performance after implementing Quicklink:
- Open the [optimized demo](https://mini-ecomm-quicklink.glitch.me/) in Chrome.
- Open the **Network** panel and simulate a Fast 3G Connection.
- Pick **Galaxy S5** as simulated device.
- Make sure **Disable cache** is not checked.
- Reload the page.
Prefetched links can be identified in the Network panel by having Quicklink as the **Initiator** and **Lowest** as the Priority:
{% endmarkdownConvert %}
{% markdownConvert %}
To measure the impact of Quicklink on navigations:
- Click on a list item.
- Take a look at the **Network** panel.
{% endmarkdownConvert %}
{% markdownConvert %}
In the Size column of the **Network** panel the trace shows that the product page was retrieved from the **prefetch cache** and now takes **3ms** to load: a **97% improvement** compared to the unoptimized version.
## Using Webpagetest
Webpagetest can be used to measure impact on real devices and different connection types. You'll use [WPT Scripting](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting) to simulate a user arriving at the home page and clicking one of the product items.
Open to webpagetest.org.
Pick **Nexus 5** as Test Location.
In the Advanced Settings tab, pick **3GFast** in the connection type.
In the Script tab, place the following script:
```
logData 0
navigate https://mini-ecomm.glitch.me/
logData 1
execAndWait document.querySelector('a').click()
```
The script instructs WPT to open the [unoptimized demo](https://mini-ecomm.glitch.me/) and simulate a click on the first product of the listing. Metrics are captured only for the product page. Here is the [resultiing test](https://www.webpagetest.org/result/191103_TM_e68d81788d8744762301b44c6e3e72d2/).
Repeat the process on [the demo](https://mini-ecomm-quicklink.glitch.me/) that uses Quicklink. The script looks like:
```
logData 0
navigate https://mini-ecomm.glitch.me/
logData 1
execAndWait document.querySelector('a').click()
```
Here is the [resultiing test](https://www.webpagetest.org/result/191103_E3_f8217e45ad837ac084868d4f3b9a4a73/).
The following table compares the main metrics obtained for each of the sites:
{% endmarkdownConvert %}
{% markdownConvert %}
Next, create a comparison between the tests.
- Open the [WPT test](https://www.webpagetest.org/result/191103_TM_e68d81788d8744762301b44c6e3e72d2/) for the unoptimized site.
- Click on the median run, that appears in the "First View" cell of the report.
- Repeat the same process in the [optimized test](https://www.webpagetest.org/result/191103_E3_f8217e45ad837ac084868d4f3b9a4a73/).
To create a comparison test, you need to append the IDs from the previous links as comma separated valuees, and send them as query params to `https://www.webpagetest.org/video/compare.php`:
```
https://www.webpagetest.org/video/compare.php?tests=test_id_1,test_id_2
```
The resulting comparison of the test ran previously can be found [here](https://www.webpagetest.org/video/compare.php?tests=191103_TM_e68d81788d8744762301b44c6e3e72d2-r%3A8-c%3A0%2C191103_E3_f8217e45ad837ac084868d4f3b9a4a73-r%3A7-c%3A0&thumbSize=200&ival=500&end=visual).
### Visual Comparison
The unoptimized site starts rendering approximately at **2.5s**, the demo that uses Quicklink, starts at **1.2s**.
{% endmarkdownConvert %}
{% markdownConvert %}
### Video
A video can be generated from the [comparison page](https://www.webpagetest.org/video/compare.php?tests=191103_TM_e68d81788d8744762301b44c6e3e72d2-r%3A8-c%3A0%2C191103_E3_f8217e45ad837ac084868d4f3b9a4a73-r%3A7-c%3A0&thumbSize=200&ival=500&end=visual), by clicking on **Create Video**.
{% endmarkdownConvert %}
{% markdownConvert %}
### Using RUM (Real user monitoring) tools
RUM tools, let you visualize how different metrics evolve in time for real users. If prefetching affects a large amount of pages, you might be able to see more page loads being loaded faster after implementing it, which can be reflected in metrics [First Contentful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint).
For example, the [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report/) provides performance metrics for how real-world Chrome users experience popular destinations on the web.
CrUX data is available in [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) and also in [BigQuery](https://bigquery.cloud.google.com/dataset/chrome-ux-report:all?pli=1), but you can obtain a quick visualization of the evolution of your metrics using the [CrUX dashboard](https://g.co/chromeuxdash) (refer to [this guide](https://web.dev/chrome-ux-report-data-studio-dashboard/) for more details).
The report contains a section for First Contentful Paint. If a large number of page views are prefetched as a result of implementing Quicklink, this graph could show a positive evolution in time.
**Note:** Even when checking the performance for real users is a general performance best practice, it’s usually hard to correlate the overall performance improvement of a site with a single optimization like this one. With that said, the best way to make sure you’re measuring exactly this change is to perform a before / after test with laboratory tools as explained in previous sections.
### Using Quicklink Chrome extension
[Quicklink Chrome Extension](https://chrome.google.com/webstore/detail/quicklink-chrome-extensio/epmplkdcjhgigmnjmjibilpmekhgkbeg) injects Quicklink in every site a user visits. You can use it to measure the potential impact of implementing the library on a site, before doing it.
Since the extension will simulate how the library would work when implemented, you can install the extension and then run the tests with DevTools, as described in the previous section.
### Conclusion
Quicklink can highly improve navigations by automatically prefetching in-viewport links, . We’ve explored different tools to measure the impact of implementing it in your site.
Metrics like [Start Render](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide#TOC-Start-Render:) and [First Contentful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint) can be directly impacted by this change, but other metrics can be also improved as a result of this, as seen in the tests performed in this guide.
Laboratory testing tools, like Chrome DevTools and Webpagetest can help you have an accurate idea of the impact of this change, by running a before / after comparison. Also, If the number of pages affected by this change is large enough, you might be able to visualize the impact of the implementation on real user monitoring (RUM) tools as well.
{% endmarkdownConvert %}
{% endblock %}
================================================
FILE: site/src/robots.njk
================================================
---
permalink: /robots.txt
layout: null
eleventyExcludeFromCollections: true
---
# www.robotstxt.org
User-agent: *
Disallow:{% if site.isNetlify %} /{% endif %}
Sitemap: {{ site.url + "/sitemap.xml" }}
================================================
FILE: site/src/site.webmanifest
================================================
{
"name": "Quicklink",
"short_name": "Quicklink",
"icons": [
{
"src": "/assets/images/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/images/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"theme_color": "#fff",
"background_color": "#fff",
"display": "standalone"
}
================================================
FILE: site/src/sitemap.njk
================================================
---
permalink: /sitemap.xml
layout: null
eleventyExcludeFromCollections: true
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!
================================================ FILE: test/fixtures/2.html ================================================Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!
================================================ FILE: test/fixtures/3.html ================================================Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!
================================================ FILE: test/fixtures/4.html ================================================Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!
================================================ FILE: test/fixtures/index.html ================================================
