DevDay, Berlin 2018 Building fast websites against all odds Photo by Emil Vilsek on Unsplash

Who am I? Ryan Townsend CTO, SHIFT – @ryantownsend

Performance is pretty important… ‘Why Fast Matters’ by @csswizardry – https://bit.ly/2kiVDAz

Traffic x Conversion Rate x AOV

!!!

Performance = Traffic

“The result of rebuilding our pages for performance led to [...] a 15 percent increase in SEO traffic” – Pinterest Source – https://bit.ly/2ICPv4Z

“[…] starting in July 2018, page speed will be a ranking factor for mobile searches.” – Google Source – https://bit.ly/2Dt5Plz

Performance = Conversion

“For every 100ms decrease in homepage load speed, Mobify's customer base saw a 1.11% lift in session based conversion, amounting to an average annual revenue increase of $376,789” – Mobify Source – https://bit.ly/2s0FDHS

“Similarly, for every 100ms decrease in checkout page load speed, Mobify's customers saw a 1.55% lift in session based conversion, amounting to an average annual revenue increase of $526,147” – Mobify Source – https://bit.ly/2s0FDHS

Performance = AOV

+9.6% pages/session

+8.7% AOV

Performance x Performance x Performance = !!!

But it’s not that easy…

Selling performance can be tricky

“Can you implement AMP?”

• Replica of your site • Restricted HTML: limited AMP elements • Restricted JS: no custom JS allowed • Restricted CSS: inlined, 50kb max • No repaint: fixed element sizing • No desktop: mobile-only • Shown within Google’s branding • Stale-while-revalidate: minimum 15 seconds refresh • Extra QA effort

It’s gonna get expensive

“But the carousel!”

“[…] we now feel ready to take the next step and work to support more instant-loading content not based on AMP technology in areas of Google Search designed for this, like the Top Stories carousel” – AMP Project @ Google Source – https://bit.ly/2JakbtC

Why don’t we just build fast sites in the first place?

Smithsonian Institution Neg. 83-14878. “It's easier to ask forgiveness than it is to get permission.” – Grace Hopper

You don’t need permission to build fast websites

The Slowest Site in the World

github.com/ryantownsend/slowest-site-in-the-world

h t t ps://w w w.we bpage te s t.org/e asy

Initial Results? • Start render: 6.4s • SpeedIndex: 12717 • Interactive: 4.4s • Bandwidth: 2,594 KB

Connection 2.

<head> 3. CSS 4. Webfonts 5. JavaScript 6. Images

Connection

Yo u ca n’ t c o nt ro l yo u r i n f ra st r u c t u re w it h o u t
permission, but you can check features are enabled: • GZIP / Brotli • OCSP for SSL • HTTP/2 • Connection: keep-alive

<head>

Correct Order 1.

<meta> character encoding / viewport 2. <title> 3. Resource hints 4. Inline <script> 5. External stylesheet 6. Inline <style> 7. External <script> 8. Anything else, e.g. other meta tags Source – @csswizardry

Resource Hints • DNS Prefetch • Preconnect (CDN, 3rd parties) • Prefetch • Preload (CSS @imports, @font-face etc)

Progressive-enhancement, solid support

Progressive-enhancement, solid support

Results?

Start Render SpeedIndex Interactive Bandwidth (- 1 . 8 s ) (+ 1 8 4 ) (- 0 .1 s ) (no change) Value: $6,782,202 / year Value based on Mobify case study

CSS

Remove @import

Inline (Critical) CSS

Asynchronous below-the-fold CSS

Results?

Start Render SpeedIndex Interactive Bandwidth (- 0 .1 s ) (-348) (- 0 . 2 s ) (no change) Value: $376,789 / year Value based on Mobify case study (ide al condi t ions)

Start Render SpeedIndex Interactive Bandwidth (- 9 0 .1 s ) (- ∞ ) (- 0 . 2 s ) (no change) Value: $339,486,889 / year Value based on Mobify case study (G o ogle Fon ts offline )

