HyperLight Websites

Chris Zacharias
Hyper-LightWebsites
CEO, FOUNDER @
chris@imgix.com
@zacman85
FITC 2019

1. https://en.wikipedia.org/wiki/.kkrieger
“If they can build an entire Quake clone1 in LESS than 100KB,
WHY can’t YouTube load in under 1MB?”
Mike Solomon
Early engineer at YouTube.

YouTube Feather
A hyper-light version of YouTube,
back in 2010.
Constraints
• Start the video as fast as possible.
• Maintain >80% of the user experience.
• Use the latest technologies (circa 2010).
• Make as few requests as possible.

Results
• 98KB for “everything but the video”.
• 14 total requests from 3 domains.
• First production HTML5 video player.
• Opened up new regions around the world.
YouTube Feather
A hyper-light version of YouTube,
back in 2010.

High latency environments are EVERYWHERE.

A hyper-light website is a RECONCEPTUALIZATION  
of a website, designed to push the limits of performance.

The goal is to provide a roughly consistent
version of a website that can be delivered
AS FAST AS POSSIBLE.

Steps to build a hyper-light website:
1. Identify the most active page on your website.
2. Build a new version of that page from scratch with a singular focus on optimization.
3. Assemble all of the HTML, CSS and Javascript into a single “hyper-light” HTML page.
4. Serve the hyper-light page behind a CDN with compression and HTTP/2 pipelining.
5. Measure both the original page, uncached, and the hyper-light page.
6. Analyze the results.

Things you want to KEEP doing:
• Serve real content, preferably dynamically.
• Responsive layouts (at minimum, common breakpoints).
• Responsive images.
• Sprites, in some cases.
• SVG graphics (optimized responsibly).
• Accessibility.

Things you want to STOP doing:
(for the purposes of this exercise)
• Ads and social media trackers.
• CMS integrations.
• Javascript libraries.
• CSS layouts via frameworks.
• Lazy loading content (except images).
• Data URIs, unless absolutely certain.
• Javascript and CSS compilation.
• Custom web fonts.

Original
Requests 181
Domains 50
Bandwidth
Total Content Size 8.7 MBs
Total Transfer Size 5.9 MBs
Non-Image
Content
2.0 MBs
Image Content 3.9 MBs
Billed By CDN 4.9 MBs
Response Times
(First Paint —>
Fully Loaded)
2G 22 sec —-—> 2 min 47 sec
3G 6.4 sec ——> 53 sec
Hi-Speed 1.5 sec ——-> 16.7 sec

Walking through an example
Original

Original Hyper-Light
Requests 181
🥁
Domains 50
Bandwidth
Non-Images
Content
2.0 MBs
Response Times
(First Paint —>
Fully Loaded)
2G 22 sec —-—> 2 min 47 sec
3G 6.4 sec ——> 53 sec

Requests 181 32 -82.3%
Domains 50 2 -96.0%
Bandwidth
Non-Images
Content
2.0 MBs
Response Times
(First Paint —>
Fully Loaded)
2G 22 sec —-—> 2 min 47 sec
3G 6.4 sec ——> 53 sec

Requests 181 32 -82.3%
Domains 50 2 -96.0%
Bandwidth
Total Content Size 8.7 MBs 1.1 MBs -87.4%
Total Transfer Size 5.9 MBs 1.0 MBs -83.1%
Non-Images
Content
2.0 MBs 19 KBs -99.1%
Image Content 3.9 MBs 999.4 KBs -74.4%
Billed By CDN 4.9 MBs 1.0 MBs -79.6%
Response Times
(First Paint —>
Fully Loaded)
2G 22 sec —-—> 2 min 47 sec
3G 6.4 sec ——> 53 sec

Requests 181 32 -82.3%
Domains 50 2 -96.0%
Bandwidth
Total Content Size 8.7 MBs 1.1 MBs -87.4%
Total Transfer Size 5.9 MBs 1.0 MBs -83.1%
Non-Images
Content
2.0 MBs 19 KBs -99.1%
Image Content 3.9 MBs 999.4 KBs -74.4%
Billed By CDN 4.9 MBs 1.0 MBs -79.6%
Response Times
(First Paint —>
Fully Loaded)
2G 22 sec —-—> 2 min 47 sec 773 msec ——-> 11 sec 15.7x
3G 6.4 sec ——> 53 sec 556 msec ——> 3.7 sec 14.3x
Hi-Speed 1.5 sec ——-> 16.7 sec 435 msec ——> 621 msec 26.9x

<!DOCTYPE html>
<html>
<head>
<title>Car and Driver</title>
<style type=“text/css”>
{% include “styles.css” %}
</style>
<script type=“application/javascript”>
{% include “main.js” %}
</script>
</head>
<body>
{% include “sprite.svg” %}
<div>Hello World</div>
</body>
</html>
Inline as much as possible server-side.

Use HTML5 semantic elements.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<aside>
</aside>
<article>
Hello World!
</article>
</section>
<footer>
</footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<aside>
</aside>
<article>
Hello World!
</article>
</section>
<footer>
</footer>
</body>
</html>
95%
of users
Use HTML5 semantic elements.

