Help! My client is a WebPerf meetup!

Slide 1

Slide 1 text

Adam Onishi LDN WebPerf @onishiweb Help! My client is a #WebPerf meetup!

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Velocity Conf Amsterdam 2015

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

@onishiweb

Slide 6

Slide 6 text

@onishiweb

Slide 7

Slide 7 text

@onishiweb

Slide 8

Slide 8 text

Building a website for the WebPerf community

Slide 9

Slide 9 text

1. Testing & Metrics 2. Design 3. Images 4. Styles & Scripts 5. Fonts 6. Hosting & CDN

Slide 10

Slide 10 text

7. Images (pt. 2) 8. Fonts (pt. 2) 9. Service Worker 10. Styles (pt. 2) 11. Conclusion

Slide 11

Slide 11 text

Testing & Metrics

Slide 12

Slide 12 text

Speed Index

Slide 13

Slide 13 text

” “How much of the above- the-fold content is visually complete over time until it is 100% complete Daniel Imms

Slide 14

Slide 14 text

Start Render

Slide 15

Slide 15 text

@onishiweb

Slide 16

Slide 16 text

https:/ /www.webpagetest.org/

Slide 17

Slide 17 text

PageSpeed Insights

Slide 18

Slide 18 text

Yellow Lab Tools

Slide 19

Slide 19 text

Cost

Slide 20

Slide 20 text

https:/ /whatdoesmysitecost.com/

Slide 21

Slide 21 text

3G in London Testing the homepage First visit only @onishiweb

Slide 22

Slide 22 text

” “…since the browser can ditch the cache whenever it wants, it shouldn't be relied upon Jake Archibald

Slide 23

Slide 23 text

@onishiweb

Slide 24

Slide 24 text

Benchmarks

Slide 25

Slide 25 text

http:/ /www.meetup.com/London-Web-Performance-Group/

Slide 26

Slide 26 text

4983 4.783s 33/100 $$$$$ http:/ /www.meetup.com/London-Web-Performance-Group/

Slide 27

Slide 27 text

http:/ /www.frontendlondon.co.uk/

Slide 28

Slide 28 text

1658 1.387s 92/100 $ http:/ /www.frontendlondon.co.uk/

Slide 29

Slide 29 text

One more… @onishiweb

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Client happiness

Slide 32

Slide 32 text

Design

Slide 33

Slide 33 text

Performance starts at design

Slide 34

Slide 34 text

” “The decisions made by designers are what typically drive the rest of how a website is built Lara Hogan

Slide 35

Slide 35 text

Specifics… @onishiweb

Slide 36

Slide 36 text

Banner images

Slide 37

Slide 37 text

@onishiweb

Slide 38

Slide 38 text

http:/ /www.webdesign-inspiration.com/web-designs/page/2

Slide 39

Slide 39 text

High-res banner images! @onishiweb

Slide 40

Slide 40 text

What if… @onishiweb

Slide 41

Slide 41 text

https:/ /ldnwebperf.org/about-us/

Slide 42

Slide 42 text

CSS Blend Modes @onishiweb

Slide 43

Slide 43 text

Reduce image quality without losing the effect @onishiweb

Slide 44

Slide 44 text

Fonts

Slide 45

Slide 45 text

@onishiweb

Slide 46

Slide 46 text

Limit weights and styles @onishiweb

Slide 47

Slide 47 text

Custom font for headings, system font for body @onishiweb

Slide 48

Slide 48 text

Designers should know how the web works.

Slide 49

Slide 49 text

@onishiweb Good designers make this stuff easy @onishiweb

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Images

Slide 52

Slide 52 text

Content images @onishiweb

Slide 53

Slide 53 text

https:/ /ldnwebperf.org/

Slide 54

Slide 54 text

The responsive web https:/ /ldnwebperf.org/

Slide 55

Slide 55 text

What about when there’s a new sponsor? @onishiweb

Slide 56

Slide 56 text

You can’t expect the client to do all the optimising @onishiweb

Slide 57