Start Render SpeedIndex Interactive Bandwidth (- 9 0 .1 s ) (- ∞ ) (- 0 . 2 s ) (no change) Value: $38,754 / hour Value based on Mobify case study (G o ogle Fon ts offline )

Webfonts

Self-host

font-display: swap / optional

Progressive-enhancement, average support

WOFF2

Solid support, WOFF1 for IE9-IE11

unicode-range (bundling f or we b f on ts)

/* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local('Montserrat Regular'), local(‘Montserrat-Regular'), url(/fonts/montserrat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

font-display: swap;

}

Results?

Start Render SpeedIndex Interactive Bandwidth (- 1 . 8 s ) (-2 5 8 ) (- 0 .1 s ) (no change) Value: $6,782,202 / year Value based on Mobify case study

JavaScript

Sync vs Async vs Defer s t ill v aluable ! to be avoide d!

Don’t let third parties control your performance or uptime

https://cdnjs.cloudflare.com/ajax/ libs/jquery/3.3.1/jquery.min.js (to be avoide d!)

Source – https://bit.ly/2ij5XIt

Bundling & Tree-shaking

Results?

Start Render SpeedIndex Interactive Bandwidth (- 0 .1 s ) (- 6 9 1 ) (-2 . 2 s ) (-5KB) Value: $376,789 / year Value based on Mobify case study

Images

Foreground vs Background

<img src=“image.jpg” /> background-image: url(image.jpg) vs

Hero loaded after lower-priority product images

Corrected by using a foreground <img>

Lazy-load Beneath the Fold

Source – medium.com Lo w-Quali t y Image Pre v ie w (LQ IP)

Source – medium.com Lo w-Quali t y Image Pre v ie w (LQ IP)

Serve Appropriate Sizes

Latest version of all the major browsers

Serve Appropriate Formats

Blink-based browsers only "

Safari only "

IE/Edge only "

<picture> <!--[if IE 9]><video style=&#34;display: none;><![endif]--> 
	<source

srcset='hero@1600w.jxr 1600w, ...'

type='image/vnd.ms-photo' /> <source srcset='hero@1600w.jp2 1600w, ...'

type='image/jp2' /> <source srcset='hero@1600w.webp 1600w, ...'

type='image/webp' />

<!--[if IE 9]></video><![endif]--> 
	<img

srcset=' hero@1600w.jpg 1600w, hero@1400w.jpg 1400w, hero@1200w.jpg 1200w, ...'

src='hero@400w.jpg'

			alt=&#39;Hero	Image&#39;	
	/>
</picture> our dif fe re n t f or mats our dif fe re n t size s f allb ack to JPEG w i t h an old-sch o ol <img> ‘src’

Results?

Start Render SpeedIndex Interactive Bandwidth (- 1 . 7 s ) (- 6 9 4 8 ) (- 0 .1 s ) (-2,224KB) Value: $6,405,413 / year Value based on Mobify case study

https://images.guide/

Show me the money…

Start Render SpeedIndex Interactive Bandwidth (- 3 . 8 s ) (- 8 4 8 6 ) (-2 .1 s ) (-2,229KB) Value: $14,317,982 / year Value based on Mobify case study

Original Optimised https://bit.ly/2IViWzf

What about Dev Day 2018?

Start Render SpeedIndex Interactive Bandwidth (- 1 . 7 s ) (-2335) (- 5 . 2 s ) (-3,105KB) Value: $6,405,413 / year Value based on Mobify case study

323,000 tickets

https://bit.ly/2L6LW3T

Low-hanging fruit can have immense impact on performance

Bonus Point!

Service Workers

Latest version of all the major browsers

• Progressive enhancement • Network control • Offline support • Progressive Web Apps (PWAs) • stale-while-revalidate / stale-while-error • Protect against 3rd party slow-downs

function timeout(delay){ return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(new Response('', { status: 408, statusText: 'Request timed out.' })); }, delay); }); } self.addEventListener('fetch', function(event { event.respondWith(Promise.race([ fetch(event.request), timeout(2000) ])); }); at temp t t he reque s t f orce a 2-se cond t ime ou t

Thank you! Ryan Townsend CTO, SHIFT – @ryantownsend