Relative layout using root em sizing.
html {
font-size: 16px; /* root ems */
}
h1 {
font-size: 2rem; /* 32 px */
}
img.splash {
width: 50rem; /* 800 px */
height: 40rem; /* 600 px */
}
</style>

html {
font-size: 16px; /* root ems */
}
h1 {
font-size: 2rem; /* 32 px */
}
img.splash {
width: 50rem; /* 800 px */
height: 40rem; /* 600 px */
}
</style>
Relative layout using root em sizing.
96%
of users

CSS grids.
1. https://material.io/design/layout/responsive-layout-grid.html
<html>
<head>
#body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
align-items: top;
}
header {
grid-column: 1 / span 3;
}
article {
}
</style>
</head>
<body>
<header>Header</header>
<article>Content</article>
<aside>Side</aside>
</body>
</html>
Header
Side
Content

87%
of users
CSS grids.
1. https://material.io/design/layout/responsive-layout-grid.html
<html>
<head>
#body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
align-items: top;
}
header {
}
article {
}
</style>
</head>
<body>
<header>Header</header>
<article>Content</article>
<aside>Side</aside>
</body>
</html>
Header
Side
Content

<html>
<head>
<template id=“article-template”>
<article>
<h1>Title</h1>
<p>Description</p>
</article>
</template>
<script type=“text/javascript”>
function addArticle(title, description) {
var template = document.getElementById(“article-template”);
var clone = document.importNode(template.content, true);
/* Make changes to the clone’s DOM. */
document.getElementById(“articles”).appendChild(clone);
}
</script>
</head>
<body>
<section id=“articles”></section>
</body>
</html>
HTML templates.

89%
of users
<html>
<head>
<template id=“article-template”>
<article>
<h1>Title</h1>
<p>Description</p>
</article>
</template>
<script type=“text/javascript”>
function addArticle(title, description) {
var template = document.getElementById(“article-template”);
var clone = document.importNode(template.content, true);
/* Make changes to the clone’s DOM. */
document.getElementById(“articles”).appendChild(clone);
}
</script>
</head>
<body>
<section id=“articles”></section>
</body>
</html>
HTML templates.

#search-form { display: none; }
#search-form:target { display: block; }
</style>
…
<a href=“#search-form”>Show Search</a>
<form id=“search-form”>
<input type=“text” name=“search-query”>
<input type=“submit” value=“Search”>
<a href=“#”>Cancel</a>
</form>
State transitions using the CSS :target selector

Fragment identiﬁer changes WILL get added to the browser history.
⚠
</style>
…
</form>

96%
of users
Fragment identiﬁer changes WILL get added to the browser history.
⚠
</style>
…
</form>

Replacing SVG with HTML and CSS.
Original
2 x SVG arrow graphics = ~5KBs
Hyper-light
Angle quotes + border-radius = 1KB
.arrow {
background-color: #4D80AB;
border-radius: 50%;
color: white;
font-weight: bold;
height: 1rem;
width: 1rem;
}
…
</style>
…
<a href=“#prev” class=“arrow”>&lasquo;</a>
<span class=“pages”><em>1</em> of <em>5</em></span>
<a href=“#next” class=“arrow”>&rasquo;</a>

93%
of users
Replacing SVG with HTML and CSS.
Original
2 x SVG arrow graphics = ~5KBs
Hyper-light
Angle quotes + border-radius = 1KB
.arrow {
background-color: #4D80AB;
border-radius: 50%;
color: white;
font-weight: bold;
height: 1rem;
width: 1rem;
}
…
</style>
…
<a href=“#prev” class=“arrow”>&lasquo;</a>
<span class=“pages”><em>1</em> of <em>5</em></span>
<a href=“#next” class=“arrow”>&rasquo;</a>

Using an SVG sprite with fragment identiﬁers.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="icon-comments" viewBox="380 0 20 20">
<title>Comments</title>
<path d=“M394.57,4.19H385a1.2,…” style=“fill: #1383b3;” />
</symbol>
…
</svg>
…
<svg><use xlink:href=“#icon-comments” /></svg>
1. https://css-tricks.com/svg-symbol-good-choice-icons/

Using an SVG sprite with fragment identiﬁers.
91%
of users
1. https://css-tricks.com/svg-symbol-good-choice-icons/
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="icon-comments" viewBox="380 0 20 20">
<title>Comments</title>
<path d=“M394.57,4.19H385a1.2,…” style=“fill: #1383b3;” />
</symbol>
…
</svg>
…
<svg><use xlink:href=“#icon-comments” /></svg>

Image-based sprites.
.car-image {
background-image: url(/car-sprite.jpg);
background-size: 100%;
height: 60px;
width: 140px;
}
#sports-car.car-image {
background-position: -280px -120px;
}
</style>
<div id=“sports-car” class=“car-image”></div>

In most cases, HTTP/2 pipelining is the better approach.
⚠
.car-image {
height: 60px;
width: 140px;
}
}
</style>

96%
of users
In most cases, HTTP/2 pipelining is the better approach.
⚠
.car-image {
height: 60px;
width: 140px;
}
}
</style>

