SlideShare a Scribd company logo
1 of 69
Download to read offline
Chris Zacharias
Hyper-Light Websites
CEO, FOUNDER @
chris@imgix.com
@zacman85
FITC Spotlight: Web Performance
“If they can build an entire Quake clone1 in LESS than 100KB,
WHY can’t we get YouTube to load in under 1MB?”
1. https://en.wikipedia.org/wiki/.kkrieger
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,
even to this day.
A hyper-light website is a RECONCEPTION of a
web-based user interface designed for the purposes
of pushing the limits of performance.
Buildinga hyper-lightwebsite.
The goal is to provide an experience, roughly consistent
with the real thing, that can be delivered to an end user
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.
Arealworldexample.
Walking through an example
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
Hyper-Light
Walking through an example
Original
Original Hyper-Light
Requests 181
🥁
Domains 50
Bandwidth
Total Content
Size
8.7 MBs
Total Transfer
Size
5.9 MBs
Non-Images
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
Original Hyper-Light
Requests 181 32 -82.3%
Domains 50 2 -96.0%
Bandwidth
Total Content
Size
8.7 MBs
Total Transfer
Size
5.9 MBs
Non-Images
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
Original Hyper-Light
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
Hi-Speed 1.5 sec ——-> 16.7 sec
Original Hyper-Light
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
Some improvements!
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
Original Improved Hyper-Light
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)
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
Original Improved Hyper-Light
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 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
Original Improved Hyper-Light
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
Techniquesyoushoulduse.
Inline as much as possible server-side.
<!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>
<!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>
<title>Car and Driver</title>
</head>
<body>
<header>
<nav></nav>
</header>
<section>
<aside>
</aside>
<article>
Hello World!
</article>
</section>
<footer>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Car and Driver</title>
</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.
<style type=“text/css”>
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
<style type=“text/css”>
html {
font-size: 16px; /* root ems */
}
h1 {
font-size: 2rem; /* 32 px */
}
img.splash {
width: 50rem; /* 800 px */
height: 40rem; /* 600 px */
}
</style>
CSS grids.
1. https://material.io/design/layout/responsive-layout-grid.html
<html>
<head>
<style type=“text/css”>
#body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
align-items: top;
}
header {
grid-column: 1 / span 3;
}
article {
grid-column: 1 / span 2;
}
</style>
</head>
<body>
<header>Header</header>
<article>Content</article>
<aside>Side</aside>
</body>
</html>
Header
Side
Content
CSS grids.
1. https://material.io/design/layout/responsive-layout-grid.html
<html>
<head>
<style type=“text/css”>
#body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
align-items: top;
}
header {
grid-column: 1 / span 3;
}
article {
grid-column: 1 / span 2;
}
</style>
</head>
<body>
<header>Header</header>
<article>Content</article>
<aside>Side</aside>
</body>
</html>
Header
Side
Content
87%
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.
<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
<style type=“text/css”>
#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
<style type=“text/css”>
#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>
Fragment identifier changes WILL get added to the browser history.
⚠
State transitions using the CSS :target selector
<style type=“text/css”>
#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>
Fragment identifier changes WILL get added to the browser history.
⚠
State transitions using the CSS :target selector
96%
of users
Replacing SVG with HTML and CSS.
Original
2 x SVG arrow graphics = ~5KBs
Hyper-light
Angle quotes + border-radius = 1KB
<style type=“text/css”>
.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>
Replacing SVG with HTML and CSS.
Original
2 x SVG arrow graphics = ~5KBs
Hyper-light
Angle quotes + border-radius = 1KB
<style type=“text/css”>
.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
Using an SVG sprite with fragment identifiers.
<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 identifiers.
<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/
91%
of users
Image-based sprites.
<style type=“text/css”>
.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.
⚠
Image-based sprites.
<style type=“text/css”>
.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.
⚠
Image-based sprites.
<style type=“text/css”>
.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>
96%
of users
<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.
<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.
<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.
<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.
<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.
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.
# 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;
}
}
Make sure to vary on Accept-Encoding in your caching layers.
⚠
99%
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;
}
}
Make sure to vary on Accept-Encoding in your caching layers.
⚠
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
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
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.
HTTP/2 pipelining.
HTTP/2 pipelining.
84%
of users
Measuringandactingonthedata.
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
Zeroing in on the biggest wins.
15 images
requests
~600KBs
1 image request
~50KBs
An SVG sprite sheet would be even better at ~15KBs.
• 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

More Related Content

What's hot

JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizationsChris Love
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! HomepageNicholas Zakas
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in ComponentsFITC
 
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveChris Love
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsChris Love
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup PerformanceGreg Whalin
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup PerformanceJustin Cataldo
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010Nicholas Zakas
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowWordPress
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service WorkerChang W. Doh
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...David Kaneda
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeededm00se
 
