Slide 1
Slide 1 text
#webperf and Umbraco
Codegarden 2016 – Odense, Denmark
Slide 2
Slide 2 text
Matt Shull
Director of Aristotle Labs
mattshull.com"
@themattshull"
[email protected]
Slide 3
Slide 3 text
aristotlelabs.com/cg16
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
No content
Slide 8
Slide 8 text
40% of users will
abandon a request
if it doesn’t load within 3 seconds.
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
2% increase in
conversions
for every 1 second load time decreased
Slide 11
Slide 11 text
80% decrease in"
load time
80% increase in traffic
32% increase in median time spent on site
Slide 12
Slide 12 text
0.3second decrease"
in latency
customers spent an extra £8 million a year
Slide 13
Slide 13 text
What is
web performance?
Slide 14
Slide 14 text
Total Load Time
Slide 15
Slide 15 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 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 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 19
Slide 19 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 20
Slide 20 text
Page Size
Page size measures the number of
kilobytes the site downloads to the
user’s device.
Slide 21
Slide 21 text
Where do I start?
Slide 22
Slide 22 text
Images
~63%
http://httparchive.org/interesting.php
Slide 23
Slide 23 text
Image File Types
WebP
• Uses transparency
• Animation
• Photographs
• 50%-75% smaller
• Android and Chrome
Slide 24
Slide 24 text
Image File Types
JPEG2000
• Uses transparency
• Photographs
• Sometimes smaller
• Safari
Slide 25
Slide 25 text
Responsive Images
![]()
Slide 26
Slide 26 text
Responsive Background Images
https://modernizr.com/
.webp
.container
{
background-‐image:
url(‘image.webp’);
}
.no-‐webp
.container
{
background-‐image:
url(‘image.jpeg’);
}
Slide 27
Slide 27 text
CSS
~3.5%
http://httparchive.org/interesting.php
Slide 28
Slide 28 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 29
Slide 29 text
Fonts
~5.5%
http://httparchive.org/interesting.php
Slide 30
Slide 30 text
Fonts
• Reduce font weights"
• Strip out characters not needed using Font Squirrel"
"
• Use browser font loading events"
• FOIT vs FOUT
Slide 31
Slide 31 text
Javascript
~16%
http://httparchive.org/interesting.php
Slide 32
Slide 32 text
Javascript
• Minify files
• Use HTML/CSS alternatives
– Image rotators
– Tabs
– Responsive Navigation
• Split into mainpage.js and interior.js
Slide 33
Slide 33 text
Javascript
Slide 34
Slide 34 text
Javascript: Lessons Learned
• Javascript Libraries
• Umbraco Forms
• AJAX all the things!
Slide 35
Slide 35 text
Browser Hints
• DNS Prefetch"
• Preconnect"
• Prefetch"
• Prerender
Slide 36
Slide 36 text
Browser Hints: Prefetch
Download and cache specific files
once the browser is idle."
Slide 37
Slide 37 text
Browser Hints: Prerender
Download and cache an entire page."
Slide 38
Slide 38 text
Measuring
Performance
Slide 39
Slide 39 text
Measuring Performance
• RUM
– Real User Data
– Measured using browser APIs
• Synthetic
– Simulated User Testing
– Simulated using real devices and browsers
Slide 40
Slide 40 text
Median vs Average
Slide 41
Slide 41 text
On-demand testing: WebPageTest.org
Monitoring: GetSwiftSage.com
Synthetic Testing
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
GetSwiftSage.com/cg16
Slide 44
Slide 44 text
Beware of False Performance Prophets
• Google AMP"
• Facebook Instant Articles
• Apple News
Slide 45
Slide 45 text
Everything should have value,
because everything has a cost
Tim Kadlec
Slide 46
Slide 46 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 47
Slide 47 text
Performance Budget
• HTML: 5%
• CSS: 10%
• Javascript: 10%
• Images: 65%
• Fonts: 5%
• Other: 5%"
• Page Size Goal: 1500 kb (+/- 500 kb)
Slide 48
Slide 48 text
Performance Awards
Slide 49
Slide 49 text
What’s Next?
• Javascript API for detecting connection speed"
• Measuring speed index in RUM"
• How does web performance impact conversions and
user behavior?
Slide 50
Slide 50 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"
• Follow me and @getswiftsage on Twitter"
• More resources at aristotlelabs.com/cg16
Slide 51
Slide 51 text
Thank you!
aristotlelabs.com/cg16
getswiftsage.com/cg16