diff --git a/site/src/assets/images/screenshots/spa-devtools-optimized-1.png b/site/src/assets/images/screenshots/spa-devtools-optimized-1.png
new file mode 100644
index 00000000..b70cb498
Binary files /dev/null and b/site/src/assets/images/screenshots/spa-devtools-optimized-1.png differ
diff --git a/site/src/assets/images/screenshots/spa-devtools-optimized-2.png b/site/src/assets/images/screenshots/spa-devtools-optimized-2.png
new file mode 100644
index 00000000..ba6ba9c3
Binary files /dev/null and b/site/src/assets/images/screenshots/spa-devtools-optimized-2.png differ
diff --git a/site/src/demo.njk b/site/src/demo.njk
index 1ed8c8ba..911e8570 100644
--- a/site/src/demo.njk
+++ b/site/src/demo.njk
@@ -2,25 +2,112 @@
title: Quicklink
layout: layouts/base.njk
description: Faster subsequent page-loads by prefetching in-viewport links during idle time.
-sections:
- demo:
- title: "Demo"
- content:
- items:
- -
- description: A demo showing how to use Quicklink on a simple multi-page website.
- link: "* [Using Quicklink in a multi-page site](https://github.com/GoogleChromeLabs/quicklink/tree/master/demos/news)"
- -
- description: A demo showing how to use Quicklink with Workbox for offline caching and links in the visible viewport.
- link: "* [Using Quicklink with Service Workers (via Workbox)](https://github.com/GoogleChromeLabs/quicklink/tree/master/demos/news-workbox)"
- - description: A demo showing how to integrate Quicklink with create-react-app.
- link: "* [Using Quicklink in a React single-page app](https://github.com/GoogleChromeLabs/quicklink/tree/master/demos/spa)"
---
{% extends "layouts/normal-section-wrapper.njk" %}
{% block section %}
-{% sectionTitle sections.demo.title %}
-{% for item in sections.demo.content.items %}
- {{ item.description | markdown | safe }}
- {{ item.link | markdown | safe }}
-{% endfor %}
+{% 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 %}
+
+
+
+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.
+
+
+
+{% 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 %}
+
+