Slide 57 text

Even if they are a #WebPerf expert! @onishiweb

Slide 58

Slide 58 text

https:/ /en-gb.wordpress.org/plugins/wp-smushit/

Slide 59

Slide 59 text

https:/ /wordpress.org/plugins/winsite-image-optimizer/

Slide 60

Slide 60 text

You can’t expect the client to do all the optimising @onishiweb

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Dimensions: 2044 × 1150 @onishiweb

Slide 63

Slide 63 text

Before: 2044 × 1150 (103Kb) After: 400 × 212 (11Kb) @onishiweb

Slide 64

Slide 64 text

add_image_size( 'speaker-thumb', 55, 55, true ); add_image_size( 'event-image', 400, 212, true );

Slide 65

Slide 65 text

2552 Optimisation: Image compression

Slide 66

Slide 66 text

2.296s Optimisation: Image compression

Slide 67

Slide 67 text

$ Optimisation: Image compression

Slide 68

Slide 68 text

Optimisation: Image compression

Slide 69

Slide 69 text

Styles & Scripts

Slide 70

Slide 70 text

Build steps… @onishiweb

Slide 71

Slide 71 text

Critical path CSS @onishiweb

Slide 72

Slide 72 text

” “It goes against everything we’ve been taught as front-end developers Patrick Hamann

Slide 73

Slide 73 text

” “…if done correctly can be used to deliver a “one roundtrip” critical path length where only the HTML is a blocking resource. Addy Osmani

Slide 74

Slide 74 text

@onishiweb • Critical • Penthouse • LoadCSS

Slide 75

Slide 75 text

” “Ideally, the [above the fold] content should fit under 14KB PageSpeed Insights

Slide 76

Slide 76 text

Stylestats @onishiweb

Slide 77

Slide 77 text

├─────────────────────────────┼─────────────────┤ │ Style Sheets │ 1 ├─────────────────────────────┼─────────────────┤ │ Size │ 28.6KB ├─────────────────────────────┼─────────────────┤ │ Gzipped Size │ 5.7KB ├─────────────────────────────┼─────────────────┤

Slide 78

Slide 78 text

Slide 79

Slide 79 text

Async scripts @onishiweb

Slide 80

Slide 80 text

function lwp_async_defer_script($tag, $handle) { $src_async = ' async="async" defer="defer" src'; if ('webperf-scripts' === $handle) { return str_replace(' src', $src_async, $tag ); } return $tag; } add_action('script_loader_tag', 'lwp_async_defer_script');

Slide 81

Slide 81 text

2552 -4 2548 Optimisation: Styles and Scripts

Slide 82

Slide 82 text

2.296s +0.192s 2.488s Optimisation: Styles and Scripts

Slide 83

Slide 83 text

Fonts

Slide 84

Slide 84 text

Google Fonts @onishiweb

Slide 85

Slide 85 text

https:/ /fonts.google.com/specimen/Work+Sans?selection.family=Work+Sans

Slide 86

Slide 86 text

Slide 87

Slide 87 text

Self-hosting Google Fonts @onishiweb

Slide 88

Slide 88 text

https:/ /google-webfonts-helper.herokuapp.com/fonts/

Slide 89

Slide 89 text

2548 -511 2037 Optimisation: Fonts

Slide 90

Slide 90 text

2.488s -0.896 1.592s Optimisation: Fonts

Slide 91

Slide 91 text

84/100 Optimisation: Fonts

Slide 92

Slide 92 text

Optimisation: Fonts

Slide 93

Slide 93 text

Hosting & CDN

Slide 94

Slide 94 text

@onishiweb

Slide 95

Slide 95 text

This could all change with PHP7 @onishiweb

Slide 96

Slide 96 text

http:/ /talks.php.net/china16#/

Slide 97

Slide 97 text

http:/ /talks.php.net/china16#/

Slide 98

Slide 98 text

https:/ /wpengine.com/

Slide 99

Slide 99 text

” “At WP Engine, there’s no confusing caching plugins WPEngine blog