<img src=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress”
srcset=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress 1x,
https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress&dpr=2 2x”
width=“200” alt=“Honda”>
Responsive images using srcset.

Responsive images using srcset.Responsive images using srcset.

Responsive images using srcset.
88%
of users

GZIP compression.
# A simple nginx.conf with gzip turned on.
server {
listen 8080;
server_name localhost;
gzip on;
gzip_comp_level 9;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}

GZIP compression.
Make sure to vary on Accept-Encoding in your caching layers.
⚠
server {
listen 8080;
gzip on;
gzip_comp_level 9;
location / {
}
}

99%
of users
GZIP compression.
Make sure to vary on Accept-Encoding in your caching layers.
⚠
server {
listen 8080;
gzip on;
gzip_comp_level 9;
location / {
}
}

Experiment with Brotli.
tom@servo:/www$ cd /data/repos && git clone https://github.com/google/brotli.git
tom@servo:/www$ sudo ln -s /data/repos/brotli/python/bro.py /usr/local/bin/bro.py
tom@servo:/www$ bro.py -i index.html -o index.html.br

84%
of users

HTTP/2 pipelining.
84%
of users

Measuring the results using Sitespeed.
tom@servo:/data$ docker run -v “$(pwd)”:/sitespeed.io
> sitespeedio/sitespeed.io:7.3.6 https://www.caranddriver.com

Zeroing in on the biggest wins.
15 images
requests
~600KBs
1 image request
~50KBs

An SVG sprite sheet would be even better at ~15KBs.
Zeroing in on the biggest wins.
15 images
requests
~600KBs
1 image request
~50KBs

Original Improved Hyper-Light
Requests 181
🥁
32
Domains 50 2
Bandwidth
Total Content Size 8.7 MBs 1.1 MBs
Total Transfer Size 5.9 MBs 1.0 MBs
Non-Images 2.0 MBs 19 KBs
Image Content 3.9 MBs 999.4 KBs
Billed By CDN 4.9 MBs 1.0 MBs
Response Times
(First Paint —>
Fully Loaded)
2G 22 sec —> 2 min 47 sec 773 msec —-> 11 sec
3G 6.4 sec —> 53 sec 556 msec —> 3.7 sec
Hi-Speed 1.5 sec —-> 16.7 sec 435 msec —> 621 msec

Requests 181 234 32
Domains 50 74 2
Bandwidth
Total Content Size 8.7 MBs 1.1 MBs
Total Transfer Size 5.9 MBs 1.0 MBs
Non-Images 2.0 MBs 19 KBs
Image Content 3.9 MBs 999.4 KBs
Billed By CDN 4.9 MBs 1.0 MBs
Response Times
(First Paint —>
Fully Loaded)
3G 6.4 sec —> 53 sec 556 msec —> 3.7 sec

Requests 181 234 32
Domains 50 74 2
Bandwidth
Total Content Size 8.7 MBs 6.2 MBs 1.1 MBs
Total Transfer Size 5.9 MBs 2.8 MBs 1.0 MBs
Non-Images 2.0 MBs 1.9 MBs 19 KBs
Image Content 3.9 MBs 993.5 KBs 999.4 KBs
Billed By CDN 4.9 MBs 1 MBs 1.0 MBs
Response Times
(First Paint —>
Fully Loaded)
3G 6.4 sec —> 53 sec 556 msec —> 3.7 sec

Requests 181 234 32
Domains 50 74 2
Bandwidth
Total Content Size 8.7 MBs 6.2 MBs 1.1 MBs
Total Transfer Size 5.9 MBs 2.8 MBs 1.0 MBs
Non-Images 2.0 MBs 1.9 MBs 19 KBs
Image Content 3.9 MBs 993.5 KBs 999.4 KBs
Billed By CDN 4.9 MBs 1 MBs 1.0 MBs
Response Times
(First Paint —>
Fully Loaded)
2G 22 sec —> 2 min 47 sec 7.6 sec —-> 1 min 12 sec 773 msec —-> 11 sec
3G 6.4 sec —> 53 sec 2.7 sec —> 19.3 sec 556 msec —> 3.7 sec
Hi-Speed 1.5 sec —-> 16.7 sec 627 msec —> 9.7 sec 435 msec —> 621 msec

• Repeat the process with
other pages.
• Run a 1% test in the wild.
• Build a performance budget.
• Run Sitespeed (or similar)
regularly.
{
"browsertime.pageSummary": [{
"metric": "statistics.timings.firstPaint.median",
"max": 1500
}],
"pagexray.pageSummary": [{
"metric": "transferSize",
"max": 1000000
}, {
"metric": "requests",
"max": 45
}
}
1. https://www.sitespeed.io/documentation/sitespeed.io/performance-budget/
Taking the next steps…

Source code:
https://github.com/zacman85/hyperlight-websites
Live demo:
http://hlw.chriszacharias.com
Special thanks to Miguel Cardona.
Thankyou!
Chris Zacharias
CEO, FOUNDER @
chris@imgix.com
@zacman85

HyperLight Websites

More Related Content

What's hot

Similar to HyperLight Websites

More from FITC

Recently uploaded

HyperLight Websites