Angular vs React for Web Application Development
Angular vs React for Web Application DevelopmentAngular vs React for Web Application Development
Angular vs React for Web Application DevelopmentFITC
 

What's hot (20)

JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms tools
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Responsive interfaces
Responsive interfacesResponsive interfaces
Responsive interfaces
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service Worker
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
 
Angular vs React for Web Application Development
Angular vs React for Web Application DevelopmentAngular vs React for Web Application Development
Angular vs React for Web Application Development
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 

Similar to Hyperlight Websites - Chris Zacharias

Hyper-Lightweight Websites
Hyper-Lightweight WebsitesHyper-Lightweight Websites
Hyper-Lightweight WebsitesFITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight WebsitesFITC
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterDoris Chen
 
3 Tips for a better mobile User Experience
3 Tips for a better mobile User Experience3 Tips for a better mobile User Experience
3 Tips for a better mobile User ExperienceKlaus Enzenhofer
 
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...Jay Hung
 
Page Performance
Page PerformancePage Performance
Page Performanceatorreno
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesStoyan Stefanov
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Katie Sylor-Miller
 
AWS Webcast - What's New with Amazon Elastic Transcoder
AWS Webcast - What's New with Amazon Elastic TranscoderAWS Webcast - What's New with Amazon Elastic Transcoder
AWS Webcast - What's New with Amazon Elastic TranscoderAmazon Web Services
 
Website Performance
Website PerformanceWebsite Performance
Website PerformanceHugo Fonseca
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ XeroCraig Walker
 
Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1DanWooster1
 
World Cup Webinar from Signiant
World Cup Webinar from SigniantWorld Cup Webinar from Signiant
World Cup Webinar from SigniantSigniant
 
Joomla! Performance on Steroids
Joomla! Performance on SteroidsJoomla! Performance on Steroids
Joomla! Performance on SteroidsSiteGround.com
 
Tips for a Faster Website
Tips for a Faster WebsiteTips for a Faster Website
Tips for a Faster WebsiteRayed Alrashed
 
GTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.comGTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.comRabius Sany
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax ApplicationsSiarhei Barysiuk
 

Similar to Hyperlight Websites - Chris Zacharias (20)

Hyper-Lightweight Websites
Hyper-Lightweight WebsitesHyper-Lightweight Websites
Hyper-Lightweight Websites
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
3 Tips for a better mobile User Experience
3 Tips for a better mobile User Experience3 Tips for a better mobile User Experience
3 Tips for a better mobile User Experience
 
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
 
Page Performance
Page PerformancePage Performance
Page Performance
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
 
AWS Webcast - What's New with Amazon Elastic Transcoder
AWS Webcast - What's New with Amazon Elastic TranscoderAWS Webcast - What's New with Amazon Elastic Transcoder
AWS Webcast - What's New with Amazon Elastic Transcoder
 
Website Performance
Website PerformanceWebsite Performance
Website Performance
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
 
Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1
 
World Cup Webinar from Signiant
World Cup Webinar from SigniantWorld Cup Webinar from Signiant
World Cup Webinar from Signiant
 
Joomla! Performance on Steroids
Joomla! Performance on SteroidsJoomla! Performance on Steroids
Joomla! Performance on Steroids
 
Tips for a Faster Website
Tips for a Faster WebsiteTips for a Faster Website
Tips for a Faster Website
 
Html5 Primer
Html5 PrimerHtml5 Primer
Html5 Primer
 
GTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.comGTMetrix Report For GPStrackingMart.com
GTMetrix Report For GPStrackingMart.com
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Speed Matters
Speed MattersSpeed Matters
Speed Matters
 

Recently uploaded

Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一Fs
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Intellectual property rightsand its types.pptx
Intellectual property rightsand its types.pptxIntellectual property rightsand its types.pptx
Intellectual property rightsand its types.pptxBipin Adhikari
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMartaLoveguard
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一Fs
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012rehmti665
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一Fs
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)Christopher H Felton
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一Fs
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 

Recently uploaded (20)

Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Intellectual property rightsand its types.pptx
Intellectual property rightsand its types.pptxIntellectual property rightsand its types.pptx
Intellectual property rightsand its types.pptx
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptx
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
 
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 