Slide 100

Slide 100 text

Nothing enabled on staging @onishiweb

Slide 101

Slide 101 text

@onishiweb

Slide 102

Slide 102 text

” “Quick WPT reveals a bit of image optimisation and CDN use as the main issues on home page. Perry Dyball

Slide 103

Slide 103 text

@onishiweb

Slide 104

Slide 104 text

@onishiweb

Slide 105

Slide 105 text

” “Akamai are setting up a CDN account for us. Perry Dyball

Slide 106

Slide 106 text

2037 -1125 912 Optimisation: Hosting & CDN

Slide 107

Slide 107 text

1.592s -0.701 0.891s Optimisation: Hosting & CDN

Slide 108

Slide 108 text

Optimisation: Hosting & CDN 84/100 +15 99/100

Slide 109

Slide 109 text

@onishiweb

Slide 110

Slide 110 text

London, UK Chrome - ? @onishiweb

Slide 111

Slide 111 text

London, UK Chrome - Cable @onishiweb

Slide 112

Slide 112 text

@onishiweb

Slide 113

Slide 113 text

2037 +15 2052 Optimisation: Hosting & CDN

Slide 114

Slide 114 text

1.592s +0.097 1.689s Optimisation: Hosting & CDN

Slide 115

Slide 115 text

99/100 Optimisation: Hosting & CDN 84/100 +15

Slide 116

Slide 116 text

97/100 Optimisation: Hosting & CDN

Slide 117

Slide 117 text

Optimisation: Hosting & CDN

Slide 118

Slide 118 text

Images (pt. 2)

Slide 119

Slide 119 text

http:/ /yellowlab.tools/result/ej2ql2k0qi

Slide 120

Slide 120 text

Lazy loading below the fold images @onishiweb

Slide 121

Slide 121 text

https:/ /github.com/toddmotto/echo

Slide 122

Slide 122 text

Slide 123

Slide 123 text

