Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

I’m Clark Łukasz from InVision Infermedica

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

BAD NEWS 1

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

California: WiFi buses 11/52 @LukaszPrzywarty Source: CBS

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

GOOD NEWS 2

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Market is shifting

Slide 19

Slide 19 text

USERS AND BUSINESS 3

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

22/52 @LukaszPrzywarty Source: 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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24/52 @LukaszPrzywarty Source: 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%

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

WHAT CAN I DO? 4

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Take care of your images 33/52 @LukaszPrzywarty

Slide 34

Slide 34 text

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%

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Optimize your web font use 38/52 @LukaszPrzywarty

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Embrace new technical possibilities 40/52 @LukaszPrzywarty

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Network information 42/52 @LukaszPrzywarty Learn 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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

FOLLOW UP 5

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Load fast 46/52 @LukaszPrzywarty

Slide 47

Slide 47 text

Use less data 47/52 @LukaszPrzywarty

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

THANK YOU! @LukaszPrzywarty at Twitter,
 LinkedIn and Instagram