A presentation at DevDay 2018 in in Berlin, Germany by Ryan Townsend
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
!!!
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. ImagesConnection
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 – @csswizardryResource 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
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 "
<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'
/>
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
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!
Here’s what was said about this presentation on social media.
for free. You
can too.