Slide 1
Slide 1 text
Web Performance
Past, Present, and Future
/TheMattShull
mattshull.com/performance
Slide 2
Slide 2 text
Intro to #perfLife
• How we have optimized code in the past
• How we measured performance in the past
• New ways to optimize your code
• What metrics we should be measuring
• What tools are available to measure performance
• Technology that can help us moving forward
Slide 3
Slide 3 text
Web Performance
• Best practices changing
• Better code to track performance
• Lots of room to improve and be successful
Slide 4
Slide 4 text
Blast from the Past
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Growing Pains
Nov 2010 - Jan 2015
Top 100 HTTP Archives Sites
Slide 7
Slide 7 text
Growing Pains
Nov 2010 - Jan 2015
Top 100 HTTP Archives Sites
Slide 8
Slide 8 text
Growing Pains
Nov 2010 - Jan 2015
Top 100 HTTP Archives Sites
Slide 9
Slide 9 text
Mobile Revolution
Slide 10
Slide 10 text
Responsive Revolution
• Ethan Marcotte
• Before we had fixed width pages and
separate mobile sites
• Now we could make sites adapt to different
screen sizes
Slide 11
Slide 11 text
Responsive Revolution
• Page sizes still increasing
• TTFB can take several seconds on mobile
networks
Slide 12
Slide 12 text
Performance is Important!
#perfLife
Slide 13
Slide 13 text
Importance of Performance
First and foremost, we believe that speed is more
than a feature. Speed is the most important feature.
- Fred Wilson
Slide 14
Slide 14 text
Importance of Performance
Up to 40% of users abandon a request if it takes
longer than 3 secs to load.
Slide 15
Slide 15 text
Importance of Performance
Google Survey:
users exposed to a 400ms delay took several
weeks to return to normal searching habits
Slide 16
Slide 16 text
Ghost of Performance Past
• How we used to optimize code
(and still do to some extent).
!
• How we have measured
performance in the past.
Slide 17
Slide 17 text
Ghost of Performance Past
• There are time tested techniques
• Best practices are changing often
• Not every best practice will work for
every site.
Slide 18
Slide 18 text
Optimizing Code in the Past
• Condense CSS and JS files
• Removes white spaces
• Makes file sizes smaller
• Hard to read minified files: keep a dev
copy to make changes
Slide 19
Slide 19 text
Optimizing Code in the Past
• Place JS at the end of the
• Biggest factor in slow sites
• JS and CSS are render blocking
• JS can use async or defer
Slide 20
Slide 20 text
Optimizing Code in the Past
More Rules from Steve Souders:
http://stevesouders.com/hpws/rules.php
Slide 21
Slide 21 text
Optimizing Images: the Past
• File Types
• JPEG, PNG, Gif
• JPEG baseline vs progressive
•https://www.youtube.com/watch?v=TOc15-2apY0
Slide 22
Slide 22 text
Optimizing Image: the Past
• File Size
• Use the right image type
• Optimize with tools
Slide 23
Slide 23 text
Measuring Perf in the Past
• TTFB
• Start Render
• Load Time for Entire Page
Slide 24
Slide 24 text
Performance Today:
Benchmarks
• User Experience: How fast until…
• the user seeing the first paint?
(Start Render)
• the above the fold content is loaded?
• the document is interactive?
Slide 25
Slide 25 text
Performance Today:
UX is Important!
• DUH…better UX!
(Keep the user in mind!)
• SEO
• Fast sites = better rankings (Google)
• TTFB possible determining factor
(websiteoptimization.com)
Slide 26
Slide 26 text
Performance Today:
Optimizing Code
• Make sites responsive
• Above The Fold CSS in
(possibly in the HTML?!)
• Below the Fold CSS at the end of
• Use CSS instead of GIFs
Slide 27
Slide 27 text
Performance Today
• New Image Types: WebP
• 25%-34% smaller than JPEG
equivalent
• 26% smaller than PNG equivalent
• Chrome and Opera
Slide 28
Slide 28 text
Performance Today
• New HTML Elements
•
• Load different images for different
screen sizes
• Load different types of file types
• Falls back to ![]()
if all else fails…
Slide 29
Slide 29 text
Performance Today
!
! !
! !
! !
! !
! !
! ![“Some]()
!
Slide 30
Slide 30 text
Performance Today
Slide 31
Slide 31 text
Case Study
• Optimized photos
• Moved scripts to the bottom of
• Created a sprite
• Put all scripts in 1 file, Put all CSS in 1 file
• Minified scripts and CSS
Slide 32
Slide 32 text
Case Study
• Remove CSS bloat
• Separate Above the Fold CSS and
Below the Fold CSS
• Use WebP image formats for logo
using
Slide 33
Slide 33 text
Case Study
Test A
Test B
• JS and CSS in the
• Un-minified JS and CSS
• Uses baseline JPEGs
• Above the Fold CSS in the
• Below the Fold CSS and JS at
the end of the
• Uses progressive JPEGs
Slide 34
Slide 34 text
Case Study
Slide 35
Slide 35 text
What to Measure
• Backend Load Time
• # of redirects
• # of requests
• TTFB
• Frontend Load Time
• Start Render
• Speed Index
• Visually
Complete
• Total Load Time
Slide 36
Slide 36 text
How to Measure
• RUM (Real User Measurement)
• Gather data from actual users/devices
• Measure performance for different
locations
• Synthetic Testing
• Gather data from actual devices/browsers
• See non-cached “first view”
measurements
Slide 37
Slide 37 text
RUM Tools
• Navigation Timing API (JS)
• Google Analytics
• Boomerang (Yahoo!)
• Nines
Slide 38
Slide 38 text
RUM Tools
Slide 39
Slide 39 text
RUM Tools
• Navigation Timing API (JS)
• Google Analytics
• Boomerang (Yahoo!)
• Nines
Slide 40
Slide 40 text
Synthetic Tools
• Uses real devices to collect tons of data
• Gives “first view” and “repeat view” data
• Test website from multiple locations
• New Relic
• WebPageTest.org
• Nines
Slide 41
Slide 41 text
Synthetic Tools
• Uses real devices to collect tons of data
• Gives “first view” and “repeat view” data
• Test website from multiple locations
• New Relic
• WebPageTest.org
• Nines
Slide 42
Slide 42 text
Future of Performance
• UX will affect SEO more
• HTTP2 and SPDY
• Prefetch & Prerender
• Use SEO to determine user behavior
• Prefetch images, js, and/or css
needed for the next page to cache
• User clicks on link and page loads
from cache
Slide 43
Slide 43 text
Future of Performance
https://www.youtube.com/watch?v=_Jn93FDx9oI
Slide 44
Slide 44 text
Future of Performance
• Use microseconds instead of standard
milliseconds using High Resolution Timing
(IE 10+, Chrome, Opera, FF, Android)
• User Timing API to meausure AJAX
requests, script loading, script execution,
etc. (IE 10+, Chrome, Opera, Android)
• Beacons: send performance data async
whenever the current page is unloaded
(Chrome, FF, Opera)
Slide 45
Slide 45 text
Future of Performance
• Navigation Error Logging Javascript API:
Get RUM data of when and how a page
failed to load (i.e. DNS lookup, connection
timeout, reset connection, etc.) (No
support yet)
Slide 46
Slide 46 text
#perfMatters
• Optimize code and images
• Measure RUM and Synthetic testing using
tools available
• Embrace the new APIs to measure UX and
performance
bit.ly/ninesperf
Slide 47
Slide 47 text
#perfMatters
bit.ly/ninesperf
twitter.com/TheMattShull