if(document.querySelectorAll('img').length) { // Init the echo JS loader echo.init({ callback: function(element, op) { element.classList.remove('img--loading'); } }); }

Slide 124

Slide 124 text

http:/ /ldnwebperf.org/

Slide 125

Slide 125 text

SVGs @onishiweb

Slide 126

Slide 126 text

https:/ /speakerdeck.com/ninjanails/death-to-icon-fonts-2

Slide 127

Slide 127 text

Colouring SVGs @onishiweb

Slide 128

Slide 128 text

function inlineSvg() { var ajax = new XMLHttpRequest(); ajax.open("GET", "/icons.svg", true); ajax.send(); ajax.onload = function(e) { var div = document.createElement("div"); div.style.display = 'none'; div.innerHTML = ajax.responseText; document.body.appendChild(div); }; }

Slide 129

Slide 129 text

2052 -290 1762 Optimisation: Images (pt. 2)

Slide 130

Slide 130 text

1.689s -0.306 1.383s Optimisation: Images (pt. 2)

Slide 131

Slide 131 text

98/100 Optimisation: Images (pt. 2) 97/100 +1

Slide 132

Slide 132 text

Fonts (pt. 2)

Slide 133

Slide 133 text

https:/ /www.zachleat.com/web/comprehensive-webfonts/

Slide 134

Slide 134 text

Critical FOFT (Flash of Fallback Text) @onishiweb

Slide 135

Slide 135 text

@onishiweb

Slide 136

Slide 136 text

Web Font Loader @onishiweb

Slide 137

Slide 137 text

.wf-loading .wf-active .wf-inactive .wf---loading .wf---active .wf---inactive @onishiweb

Slide 138

Slide 138 text

.wf-loading body { font-family: $font-fallback; }

Slide 139

Slide 139 text

1762 -329 1433 Optimisation: Fonts (pt. 2)

Slide 140

Slide 140 text

Service Worker

Slide 141

Slide 141 text

So far… @onishiweb

Slide 142

Slide 142 text

First view only @onishiweb

Slide 143

Slide 143 text

Navigating through the site @onishiweb

Slide 144

Slide 144 text

https:/ /remysharp.com/2016/03/22/the-copy--paste-guide-to-your-first-service-worker

Slide 145

Slide 145 text

Stale-while-revalidate @onishiweb

Slide 146

Slide 146 text

What about a Progressive Web App? @onishiweb

Slide 147

Slide 147 text

@onishiweb 1. HTTPS 2. Service Worker 3. Manifest

Slide 148

Slide 148 text

Optimisation: Service Worker 91/100

Slide 149

Slide 149 text

Not a “PWA” @onishiweb

Slide 150

Slide 150 text

” “…the manifest display property must be set to 'standalone' or 'fullscreen' Chrome

Slide 151

Slide 151 text

? ? ? Optimisation: Service Worker

Slide 152

Slide 152 text

Styles (pt. 2)

Slide 153

Slide 153 text

Tooling

Slide 154

Slide 154 text

http:/ /yellowlab.tools/result/ej2ql2k0qi

Slide 155

Slide 155 text

Autoprefixer @onishiweb

Slide 156

Slide 156 text

npm update --save

Slide 157

Slide 157 text

"gulp-autoprefixer": "^3.1.1"

Slide 158

Slide 158 text

Inline styles (again)

Slide 159

Slide 159 text

” “Ideally, the [above the fold] content should fit under 14KB PageSpeed Insights

Slide 160

Slide 160 text

Dumping all styles inline, probably not a great idea @onishiweb

Slide 161

Slide 161 text

Generating “head.css” @onishiweb

Slide 162

Slide 162 text

@onishiweb • Critical • Penthouse • LoadCSS

Slide 163

Slide 163 text

Custom inline CSS @onishiweb

Slide 164

Slide 164 text

No content

Slide 165

Slide 165 text

LoadCSS @onishiweb

Slide 166

Slide 166 text

https:/ /github.com/filamentgroup/loadCSS/#recommended-usage-pattern

Slide 167

Slide 167 text

1433 -54 1379 Optimisation: Styles (pt. 2)

Slide 168

Slide 168 text

1.383s -0.096 1.287s Optimisation: Styles (pt. 2)

Slide 169

Slide 169 text

99/100 Optimisation: Styles (pt. 2) 98/100 +1

Slide 170

Slide 170 text

Conclusion

Slide 171

Slide 171 text

Performance starts with design @onishiweb

Slide 172

Slide 172 text

Do the work so your content editors don’t have to @onishiweb

Slide 173

Slide 173 text

Always be open to better tools and keep them up to date @onishiweb

Slide 174

Slide 174 text

Keep testing consistent @onishiweb

Slide 175

Slide 175 text

Benchmarks

Slide 176

Slide 176 text

4983 4.783s 33/100 $$$$$ Meetup 1658 1.387s 92/100 $ FEL 1379 1.287s 99/100 $ WebPerf

Slide 177

Slide 177 text

https:/ /www.webpagetest.org/result/161030_PH_PTH/

Slide 178

Slide 178 text

Make sure you’re adjusting for the right metric

Slide 179

Slide 179 text

No content

Slide 180

Slide 180 text

No content

Slide 181

Slide 181 text

Adam Onishi LDN WebPerf @onishiweb Thanks!

Slide 182

Slide 182 text

Reading list / Thanks Pro WordPress Theme Development by Adam Onishi http:/ /www.apress.com/9781430259145 Designing for Performance by Lara Hogan http:/ /shop.oreilly.com/product/0636920033578.do Designers Guide to Web Performance by Jon Yablonski: http:/ /jonyablonski.com/2016/designers-guide-to-web-performance-optimization/ Emoji’s from Emoji One http:/ /emojione.com/ Doorman icon by Dan Hetteix - The Noun Project https:/ /thenounproject.com/term/doorman/188002 Lighthouse icon by Carla Dias - The Noun Project https:/ /thenounproject.com/term/lighthouse/566292/ Slides and Paisley Shirt icon by Margarida Sousa