Hyperlight Websites - Chris Zacharias

  • 1. Chris Zacharias Hyper-Light Websites CEO, FOUNDER @ chris@imgix.com @zacman85 FITC Spotlight: Web Performance
  • 2. “If they can build an entire Quake clone1 in LESS than 100KB, WHY can’t we get YouTube to load in under 1MB?” 1. https://en.wikipedia.org/wiki/.kkrieger Mike Solomon Early engineer at YouTube.
  • 3. 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.
  • 4. 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.
  • 5. High latency environments are EVERYWHERE, even to this day.
  • 6.
  • 7. A hyper-light website is a RECONCEPTION of a web-based user interface designed for the purposes of pushing the limits of performance.
  • 8.
  • 10. The goal is to provide an experience, roughly consistent with the real thing, that can be delivered to an end user AS FAST AS POSSIBLE.
  • 11. 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.
  • 12. 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.
  • 13. 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.
  • 16. 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
  • 18. Walking through an example Original
  • 19. Original Hyper-Light Requests 181 🥁 Domains 50 Bandwidth Total Content Size 8.7 MBs Total Transfer Size 5.9 MBs Non-Images 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
  • 20. Original Hyper-Light Requests 181 32 -82.3% Domains 50 2 -96.0% Bandwidth Total Content Size 8.7 MBs Total Transfer Size 5.9 MBs Non-Images 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
  • 21. Original Hyper-Light 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 Hi-Speed 1.5 sec ——-> 16.7 sec
  • 22. Original Hyper-Light 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
  • 24.
  • 25. 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
  • 26. Original Improved Hyper-Light 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) 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
  • 27. Original Improved Hyper-Light 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 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
  • 28. Original Improved Hyper-Light 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
  • 30. Inline as much as possible server-side. <!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>
  • 31. <!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.
  • 32. Use HTML5 semantic elements. <!DOCTYPE html> <html> <head> <title>Car and Driver</title> </head> <body> <header> <nav></nav> </header> <section> <aside> </aside> <article> Hello World! </article> </section> <footer> </footer> </body> </html>
  • 33. <!DOCTYPE html> <html> <head> <title>Car and Driver</title> </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.
  • 34. Relative layout using root em sizing. <style type=“text/css”> html { font-size: 16px; /* root ems */ } h1 { font-size: 2rem; /* 32 px */ } img.splash { width: 50rem; /* 800 px */ height: 40rem; /* 600 px */ } </style>
  • 35. Relative layout using root em sizing. 96% of users <style type=“text/css”> html { font-size: 16px; /* root ems */ } h1 { font-size: 2rem; /* 32 px */ } img.splash { width: 50rem; /* 800 px */ height: 40rem; /* 600 px */ } </style>
  • 36. CSS grids. 1. https://material.io/design/layout/responsive-layout-grid.html <html> <head> <style type=“text/css”> #body { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; align-items: top; } header { grid-column: 1 / span 3; } article { grid-column: 1 / span 2; } </style> </head> <body> <header>Header</header> <article>Content</article> <aside>Side</aside> </body> </html> Header Side Content
  • 37. CSS grids. 1. https://material.io/design/layout/responsive-layout-grid.html <html> <head> <style type=“text/css”> #body { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; align-items: top; } header { grid-column: 1 / span 3; } article { grid-column: 1 / span 2; } </style> </head> <body> <header>Header</header> <article>Content</article> <aside>Side</aside> </body> </html> Header Side Content 87% of users
  • 38. <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.
  • 39. <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
  • 40. <style type=“text/css”> #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
  • 41. <style type=“text/css”> #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> Fragment identifier changes WILL get added to the browser history. ⚠ State transitions using the CSS :target selector
  • 42. <style type=“text/css”> #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> Fragment identifier changes WILL get added to the browser history. ⚠ State transitions using the CSS :target selector 96% of users
  • 43. Replacing SVG with HTML and CSS. Original 2 x SVG arrow graphics = ~5KBs Hyper-light Angle quotes + border-radius = 1KB <style type=“text/css”> .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>
  • 44. Replacing SVG with HTML and CSS. Original 2 x SVG arrow graphics = ~5KBs Hyper-light Angle quotes + border-radius = 1KB <style type=“text/css”> .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
  • 45. Using an SVG sprite with fragment identifiers. <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/
  • 46. Using an SVG sprite with fragment identifiers. <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/ 91% of users
  • 47. Image-based sprites. <style type=“text/css”> .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>
  • 48. In most cases, HTTP/2 pipelining is the better approach. ⚠ Image-based sprites. <style type=“text/css”> .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>
  • 49. In most cases, HTTP/2 pipelining is the better approach. ⚠ Image-based sprites. <style type=“text/css”> .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> 96% of users
  • 55. 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; } }
  • 56. 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; } } Make sure to vary on Accept-Encoding in your caching layers. ⚠
  • 57. 99% 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; } } Make sure to vary on Accept-Encoding in your caching layers. ⚠
  • 58. 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
  • 59. 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
  • 60. 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
  • 65. Measuring the results using Sitespeed. tom@servo:/data$ docker run -v “$(pwd)”:/sitespeed.io > sitespeedio/sitespeed.io:7.3.6 https://www.caranddriver.com
  • 66. Zeroing in on the biggest wins. 15 images requests ~600KBs 1 image request ~50KBs
  • 67. Zeroing in on the biggest wins. 15 images requests ~600KBs 1 image request ~50KBs An SVG sprite sheet would be even better at ~15KBs.
  • 68. • 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…
  • 69. 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