Why performance matters? What impacts load time? What can designers do to improve performance and cut data size? Slides were presented at WUDKRK 2017. Kraków, Poland, Dec 2, 2017

1. LOADING
PERFORMANCE
WUD Kraków 2017 – December 2
Łukasz Przywarty

2. I’m Clark
Łukasz
from InVision
Infermedica

3. 3/52@LukaszPrzywarty
• Exclusion
• Travels
• Disasters
Why loading
performance
matters?

4. What impacts
load time?
4/52@LukaszPrzywarty
• Network conditions
• Hardware
• File size
• Server requests
• Scripts and frameworks
• Browser
• And more!

5. BAD NEWS1

6. “We don't always build with a
global audience in mind.
Tal Oppenheimer, Google
6/52@LukaszPrzywarty

7. of mobile connections
are 2G
7/52Source: Chrome Dev Summit 2017 @LukaszPrzywarty
60%

8. Source: The Mobile Economy 2017
0%
25%
50%
75%
100%
India Indonesia Sub Saharan
Africa
2G
3G
4GSometimes it’s
even worse

9. Why should
I care?
Source: Internet Live Stats
Internetless users (2016)
0M
225M
450M
675M
900M
India
China
Indonesia
Pakistan
Bangladesh
Nigeria
Ethiopia
D
R
Congo

10. 10/52@LukaszPrzywarty
• Fast is 25Mbps/3Mbps
• 10% of all Americans
• 39% of rural Americans
Source: FCC Broadband Progress Report (2016)
23M Americans don’t have
fast internet

11. California:
WiFi buses
11/52@LukaszPrzywartySource: CBS

12. average load time for
mobile site over 3G
12/52@LukaszPrzywarty
19s
Source: DoubleClick: The Need for Mobile Speed (Feb 2016)

13. Source: What Does My Site Cost? (2017)
Data cost: wudkrakow.pl
Canada
Japan
Brazil
Germany
Botswana
United States
India
Indonesia
Russia
Poland $0,01
$0,01
$0,01
$0,02
$0,18
$0,21
$0,23
$0,24
$0,24
$0,35
Data can be
expensive

14. 14/52@LukaszPrzywarty
The Alliance for Affordable
Internet advocates, that 1GB
of internet plan should cost
2% of income.
Source: FCC Broadband Progress Report (2016)
1 for 2

15. GOOD NEWS2

16. is the current
average global
internet speed
16/52@LukaszPrzywarty
7.2
Source: Akamai: State of the Internet (Q1 2017)
15% increase year-to-year
Mbps

17. Source: Chrome Dev Summit 2017
Annualized cost of 1GB / mo in India
$0
$15
$30
$45
$60
Q1 Q2 Q3 Q4 Q1 Q2 Q3 Q4 Q1
2015 2016 2017
2% GDP / capita
Data becomes
cheaper

18. Market is
shifting

19. USERS AND BUSINESS3

20. “Cut page load by 100ms and you
save Wikipedia readers 617 years
of wait annually.
Wikipedia on Twitter
20/52@LukaszPrzywartySource: Twitter

21. of mobile site visits are
abandoned if pages take longer
than 3 seconds to load
21/52@LukaszPrzywartySource: DoubleClick: The Need for Mobile Speed (Mar 2016)
53%

22. 22/52@LukaszPrzywartySource: Google Webmaster Central Blog (Apr 2015)
46% of consumers say that waiting
for pages to load is what they
dislike most when browsing
the mobile web

23. Source: Ericsson Mobility Report (Feb 2016)
Cognitive load when…
Solving a math problem
Experiencing mobile delays
Watching a horror movie
Standing at the edge of virtual cliff
Watching a melodramatic TV show
Waiting in line at retail store
Loading is
stressfull

24. 24/52@LukaszPrzywartySource: The State of Online Retail Performance (Spring 2017)
2.7s Desktop pages that loaded in
2.7 seconds experienced a peak
conversion rate of 12.8%

25. Every extra second means:
25/52@LukaszPrzywartySource: The State of Online Retail Performance (Spring 2017)
20.5%
conversion
49.8%
bounce rate
24.8%
session length

26. WHAT CAN I DO?4

27. “Performance is an essential design feature.
Brad Frost
27/52@LukaszPrzywarty

