Slide 1
Slide 1 text
Umbraco and the
Need for Speed
uWestFest 2016 – San Diego, CA
Slide 2
Slide 2 text
Matt Shull
Director of Labs
Aristotle Interactive
aristotle.net
aristotleinteractive.com
mattshull.com
@themattshull
[email protected]
Slide 3
Slide 3 text
mattshull.com/umbraco
Slide 4
Slide 4 text
Why Performance Matters
First and foremost, we believe that
speed is more than a feature. Speed
is the most important feature.
-Fred Wilson
Slide 5
Slide 5 text
Why Performance Matters
Slide 6
Slide 6 text
Why Performance Matters
Slide 7
Slide 7 text
Why Performance Matters
Up to 40% of users will abandon a
request and possibly never return, if
it doesn’t load within 3 seconds.
-Gomez
http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Why Performance Matters
Walmart saw up to a 2% increase in
conversions for every 1 second of
improvement in load time. Every
100ms improvement also resulted in
up to a 1% increase in revenue.
https://wpostats.com/2015/11/04/walmart-revenue.html
Slide 10
Slide 10 text
Why Performance Matters
The Aberdeen Group discovered a 1-
second delay resulted in 11% fewer
page views, a 16% decrease in
customer satisfaction, and 7% loss in
conversions.
https://wpostats.com/2015/10/29/aberdeen-1-percent.html
Slide 11
Slide 11 text
Why Performance Matters
Mozilla cut load time by 2.2 seconds
and saw download conversions
increase by 15.4%
https://wpostats.com/2015/10/29/mozilla-2point2.html
Slide 12
Slide 12 text
Total Load Time
Slide 13
Slide 13 text
Time to First Byte
TTFB measures the duration from
the user or client making an HTTP
request to the first byte of the page
being received by the client's
browser.
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Time to First Byte
• Rendering of server side code
– API calls
– Slow SQL queries
• Connection to the server
– Memory leaks
– Poor server resources
Slide 18
Slide 18 text
Speed Index
Speed Index is the average time at
which visible parts of the page are
displayed. It is expressed in
milliseconds and dependent on size
of the view port.
Slide 19
Slide 19 text
Page Size
Page size measures the number of
kilobytes the site downloads to the
user’s device.
Slide 20
Slide 20 text
The Good Stuff
Slide 21
Slide 21 text
Images
~63%
http://httparchive.org/interesting.php
Slide 22
Slide 22 text
Image File Types
WebP
• Uses transparency
• Animation
• Photographs
• 50%-75% smaller
• Android and Chrome
Slide 23
Slide 23 text
Image File Types
Slide 24
Slide 24 text
Image File Types
JPEG2000
• Uses transparency
• Photographs
• Sometimes smaller
Slide 25
Slide 25 text
Image File Types
Slide 26
Slide 26 text
Responsive Images
Slide 27
Slide 27 text
Responsive Images
![]()
Slide 28
Slide 28 text
Responsive Images
https://github.com/scottjehl/picturefill
Slide 29
Slide 29 text
Responsive Images
https://modernizr.com/
.webp
.container
{
background-‐image:
url(‘image.webp’);
}
.no-‐webp
.container
{
background-‐image:
url(‘image.jpeg’);
}
Slide 30
Slide 30 text
CSS
~3.5%
http://httparchive.org/interesting.php
Slide 31
Slide 31 text
CSS
• Minify files
• Split into 3 files
– Above the fold main page
– Below the fold main page
– Interior
• Use LoadCSS to load in below the fold css
– Use as a fallback
Slide 32
Slide 32 text
Fonts
~5.5%
http://httparchive.org/interesting.php
Slide 33
Slide 33 text
Fonts
• Reduce font weights
• Strip out characters not needed using Font Squirrel
• Use default fonts if possible
Slide 34
Slide 34 text
Fonts
• Font loading event built into browsers soon
• Use current tools for best browser support
– Font face observer
– Google Web Font Loader
– LoadCSS
• Decide whether you want FOIT (Flash of Invisible
Text) or FOUT (Flash of Unstyled Text)
Slide 35
Slide 35 text
Javascript
~16%
http://httparchive.org/interesting.php
Slide 36
Slide 36 text
Javascript
• Minify files
• Use HTML/CSS alternatives
– Image rotators
– Tabs
– Responsive Navigation
• Split into mainpage.js and interior.js
Slide 37
Slide 37 text
Javascript
Slide 38
Slide 38 text
Javascript
</head>
<body>
//content
<script
defer=“defer”
src=“jquery.js”>
<script
defer=“defer”
src=mp.js”>
</body>
</html>
Slide 39
Slide 39 text
Javascript: Lessons Learned
• Umbraco Forms
• AJAX all the things!
Slide 40
Slide 40 text
Browser Hints
• DNS Prefetch
• Preconnect
• Prefetch
• Prerender
Slide 41
Slide 41 text
Browser Hints: Prefetch
• Download and cache specific files once the browser is
idle.
Slide 42
Slide 42 text
Browser Hints: Prerender
• Download and cache an entire page
Slide 43
Slide 43 text
https://www.youtube.com/watch?v=_Jn93FDx9oI
Slide 44
Slide 44 text
Measuring
Performance
Slide 45
Slide 45 text
Measuring Performance
• RUM
– Real User Data
– Measured using browser APIs
• Synthetic
– Simulated User Testing
– Simulated using real devices and browsers
Slide 46
Slide 46 text
Median vs Average
Slide 47
Slide 47 text
Measuring Performance: RUM
• Navigation Timing API
• Resource Timing API
• User Timing API
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Navigation Timing API
• Backend Time = responseEnd – requestStart
• Time to First Byte = responseStart – connectEnd
• Frontend Time = now – domLoading
• Total Time = now – navigationStart
Slide 50
Slide 50 text
Navigation Timing API
Slide 51
Slide 51 text
Resource Timing API
• Measure the performance of each resource being
downloaded by the user.
• TTFB = responseStart – startTime
• DNS Lookup = domainLookupEnd – domain
LookupStart
• TCP = connectEnd – connectStart
Slide 52
Slide 52 text
Resource Timing API
Slide 53
Slide 53 text
User Timing API
• Measure performance of web applications with high
precision timing.
• mark()
• measure()
Slide 54
Slide 54 text
User Timing API
window.performance.mark(‘start_req’);
$.get(‘./example.json’,
funcNon(data)
{
//do
something
with
data
window.performance.mark(‘end_req’);
window.performance.measure(‘measure_req’,
‘start_req’,
‘end_req’);
});
Slide 55
Slide 55 text
User Timing API
window.performance.getEntriesByName(‘start_req’);
window.performance.getEntriesByName(‘end_req’);
window.performance.getEntriesByName(‘measure_req’);
Slide 56
Slide 56 text
User Timing API
Slide 57
Slide 57 text
Measuring Performance: Synthetic
• WebPageTest.org
• Soasta
• Speed Curve
Slide 58
Slide 58 text
Beware of False Performance Prophets
• Google AMP
• Facebook Instant Articles
• Apple News
Slide 59
Slide 59 text
Creating a Culture of Performance
• Has to come from the top down
– Show the impact performance has on business
– Use video to show you vs competitor
• Create a Performance Budget / Specification
• Recognize developers and designers great work
Slide 60
Slide 60 text
Performance Budget
• HTML: 5%
• CSS: 10%
• Javascript: 10%
• Images: 65%
• Fonts: 5%
• Other: 5%
• Page Size Goal: 1500 kb (+/- 500 kb)
Slide 61
Slide 61 text
Performance Awards
Slide 62
Slide 62 text
What’s Next?
• Javascript API for detecting connection speed
• Measuring speed index in RUM
• Changes to stylesheets
Slide 63
Slide 63 text
We’re Just Scratching the Surface
• Designing for Performance by Lara Hogan
• Follow Tammy Everts on Twitter and Blog
• Follow Steve Souders Twitter and Blog
• More resources at mattshull.com/umbraco
Slide 64
Slide 64 text
Thank you!
mattshull.com/umbraco
aristotleinteractive.com