Slide 1
Slide 1 text
Adam Onishi LDN WebPerf @onishiweb
Help! My client is a
#WebPerf meetup!
Slide 2
Slide 2 text
Hello!
Slide 3
Slide 3 text
FINANCIAL TIMES
@onishiweb
Slide 4
Slide 4 text
@onishiweb
Tickets
please!
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
1. Testing & Metrics
2. Design
3. Images (1)
4. Styles & Scripts
5. Fonts
Slide 7
Slide 7 text
6. Hosting
7. CDN
8. Images (2)
9. Next steps
10. Review
Slide 8
Slide 8 text
@onishiweb
Slide 9
Slide 9 text
@onishiweb
Slide 10
Slide 10 text
@onishiweb
Buy
Now!
Slide 11
Slide 11 text
Testing & Metrics
Slide 12
Slide 12 text
https:/
/www.webpagetest.org/
Slide 13
Slide 13 text
https:/
/developers.google.com/speed/pagespeed/insights/
Slide 14
Slide 14 text
@onishiweb
Slide 15
Slide 15 text
Metrics
@onishiweb
Slide 16
Slide 16 text
Speed
Index
Start
Render
PageSpeed
Insights
Cost
Slide 17
Slide 17 text
”
“How much of the above-
the-fold content is visually
complete over time until it
is 100% complete
Daniel Imms
Slide 18
Slide 18 text
@onishiweb
Slide 19
Slide 19 text
https:/
/whatdoesmysitecost.com/
Slide 20
Slide 20 text
3G in London
Testing the homepage
@onishiweb
Slide 21
Slide 21 text
Benchmarks
@onishiweb
Slide 22
Slide 22 text
http:/
/www.meetup.com/London-Web-Performance-Group/
Slide 23
Slide 23 text
6752
2822
5.489s
2.686s
58/100
42/100
$$$$$
http:/
/www.meetup.com/London-Web-Performance-Group/
Slide 24
Slide 24 text
http:/
/www.frontendlondon.co.uk/
Slide 25
Slide 25 text
2280
658
1.883s
0.387s
88/100
72/100
$$
http:/
/www.frontendlondon.co.uk/
Slide 26
Slide 26 text
What about a Perf Budget?
@onishiweb
Slide 27
Slide 27 text
One more…
@onishiweb
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Client
happiness
Slide 30
Slide 30 text
Design
Slide 31
Slide 31 text
Performance
starts at design
Slide 32
Slide 32 text
”
“The decisions made by
designers are what
typically drive the rest of
how a website is built
Lara Hogan
Slide 33
Slide 33 text
Specifics…
@onishiweb
Slide 34
Slide 34 text
Banner images…
@onishiweb
Slide 35
Slide 35 text
Designers
banner images
@onishiweb
Slide 36
Slide 36 text
http:/
/www.webdesign-inspiration.com/web-designs/page/2
Slide 37
Slide 37 text
High-res banner images!
@onishiweb
Slide 38
Slide 38 text
What if…
@onishiweb
Slide 39
Slide 39 text
https:/
/ldnwebperf.org/about-us/
Slide 40
Slide 40 text
CSS Blend Modes
@onishiweb
Slide 41
Slide 41 text
Reduce image quality
without losing the effect
@onishiweb
Slide 42
Slide 42 text
Fonts
@onishiweb
Slide 43
Slide 43 text
Designers
custom fonts
@onishiweb
Slide 44
Slide 44 text
Limit weights and styles
@onishiweb
Slide 45
Slide 45 text
Custom font for headings,
system font for body
@onishiweb
Slide 46
Slide 46 text
Designers should
know how the
web works.
Slide 47
Slide 47 text
@onishiweb
Good
designers
make this
stuff easy
@onishiweb
Slide 48
Slide 48 text
Images (1)
Slide 49
Slide 49 text
Content images
@onishiweb
Slide 50
Slide 50 text
https:/
/ldnwebperf.org/
Slide 51
Slide 51 text
The responsive web
https:/
/ldnwebperf.org/
Slide 52
Slide 52 text
What about when there’s a
new sponsor?
@onishiweb
Slide 53
Slide 53 text
You can’t expect the client
to do all the optimising
@onishiweb
Slide 54
Slide 54 text
Even if they are a
#WebPerf expert!
@onishiweb
Slide 55
Slide 55 text
@onishiweb
Slide 56
Slide 56 text
https:/
/en-gb.wordpress.org/plugins/wp-smushit/
Slide 57
Slide 57 text
2552
1400
2.296s
1.393s
$
Slide 58
Slide 58 text
Styles & Scripts
Slide 59
Slide 59 text
Build steps…
@onishiweb
Slide 60
Slide 60 text
Critical path CSS
@onishiweb
Slide 61
Slide 61 text
”
“It goes against everything
we’ve been taught as
front-end developers
Patrick Hamann
Slide 62
Slide 62 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 63
Slide 63 text
@onishiweb
• Critical
• Penthouse
• LoadCSS
Slide 64
Slide 64 text
”
“Ideally, the [above the
fold] content should
fit under 14KB
PageSpeed Insights
Slide 65
Slide 65 text
Stylestats
@onishiweb
Slide 66
Slide 66 text
├─────────────────────────────┼─────────────────┤
│ Style Sheets │ 1
├─────────────────────────────┼─────────────────┤
│ Size │ 28.6KB
├─────────────────────────────┼─────────────────┤
│ Gzipped Size │ 5.7KB
├─────────────────────────────┼─────────────────┤
Slide 67
Slide 67 text
function lwp_inline_styles() {
if (file_exists( get_template_directory() . '/css/
main.min.css')) {
$css = file_get_contents(get_template_directory_uri() . '/
css/main.min.css');
if (false !== $css) {
echo '' . $css . '';
return;
}
}
echo '';
}
add_action( 'wp_head', 'lwp_inline_styles', 50);
Slide 68
Slide 68 text
Async scripts
@onishiweb
Slide 69
Slide 69 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 70
Slide 70 text
2548
1540
2.488s
1.381s
$
Slide 71
Slide 71 text
Fonts
Slide 72
Slide 72 text
Google Fonts
@onishiweb
Slide 73
Slide 73 text
https:/
/fonts.google.com/specimen/Work+Sans?selection.family=Work+Sans
Slide 74
Slide 74 text
Render blocking CSS
@onishiweb
Slide 75
Slide 75 text
Slide 76
Slide 76 text
Self-hosting Google Fonts
@onishiweb
Slide 77
Slide 77 text
https:/
/google-webfonts-helper.herokuapp.com/fonts/
Slide 78
Slide 78 text
https:/
/www.zachleat.com/web/comprehensive-webfonts/
Slide 79
Slide 79 text
2037
1334
1.592s
1.193s
84/100
85/100
$
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
Hosting
Slide 82
Slide 82 text
@onishiweb
Slide 83
Slide 83 text
This could all change
with PHP7
@onishiweb
Slide 84
Slide 84 text
http:/
/talks.php.net/china16#/
Slide 85
Slide 85 text
http:/
/talks.php.net/china16#/
Slide 86
Slide 86 text
https:/
/wpengine.com/
Slide 87
Slide 87 text
”
“At WP Engine, there’s
no confusing caching
plugins
WPEngine blog
Slide 88
Slide 88 text
Nothing enabled on staging
@onishiweb
Slide 89
Slide 89 text
@onishiweb
Slide 90
Slide 90 text
912
800
0.891s
0.788s
99/100
99/100
$
Slide 91
Slide 91 text
@onishiweb
Slide 92
Slide 92 text
London, UK
Chrome - ?
@onishiweb
Slide 93
Slide 93 text
London, UK
Chrome - Cable
@onishiweb
Slide 94
Slide 94 text
@onishiweb
Slide 95
Slide 95 text
2052
1700
1.689s
1.686s
99/100
99/100
$
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
”
“Quick WPT reveals a bit of
image optimisation and
CDN use as the main issues
on home page.
Perry
Slide 98
Slide 98 text
CDN
Slide 99
Slide 99 text
@onishiweb
Slide 100
Slide 100 text
@onishiweb
Slide 101
Slide 101 text
”
“Akamai are setting
up a CDN account
for us.
Perry Dyball
Slide 102
Slide 102 text
https:/
/wpengine.com/
Slide 103
Slide 103 text
”
“
Sorry we can’t help
with third-party CDNs
WP Engine support
Slide 104
Slide 104 text
Images (2)
Slide 105
Slide 105 text
”
“ a bit of
image optimisation
Quick WPT reveals
CDN use as the main issues
on home page.
Perry
Slide 106
Slide 106 text
https:/
/wordpress.org/plugins/winsite-image-optimizer/
Slide 107
Slide 107 text
You can’t expect the client
to do all the optimising
@onishiweb
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
Dimensions: 2044 × 1150
@onishiweb
Slide 110
Slide 110 text
Before: 2044 × 1150 (103Kb)
After: 400 × 212 (11Kb)
@onishiweb
Slide 111
Slide 111 text
add_image_size( 'speaker-thumb', 55, 55, true );
add_image_size( 'event-image', 400, 212, true );
Slide 112
Slide 112 text
2144
1356
1.783s
1.286s
99/100
99/100
$
Slide 113
Slide 113 text
Next Steps…
Slide 114
Slide 114 text
@onishiweb
1. Investigate TTFB
2. Reduce first render
3. Investigate browser cache
4. Service Worker (PWA)
Slide 115
Slide 115 text
Review
Slide 116
Slide 116 text
Design with performance
in mind
@onishiweb
Slide 117
Slide 117 text
Do the work so your
content editors don’t
have to
@onishiweb
Slide 118
Slide 118 text
Always be open to
better tools
@onishiweb
Slide 119
Slide 119 text
Keep testing consistent
@onishiweb
Slide 120
Slide 120 text
Benchmarks
@onishiweb
Slide 121
Slide 121 text
6752 5.489s 58/100 $$$$$
Meetup
2280 1.883s 88/100 $$
FEL
2144 1.783s 99/100 $
WebPerf
Slide 122
Slide 122 text
26 14
WebPerf FEL
172 KB 552 KB
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
Make sure you’re
adjusting for the
right metric
Slide 125
Slide 125 text
https:/
/www.webpagetest.org/result/161002_S3_E80/
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
Adam Onishi LDN WebPerf @onishiweb
Thanks!
Slide 128
Slide 128 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
Slides and Paisley Shirt icon by Margarida Sousa