28. MOM: Measure, Optimise, Monitor
28/52@LukaszPrzywarty

29. What to measure?
First Paint
(FP)
First Contentful
Paint (FCP)
First Meaningful
Paint (FMP)
Time to
Interactive (TTI)

30. If you need, customize your metrics
30/52@LukaszPrzywarty

31. Tools
31/52@LukaszPrzywarty
• Chrome DevTools
• Google Lighthouse
• Network Link Conditioner
• Android Emulator
Local
• WebPageTest
• PageSpeed
• Calibre
• Scripts (e.g TTI Polyfill,
PerformanceObserver)
Remote

32. Design for
performance
32/52@LukaszPrzywarty
• Eliminate unnecessary elements
• Use style guides
• Design loading and offline states
• Optimize images
• Use fonts reasonably
• Embrace new technical possibilities

33. Optimize images
33/52@LukaszPrzywarty

34. Source: HTTPArchive
Fonts
3%
Scripts
14%
Stylesheets
3%
HTML
2%
Images
54%
Other
1%
Video
24%
Total: 3378 kB
of average website
weight are images
54%

35. 35/52@LukaszPrzywarty
Pick the right
format
• Prefer SVG
• Animate with CSS/JS
• Experiment with new formats
(WebP, JPEG-XR, WebM)
• Avoid GIFs

36. 36/52@LukaszPrzywarty
Optimize
images
• Export images that fit the user’s screen
• Use <picture> element
• Compress and automate (e.g. ImageOptim)

37. Source: HTTPArchive
System fonts
30%
Custom fonts
70%
of websites use
custom fonts
70%

38. Optimize your web font use
38/52@LukaszPrzywarty

39. Use subsets @font-face {
...
/* Latin */
unicode-range: U+000-5FF;
}
@font-face {
…
/* Cyrillic */
unicode-range: U+0400–U+045F;
}
1
2
3
4
5
6
7
8
9
10
11
Learn more: Network Information API

40. Embrace new technical
possibilities
40/52@LukaszPrzywarty

41. Font display
41/52@LukaszPrzywarty
@font-face {
font-family: MyFont;
src: url(myfont.woff) format('woff'),
url(myfont.eot) format('eot');
font-weight: 400;
font-style: normal;
font-display: optional;
}
Learn more: font-display
1
2
3
4
5
6
7
8

42. Network
information
42/52@LukaszPrzywartyLearn more: Network Information API
// Returns the effective bandwidth
NetworkInformation.downlink
// Returns the maximum downlink speed
NetworkInformation.downlinkMax
// Returns the effective type
NetworkInformation.effectiveType
// Returns the effective round-trip time
NetworkInformation.rtt
// Returns the type of connection
NetworkInformation.type
1
2
3
4
5
6
7
8
9
10
11
12
13
14

43. 43/52@LukaszPrzywarty
• Compression of text-based assets (GZIP, Brotli)
• HTTP Caching
• HTTP/2
• Optimised Critical Rendering Path
• PWA, AMP
There's even more nerdy stuff

44. FOLLOW UP5

45. Your connection is not everyone’s
connection
44/52@LukaszPrzywarty

46. Load fast
46/52@LukaszPrzywarty

47. Use less data
47/52@LukaszPrzywarty

48. Weigh up the balance between
aesthetics and performance
48/52@LukaszPrzywarty

49. Try to build the world wide web
for everyone
49/52@LukaszPrzywarty

50. 50/52@LukaszPrzywarty
Sources
• Brainfood mobile performance
• Front End Performance Checklist 2017
• Leveraging the Performance Metrics that
Most Affect User Experience
• Measure Performance with the RAIL
Model
• PageSpeed Insights Rules
• Saving Bandwidth with Images
• The cost of Javascript
Articles
• The need for mobile speed

51. 51/52@LukaszPrzywarty
Sources
• Building for Your Next Billion Users
• Fast By Default: Modern Loading Best
Practices
• Focusing on What Matters
• Luke Wroblewski Conversions
• Perfecting Perf
• The Future of Loading on the Web
• The Illusion of speed
• The Web for the Entire World
Videos
• Web Performance: Leveraging the Metrics
that Most Affect User Experience
• Why 23 million Americans don't have fast
internet

52. THANK YOU!
@LukaszPrzywarty at Twitter,
LinkedIn and Instagram