Building Fast Websites Against All Odds

A presentation at DevDay 2018 in May 2018 in Berlin, Germany by Ryan Townsend

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

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

“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

“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 x Performance x Performance = !!!

• 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

“[…] 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

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

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

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)

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

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 )

Progressive-enhancement, average support

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;
}

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

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!)

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

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

Hero loaded after lower-priority product images

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

Latest version of all the major browsers

<picture> <!--[if IE 9]><video style="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='Hero Image' />`
</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’

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

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

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

Low-hanging fruit can have immense impact on performance

• 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

Ryan Townsend
@ryantownsend

1 / 103

Fast website performance is essential for a great user experience, particularly in rural areas or emerging markets where poor connectivity and low-power devices can struggle with even the most optimised sites, yet it can still seem impossible to convince clients and stakeholders of the value that performance holds.

Now, I can’t promise that I can magically transform your clients’ attitudes toward performance, but what I can do show is show you how to build a fast website without even involving them. In my work delivering high-performance, high-availability websites for some of the UK’s biggest retailers, I’ve come up with a wealth of ways in which we as front-end developers can improve performance – we'll be learning how you don't need AMP, other costly rewrites, new infrastructure, or any kind of work that requires permission (and budget!) to compete alongside the big sites.

We may not be able to make the fastest website without permission, but we can certainly make a fast one!

Buzz and feedback

Here’s what was said about this presentation on social media.

Congrats to @RyanTownsend for the best speaker award! #DevDay18 #Berlin pic.twitter.com/wGCAJwYgDv
— Turbine Kreuzberg (@turbinekreuzbrg) May 26, 2018
Don’t ever underestimate the importance of site performance in #ecommerce again - another great talk at #DevDay18 also check https://t.co/iN5A8EWpME pic.twitter.com/A2buiZZWnm
— Lars Ax (@axcommerce) May 26, 2018
Now at the stage @RyanTownsend telling how and why to build fast websites #DevDay18 #Berlin #slowestSiteInTheWorld pic.twitter.com/U87zxPQwgE
— Turbine Kreuzberg (@turbinekreuzbrg) May 26, 2018

Building Fast Websites Against All Odds

Traffic x Conversion Rate x AOV

Link for this presentation:

HTML code for embedding:

Share on social media:

Buzz and feedback