what we talk about�when we talk about
WEB PERFORMANCE
May 2017, Dusseldorf
design & front-end code, focus on PE & RWD
WE DO
everyone
MAKE THE WEB WORK FOR
founded 2001
170+ WEB SITE/APP PROJECTS FOR 80 CLIENTS
2010 to today
40+ RESPONSIVE SITES/APPS WITH 30 CLIENT TEAMS
we’ve had lots of conversations about
HOW TO APPROACH WEB DESIGN & DEV
Average web page size more than tripled in the past 5 years
http://httparchive.org/trends.php?s=All&minlabel=Jul+1+2011&maxlabel=Dec+2+2016#bytesTotal&reqTotal
https://aasaindustryanalysis.wordpress.com/2015/08/04/smartphone-market-continues-upswing-in-q2/
http://www.google.com/publicdata/explore?ds=d5bncppjof8f9_#!ctype=l&strail=false&bcs=d&nselm=h&met_y=it_net_user_p2&scale_y=lin&ind_y=false&rdim=region&idim=region:EAS:ECS:LCN:MEA:NAC:SAS:SSF&ifdim=region&hl=en_US&dl=en_US&ind=false
iOS mobile landscape, Sept 2014-present
Samsung touchscreen devices, 2014
Android mobile landscape, 2012
http://opensignal.com/reports/fragmentation/
Android mobile landscape, 2013
http://opensignal.com/reports/fragmentation-2013/
Android mobile landscape, 2014
http://opensignal.com/reports/2014/android-fragmentation/
Android mobile landscape, 2015
https://opensignal.com/reports/2015/08/android-fragmentation/
AT&T 4G ‘plan’ 2014
http://arstechnica.com/business/2014/04/fcc-chairman-regrets-that-att-and-verizon-control-the-best-spectrum/
AT&T coverage map 2016
Verizon 4G coverage map 2013
Verizon coverage map 2016
so much data says
BIGGER (SCREENS), �BETTER (NETWORKS), �MORE (PIXELS)
so, of course�BIGGER-BETTER-MORE WEBSITES
http://httparchive.org/trends.php?s=All&minlabel=Jul+1+2011&maxlabel=Dec+2+2016#bytesTotal&reqTotal
so where’s the problem?
https://twitter.com/jaffathecake/status/709411154150473728
common misperception that slow networks are a
THIRD WORLD PROBLEM
https://twitter.com/BenedictEvans/status/513017790920290304
http://www.businessinsider.com/facebook-2g-tuesdays-to-slow-employee-internet-speeds-down-2015-10
“Facebook … will give employees an opportunity to see what using the app with an incredibly slow connection feels like and help close the "empathy gap" between Silicon Valley and emerging markets.”
“Engineers … testing their apps on a 2G Nigerian network … [or] an overloaded network in Jakarta … at the first Internet.org hackathon.”
https://twitter.com/stephenpeas/status/708759155150966785
too easy for clients �to think
“NOT REALLY OUR PROBLEM”
except...
except...
2G NETWORKS ARE NOT EXCLUSIVE TO THE THIRD WORLD
except...
ALL NETWORK SPEED DATA REFLECT THE BEST CASE SCENARIO
“Map displays approximate outdoor coverage and coverage may vary. Coverage is not guaranteed and is subject to change without notice.”
“These maps are not a guarantee of coverage and contain areas of no service… Wireless service is subject to network and transmission limitations…”
“In mature markets (like the US), LTE’s median speeds have become as much as 50% slower within the last year.”�
“fast” networks don’t always deliver
http://twinprime.com/lte-has-slowed-by-50-in-the-us/
https://www.ericsson.com/assets/local/mobility-report/documents/2016/ericsson-mobility-report-november-2016.pdf
https://www.ericsson.com/assets/local/mobility-report/documents/2016/ericsson-mobility-report-november-2016.pdf
https://www.ericsson.com/assets/local/mobility-report/documents/2016/ericsson-mobility-report-november-2016.pdf
https://www.ericsson.com/assets/local/mobility-report/documents/2016/ericsson-mobility-report-november-2016.pdf
and we know
SPEED ISSUES ARE �NOT EXCLUSIVE TO LOWER END NETWORKS
“Website visitors tend to care more about speed than all the bells and whistles we want to add to our websites”
https://blog.kissmetrics.com/loading-time/?wide=1
https://webmasters.googleblog.com/2015/04/mobilemadness-campaign-to-help-you-go.html
In early 2015,The National Journal tested download speeds on the Acela AmtrakConnect WiFi service
Green = broadband
Red = 0 - .9 Mbps.
Amtrak WiFi: So Slow It Might As Well Not Exist
https://consumerist.com/2015/04/23/amtrak-wifi-so-slow-it-might-as-well-not-exist/
The web’s true potential for democracy, economic growth and human creativity is only just beginning to be glimpsed...
�- Sir Tim Berners-Lee
http://www.theworldin.com/article/10648/wider-world-web
In 2016 all of us must protect and enhance this public space for the benefit of all humankind.
�- Sir Tim Berners-Lee
http://www.theworldin.com/article/10648/wider-world-web
we need data and tools to convince
‘NOT REALLY OUR PROBLEM’ SKEPTICS
https://www.soasta.com/blog/author/teverts/
http://www.pewinternet.org/
http://www.webperformancetoday.com/2012/03/21/neuroscience-page-speed-web-performance/
“Sensory memory...works in 100ms bursts. Every time you see something, this visual information is taken in....
Your short-term memory can store information for 10-15 seconds, at most, enough time for your working memory to process, manipulate, and control it.”
http://www.webperformancetoday.com/2012/03/21/neuroscience-page-speed-web-performance/
“We’ve evolved to perform actions in beautiful sequential series of minute actions that flow more or less seamlessly. We aren’t wired to deal with the fits and starts of human-computer interaction.”
http://www.webperformancetoday.com/2012/03/21/neuroscience-page-speed-web-performance/
“Delays in web page load times and video streaming can be as stressful as watching a horror movie….
Poor network performance increases smartphone users’ heart rate and stress levels”
https://www.ericsson.com/res/docs/2016/mobility-report/ericsson-mobility-report-feb-2016-interim.pdf
“Back as far as Robert B. Miller’s classic 1968 paper “Response Time in Man-Computer Conversational Transactions“, studies have found that people are—and always have been—most comfortable, most efficient, and most productive with response times of less than 2 seconds.”
�Tammy Everts, “Time Is Money: The Business Value of Web Performance” (O’Reilly, 2015)
Analysis of 12 top retailers that cater to the back-to-school shopping crowd, 500 million user sessions
http://www.soasta.com/blog/back-to-school-website-performance-monitoring/
SEPTEMBER 30, 2015
Smartphones dominate retail traffic, doubling in one year
25% DESKTOP
75% PHONE/TABLET
60% DESKTOP
40% PHONE/TABLET
2015�
2014�
http://www.soasta.com/blog/back-to-school-website-performance-monitoring/
Between 2014 and 2015, the optimal load time for peak conversion shifted from 3.8 seconds to 2.4 seconds
SOASTA 2016 Holiday Retail Insights Report, September 2016�https://www.soasta.com/wp-content/uploads/2016/10/19036-Holiday-Retail-Insights-Report-PQ.pdf
In 2015, most users experienced page loads between 2.2-4.2 sec, compared to 2014 when the bulk experienced load times between 3-5.8 sec
SOASTA 2016 Holiday Retail Insights Report, September 2016�https://www.soasta.com/wp-content/uploads/2016/10/19036-Holiday-Retail-Insights-Report-PQ.pdf
In 2014, converted shoppers fell neatly within the sweet spot
SOASTA 2016 Holiday Retail Insights Report, September 2016�https://www.soasta.com/wp-content/uploads/2016/10/19036-Holiday-Retail-Insights-Report-PQ.pdf
In 2015, there is a pronounced gap between the bulk of converted traffic and the 2.4-second peak conversion rate
SOASTA 2016 Holiday Retail Insights Report, September 2016�https://www.soasta.com/wp-content/uploads/2016/10/19036-Holiday-Retail-Insights-Report-PQ.pdf
TOP SITES KNOW: �Performance is critical
page load +500ms = 3% drop in traffic �page load +1000ms = 6% drop
page load +100ms = 1% loss in sales
page load +500ms = 25% fewer searches
page load +400ms = 5–9% drop in traffic
Pew Research Center study of American device ownership trends
Multi-wave, demographically diverse
2014-15
http://www.pewinternet.org/files/2015/10/PI_2015-10-29_device-ownership_FINAL.pdf
Pew Research Center detailed research on �U.S. smartphone ownership and usage
http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
Cell phones, and especially smartphones & tablets are growing dramatically.
Other devices (laptops, e-readers) flat or declining
http://www.pewinternet.org/files/2015/10/PI_2015-10-29_device-ownership_FINAL.pdf
77% of cell internet users say they experience slow download speeds that prevent things from loading as quickly as they would like.
Among our 5,400 panelists, approximately �15% do not have Javascript-enabled devices.
“Building Pew Research Center’s American Trends Panel,” April 8, 2015
Fully 68% of adults now have a smartphone, nearly double the share that Pew Research Center measured in its first survey on smartphone ownership in mid-2011.
19% of American adults are “smartphone dependant” - i.e., they have a smartphone, but limited or no other internet access
http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
The trend toward mobile-only access is growing, especially for younger, minority, and lower income populations
http://www.pewinternet.org/2015/12/21/home-broadband-2015/
37% of smartphone owners reach the maximum amount of data on their plan at least on occasion.
Fully 15% say that this happens “frequently.”
http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
48% of smartphone-�dependent individuals have had to cancel or suspend service due to financial constraints.
http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
http://www.cbsnews.com/news/apple-iphone-wi-fi-assist-blamed-for-teens-2000-phone-bill/
“It turns out Ashton Finegold's bedroom is one such place with a weak signal.
So while he thought he was still connected to his home Wi-Fi while surfing the web in his room, his iPhone was eating up more than 144,000 MB of data..”
terrific, if you
HAVE ABUNDANT / UNLIMITED DATA
WANT THIS DECISION MADE FOR YOU
those are
BIG ASSUMPTIONS
https://twitter.com/roy/status/861563195424681985
For context, in 2014, 51.4% of American wage earners received compensation of �less than $30,000
62% of smartphone owners have used their phone in the past year to look up information about a health condition
http://www.webpagetest.org/result/160316_C2_1B8A/
68% of smartphone owners use their phone at least occasionally to follow along with breaking news events, with 33% saying that they do this “frequently.”
http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
http://www.webpagetest.org/result/160318_W2_153W/
http://www.webpagetest.org/result/160318_PQ_15FR/
“Visiting the home page of Boston.com every day for a month would cost the equivalent of about $9.50 in data usage just for the ads.”
http://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html?_r=1
Some 28% of Americans—including 53% of 18- to 29-year-olds—have used a smartphone in one way or another as part of a job search
http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
http://www.webpagetest.org/result/160322_Y4_12G1/#run4
http://www.webpagetest.org/video/compare.php?tests=160317_E7_10KB-r:1-c:0
Fully 53% of smartphone owners indicate that they have been in an emergency situation where having their phone available helped resolve the situation
http://www.pewinternet.org/2015/12/21/home-broadband-2015/
http://www.webpagetest.org/video/compare.php?tests=160317_E7_10KB-r:1-c:0
http://www.webpagetest.org/result/160318_7P_1CSD/
http://www.webpagetest.org/result/160322_70_11P8/
without JavaScript
with JavaScript
Completely non-functioning navigation without Javascript enabled
sobering data emerging about
ENVIRONMENTAL IMPACTS
http://www.theatlantic.com/technology/archive/2013/04/cell-networks-are-energy-hogs/274961/
Cell Networks Are Energy Hogs
“Wireless �infrastructure, �not data centers, �may prove to be �the larger energy �consumer.”
“...energy consumption associated with 'wireless cloud' will ... increase in carbon footprint from 6 megatonnes of CO2 in 2012 up to 30 megatonnes in 2015, which is the equivalent of an additional 4.9 million cars on the road.”
IEA: $80 Billion in Power Wasted by Connected ‘Things’
http://www.forbes.com/sites/heatherclancy/2014/07/24/iea-80-billion-in-power-wasted-by-connected-things/#2c81a20374f7
these are big audiences
AND SERIOUS CONSEQUENCES
large web pages impose an
INVISIBLE BUT �VERY REAL COST
our design and �code decisions
NEED TO BE MINDFUL
the future is internet
THAT DELIVERS ON THE PROMISE IT STARTED WITH
(Special thanks to Eric and Sara for that reminder, and for so many other very good ideas)
how do we make our designs & code
CONSERVATIVE AND ACCEPTING?
filesize and �page speed
ARE DESIGN CHOICES
take a critical eye �to everything
PARE DOWN TO MOST ESSENTIAL, & OPTIMIZE
make speed part of the design process:
SET PERFORMANCE GOALS IN THE DESIGN SPEC
consider perceived performance:
RENDER SOMETHING USEFUL AS QUICKLY AS POSSIBLE
performance opportunities:
we can make performance a
COMPETITIVE ADVANTAGE
we can make performance a
PATH TO DEMOCRACY, GROWTH & CREATIVITY
#1:
OPTIMIZE THOSE IMAGES
FORMATS AND METHODS
VECTOR GRAPHICS (SVG)�Infinitely scalable, bitmap fallbacks
COMPRESSIVE IMAGES�2x bitmaps at high compression
RESPONSIVE IMAGES�Different images per breakpoint
svg
THE JOY OF
Scalable Vector Graphic (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) ...since 1999.
FULL COLOR VECTORS
CSS STYLING
RESPONSIVE
OPTICAL CORRECTION
INTERACTIVE
Automate animated SVGs using Adobe AI layers
LEARN HERE
http://filamentgroup.github.io/layersnap/demo/
LEARN HERE
https://sarasoueidan.com/articles/
LEARN HERE
https://docs.google.com/presentation/d/1CNQLbqC0krocy_fZrM5fZ-YmQ2JgEADRh3qR6RbOOGk/edit#slide=id.p
bitmaps
BETTER
1x Display
2x Retina
Balancing Bitmap Quality
2x images are very large
~300% larger file at “standard” compression
55% Quality
55% Quality
Name gate_2x_55.jpg
Kind JPEG image
Size 43k
Name gate_1x_55.jpg
Kind JPEG image
Size 14k
Compressive images are much smaller
120-150% larger file than 1x at high compression
55% Quality
20% Quality
55% Quality
20% Quality
Name gate_2x_20.jpg
Kind JPEG image
Size 19k
Name gate_1x_55.jpg
Kind JPEG image
Size 14k
Compressive images
Over-sized and over-compressed JPEG images. This single image then works for both SD and HD screens with a simple img tag.
Typical export settings: 2x, Progressive JPEG, 20% quality, 0.1% blur
Typical export settings: 2x, Progressive JPEG, 20% quality, 0.1% blur
Typical export settings: 2x, Progressive JPEG, 20% quality, 0.1% blur
Typical settings
For images, especially with Responsive, one size does not fit all
For larger image, consider multiples
640px in 768px viewport
0.8x
640px in 568px viewport
1.1x
600px
1200px
1800px
Responsive images
Dynamically load the appropriate image source based on image size in layout and/or screen density (DPI)
Typical export settings: 2x, Progressive JPEG, 20% quality, 0.1% blur
Typical export settings: 2x, Progressive JPEG, 20% quality, 0.1% blur
Typical export settings: 2x, Progressive JPEG, 20% quality, 0.1% blur
There are great resources, and a huge community, around image optimization and delivery:
https://responsiveimages.org/
#2:
OPTIMIZE ASSET LOADING
In addition to download time, JavaScript can be very slow to parse and execute on mobile devices.
PERFORMANCE ISSUE:
jQuery 2.1.1 Parse + Execution Times*
Macbook Air (2014), Chrome
Lumia 520 (WP8)
5ms
29ms
34ms
97ms
56ms
153ms
Android 2.3.6 Phone, Browser
168ms
484ms
652ms
“JS Parse and Execution Time” Tim Kadlec, September 24, 2014�http://timkadlec.com/2014/09/js-parse-and-execution-time/
* jQuery is 82K (29K gzipped)
PARSE
EXECUTE
TOTAL
https://twitter.com/addyosmani/status/861166051517620225
Load times for 1MB of uncompressed JS over WebPageTest + real devices.
“When anything over 100ms stops feeling instantaneous and anything over 1000ms breaks the users flow, taking 700ms to parse your JavaScript cripples the user experience before it really has a chance to get started.”
“JS Parse and Execution Time” Tim Kadlec, September 24, 2014�http://timkadlec.com/2014/09/js-parse-and-execution-time/
Many techniques for�SPEED OPTIMIZATION
https://www.filamentgroup.com/lab/weight-wait.html
More weight doesn’t mean more wait�SAME ASSETS, SMARTER LOADING
https://www.filamentgroup.com/lab/weight-wait.html
Optimize for speed & caching
JS RECOMMENDATIONS
Our “Cut the Mustard”
We use Enhance.js to provide a cleaner way to determine what devices should get the enhanced experience.
Making the cut
If a browser passes the test, it requests the enhanced experience JavaScript (including shoestring, our DOM Library and the component JS) and web fonts.
If it fails to cut the mustard, it isn’t encumbered with any extra JS or web fonts.
Custom fonts: how long will they wait?
When @font-face loading hangs, some browsers have long timeouts while they wait for the font. Your content will be invisible until...
Current: Flash of Invisible Text (FOIT)
The site now is unusable for longer than needed as we wait for custom fonts to download. A blank UI with invisible text feels slow to a visitor.
INVISIBLE TEXT WHILE LOADING
CUSTOM FONTS LOADED
CHALLENGE
Flash of Unstyled Text (FOUT)
For the first visit only: show a local fallback font so text is immediately visible and site is usable much faster on a 3G connection. Use cached fonts on subsequent views.
FALLBACK NATIVE FONT (GEORGIA + ARIAL) WHILE LOADING
CUSTOM FONTS LOADED
FONT RECOMMENDATION
Load fonts asynchronously
RECOMMENDATION
Tuning Up Fonts
RECOMMENDATION
SHAMELESS PLUG:
Some great technique recommendations here:
http://filamentgroup.com/lab/performance-rwd.html
SHAMELESS PLUG:
This man has forgotten more about optimization that I will ever know.
https://www.filamentgroup.com/lab/mv-initial-load-times.html
MVC/JS framework first-load impacts
We know many sites want use frameworks to capitalize on their speed capabilites, but the first page load is a critical gating factor for many visitors.
Data about baseline load speeds is difficult to come by.
CHALLENGE
on-demand
THINK MORE ABOUT
Curbing wasted bandwidth
Many sites will load images, audio, video, JavaScript, and other resources that are:
CHALLENGE
Put the visitor in control
RECOMMENDATION
DESKTOP WITH THROTTLED 2G CONNECTION
AN OPTIMIZATION EXPERIMENT
#3:
DON’T COMPROMISE ACCESSIBILITY
there’s no good reason
TO LIMIT ACCESS TO YOUR BASIC CONTENT
it ensures reach �and larger markets
AND COMMON COURTESY
would you refuse a customer because
THEY DROVE THE WRONG CAR? OR A BIKE? �OR TOOK THE SUBWAY?
$6,000,000�SETTLEMENT
$795,000�SETTLEMENT
http://www.wsj.com/articles/SB10001424127887324373204578374483679498140
Last year alone in �the US, there were >240 law suits against sites for accessibility problems, and thousands of notice letters.
http://www.karlgroves.com/2011/11/15/list-of-web-accessibility-related-litigation-and-settlements/
http://www.adatitleiii.com/2016/10/federal-website-lawsuits-spike-community-banks-get-demand-letters/
Progressive Enhancement
IS YOUR FRIEND
Progressive Enhancement
ENSURES BROAD ACCESS �AND FAULT TOLERANCE
Progressive Enhancement =
SEMANTIC MARKUP, �ADD FEATURES BASED ON CAPABILITIES
not all or nothing
THINKING DIFFERENTLY ABOUT CONTENT, SOURCE ORDER, STRUCTURE, INTERACTION
with JavaScript
without JavaScript
with JavaScript
without JavaScript
with JavaScript
without JavaScript
with JavaScript
without JavaScript
remember: �HTML is inherently accessible
JS & CSS CAN BREAK IT
HTML element semantics often fall short for describing complex UIs.
WAI ARIA is a W3C spec that gives us the semantic tools to describe these.
WAI-ARIA
SHAMELESS PLUG:
lots of open-source PE-based components here:
http://filamentgroup.com/code/
SHAMELESS PLUG:
400+ pages of �Progressive Enhancement nerdery for the really curious
Progressive Enhancement
LIBERATES US TO FOCUS ON GREAT DESIGN OPPORTUNITIES
In 2016 all of us must protect and enhance this public space for the benefit of all humankind.
�- Sir Tim Berners-Lee
http://www.theworldin.com/article/10648/wider-world-web
@pattytoland
@filamentgroup
filamentgroup.com
THANKS.