You Don't Need Permission to Build Fast Websites

1.

infoShare, Gdansk 2018 You don’t need permission to build fast
websites Photo by Emil Vilsek on Unsplash

2.

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

3.

None

4.

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

5.

Traffic x Conversion Rate x AOV =

6.

Performance = Traffic

7.

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

8.

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

9.

Performance = Conversion

10.

“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

11.

“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

12.

Performance = AOV

13.

+9.6% pages/session

14.

+8.7% AOV

15.

Performance x Performance x Performance =

16.

But it’s not that easy…

17.

Who believes performance is important to the user experience? Who
actively wants to build faster websites? Who feels their clients or business don’t value performance as much as they should?

18.

Selling performance can be tricky

19.

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

20.

You don’t need permission to build fast websites

21.

Before we start optimising…

22.

Monitor & Measure

23.

Understand your users and build for the future

24.

The Slowest Site in the World

25.

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

26.

None

27.

None

28.

None

29.

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

30.

None

31.

None

32.

Connection

33.

You can’t control your infrastructure without permission, but you can
check features are enabled: •GZIP / Brotli •OCSP for SSL •HTTP/2 •Connection: keep-alive

34.

<head>

35.

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

36.

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

37.

None

38.

None

39.

None

40.

Results?

41.

Start Render SpeedIndex Interactive Bandwidth (-1.8s) (+184) (-0.1s) (no change)
Value: $6,782,202 / year Value based on Modify case study

42.

Images

43.

Foreground vs Background

44.

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

45.

None

46.

None

47.

Lazy-load Beneath the Fold

48.

None

49.

Source – medium.com

50.

Source – medium.com

51.

Serve Appropriate Sizes

52.

None

53.

Serve Appropriate Formats

54.

None

55.

None

56.

None

57.

https://www.xnview.com/en/

58.

None

59.

None

60.

<picture>  <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' />  <img srcset=' hero@1600w.jpg 1600w, hero@1400w.jpg 1400w, hero@1200w.jpg 1200w, ...' src='hero@400w.jpg' alt='Hero Image' /> </picture>

61.

Results?

62.

Start Render SpeedIndex Interactive Bandwidth (-1.7s) (-6948) (-0.1s) (-2,224KB) Value:
$6,405,413 / year Value based on Modify case study

63.

https://images.guide/

64.

CSS

65.

Remove @import

66.

Inline (Critical) CSS

67.

Asynchronous below-the-fold CSS

68.

Results?

69.

Start Render SpeedIndex Interactive Bandwidth (-0.1s) (-348) (-0.2s) (no change)
Value: $376,789 / year Value based on Modify case study

70.

Start Render SpeedIndex Interactive Bandwidth (-90.1s) (-∞) (-0.2s) (no change)

71.

Value: $38,754 / hour Value based on Modify case study

72.

JavaScript

73.

Sync vs Async vs Defer

74.

Don’t let third parties control your performance or uptime

75.

https://cdnjs.cloudflare.com/ajax/ libs/jquery/3.3.1/jquery.min.js

76.

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

77.

Bundling & Tree-shaking

78.

Results?

79.

Start Render SpeedIndex Interactive Bandwidth (-0.1s) (-691) (-2.2s) (-5KB) Value:
$376,789 / year Value based on Modify case study

80.

Webfonts

81.

Self-host

82.

WOFF2

83.

None

84.

font-display: swap / optional

85.

None

86.

unicode-range

87.

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

88.

Results?

89.


90.

Show me the money…

91.

Start Render SpeedIndex Interactive Bandwidth (-3.8s) (-8486) (-2.1s) (-2,229KB) Value:
$14,317,982 / year Value based on Modify case study

92.

Original Optimised

93.

Low-hanging fruit can have immense impact on performance

94.

Bonus Point!

95.

Service Workers

96.

None

97.

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

98.

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([ timeout(2000), fetch(event.request) ])); });

99.

Free eBook available – https://bit.ly/2BNcPZN

100.

Thank you! Ryan Townsend CTO, SHIFT – @ryantownsend

You Don't Need Permission to Build Fast Websites

You Don't Need Permission to Build Fast Websites

Want more?

Transcript