Web Performance: Past, Present, and Future

Web Performance Past, Present, and Future /TheMattShull mattshull.com/performance

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

Web Performance • Best practices changing • Better code to
track performance • Lots of room to improve and be successful

Blast from the Past

Growing Pains Nov 2010 - Jan 2015 Top 100 HTTP
Archives Sites

Mobile Revolution

Responsive Revolution • Ethan Marcotte • Before we had ﬁxed
width pages and separate mobile sites • Now we could make sites adapt to different screen sizes

Responsive Revolution • Page sizes still increasing • TTFB can
take several seconds on mobile networks

Performance is Important! #perfLife

Importance of Performance First and foremost, we believe that speed
is more than a feature. Speed is the most important feature. - Fred Wilson

Importance of Performance Up to 40% of users abandon a
request if it takes longer than 3 secs to load.

Importance of Performance Google Survey: users exposed to a 400ms
delay took several weeks to return to normal searching habits

Ghost of Performance Past • How we used to optimize
code (and still do to some extent). ! • How we have measured performance in the past.

Ghost of Performance Past • There are time tested techniques
• Best practices are changing often • Not every best practice will work for every site.

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

Optimizing Code in the Past • Place JS at the
end of the <body> • Biggest factor in slow sites • JS and CSS are render blocking • JS can use async or defer

Optimizing Code in the Past More Rules from Steve Souders:
http://stevesouders.com/hpws/rules.php

Optimizing Images: the Past • File Types • JPEG, PNG,
Gif • JPEG baseline vs progressive •https://www.youtube.com/watch?v=TOc15-2apY0

Optimizing Image: the Past • File Size • Use the
right image type • Optimize with tools

Measuring Perf in the Past • TTFB • Start Render
• Load Time for Entire Page

Performance Today: Benchmarks • User Experience: How fast until… •
the user seeing the ﬁrst paint?  (Start Render) • the above the fold content is loaded? • the document is interactive?

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)

Performance Today: Optimizing Code • Make sites responsive • Above
The Fold CSS in <head> (possibly in the HTML?!) • Below the Fold CSS at the end of <body> • Use CSS instead of GIFs

Performance Today • New Image Types: WebP • 25%-34% smaller
than JPEG equivalent • 26% smaller than PNG equivalent • Chrome and Opera

Performance Today • New HTML Elements • <picture> • Load
different images for different screen sizes • Load different types of ﬁle types • Falls back to <img> if all else fails…

Performance Today <picture>! ! ! !
<source srcset="large.webp" media="(min-width: 800px)" type="image/webp">! ! <source srcset="large.jpg" media="(min-width: 800px)">! ! <source srcset="medium.jpg" media="(min-width: 400px)">! ! ! ! <img srcset="examples/images/small.jpg" alt=“Some Text">! </picture>

Performance Today

Case Study • Optimized photos • Moved scripts to the
bottom of <body> • Created a sprite • Put all scripts in 1 file, Put all CSS in 1 file • Minified scripts and CSS

Case Study • Remove CSS bloat • Separate Above the
Fold CSS and Below the Fold CSS • Use WebP image formats for logo using <picture>

Case Study Test A Test B • JS and CSS
in the <head> • Un-miniﬁed JS and CSS • Uses baseline JPEGs • Above the Fold CSS in the <head> • Below the Fold CSS and JS at the end of the <body> • Uses progressive JPEGs

Case Study

What to Measure • Backend Load Time • # of
redirects • # of requests • TTFB • Frontend Load Time • Start Render • Speed Index • Visually Complete • Total Load Time

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 “ﬁrst view” measurements

RUM Tools • Navigation Timing API (JS) • Google Analytics
• Boomerang (Yahoo!) • Nines

RUM Tools

RUM Tools • Navigation Timing API (JS) • Google Analytics
• Boomerang (Yahoo!) • Nines

Synthetic Tools • Uses real devices to collect tons of
data • Gives “ﬁrst view” and “repeat view” data • Test website from multiple locations • New Relic • WebPageTest.org • Nines

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

Future of Performance https://www.youtube.com/watch?v=_Jn93FDx9oI

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)

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)

#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

#perfMatters bit.ly/ninesperf twitter.com/TheMattShull

Web Performance: Past, Present, and Future

Web Performance: Past, Present, and Future

More Decks by Matt Shull

Other Decks in Technology

Featured

Transcript