Finding web performance issues you didn’t know you had

A presentation at GDG Stockholm May/Spring 2019 in May 2019 in Stockholm, Sweden by José M. Pérez

Slide 1

Slide 1

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez

Slide 2

Slide 2

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez 53 % of mobile users abandon sites that take over 3 seconds to load Source: Google Data, Global, n=3,700 aggregated, anonymized Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, March 2016.

Slide 3

Slide 3

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Source: Speed Matters - Desining for Mobile Performance, Awwwards

Slide 4

Slide 4

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez https://www.youtube.com/embed/gsNaR6FRuO0?enablejsapi=1

Slide 5

Slide 5

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez https://www.youtube.com/embed/wVsY9PVIKsQ?enablejsapi=1

Slide 6

Slide 6

Finding web performance issues you didn’t know you had José M. Pérez @jmperezperez

Slide 7

Slide 7

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez The Tools

Slide 8

Slide 8

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez The Tools (Synthetic) One Off Lighthouse (browser, cli or web ) WebPageTest Monitoring Periodically Calibre CrUX Dashboard Firebase New Relic Pingdom Sitespeed SpeedCurve

Slide 9

Slide 9

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez The Tools (RUM) Akamai’s mPulse CrUX Dashboard Firebase New Relic Pingdom Sitespeed SpeedCurve

Slide 10

Slide 10

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Tools are important, but… Web Performance is a moving target What’s the dev effot to fix a certain issue What’s the impact

Slide 11

Slide 11

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez y s s a e e x & fi ick nce u Q rma o erf p r o f rt ffo e ch ain u m tle g o To lit

Slide 12

Slide 12

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Enable compression Preconnect Lazy Loading Font-display

Slide 13

Slide 13

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Compression 36 % of potential files are not compressed Source: HTTP Archive

Slide 14

Slide 14

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Preconnect 1 <link rel=”preconnect” 2 href=”https://fonts.gstatic.com/” 3 crossorigin> Without Preconnect With Preconnect

Slide 15

Slide 15

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Lazy-Loading <img> above the fold & Lazy below the fold

Slide 16

Slide 16

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Lazy-Loading Intersection Observer

Slide 17

Slide 17

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Lazy-Loading // load image when it’s within 100px of the viewport const options = { rootMargin: ‘100px’ } const callback = entries => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { // load image } }); }; const observer = new IntersectionObserver(callback, options); observer.observe(document.querySelector(‘.lazy-img’));

Slide 18

Slide 18

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD Quick Fixes Lazy-Loading @jmperezperez

Slide 19

Slide 19

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD Quick Fixes Lazy-Loading @jmperezperez

Slide 20

Slide 20

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Font-display Source: @zachleat

Slide 21

Slide 21

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Font-display Source: @zachleat

Slide 22

Slide 22

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Font-display Source: @zachleat

Slide 23

Slide 23

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Quick Fixes Font-display Source: @zachleat

Slide 24

Slide 24

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD Quick Fixes Font-display @jmperezperez

Slide 25

Slide 25

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Non obvious issues After-rendering performance (eg repaints, junky scroll) Duplicated combined assets Third-party scripts

Slide 26

Slide 26

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD Advanced Fixes Long frames @jmperezperez

Slide 27

Slide 27

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD Advanced Fixes Unnecessary repaints @jmperezperez

Slide 28

Slide 28

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD Advanced Fixes Duplicated resources @jmperezperez

Slide 29

Slide 29

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Advanced Fixes 3rd party scripts impact 3rd party scripts Tech Marketing

Slide 30

Slide 30

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Advanced Fixes 3rd party scripts impact 3rd party scripts Tech Marketing Where the magic happens

Slide 31

Slide 31

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD Advanced Fixes 3rd party scripts impact @jmperezperez

Slide 32

Slide 32

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Pro-T ip Measure the impact of your performance improvements

Slide 33

Slide 33

FINDING WEB PERFORMANCE ISSUES YOU DIDN’T KNOW YOU HAD @jmperezperez Pro-T ip Monitor your performance to avoid regressions

Slide 34

Slide 34

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Wrapping up

Slide 35

Slide 35

BETTER PERFORMANCE FOR COMPONENT-BASED WEB APPS @jmperezperez Web Performance matters Quick fixes have a great impact Data wins arguments

Slide 36

Slide 36

@jmperezperez jmperezperez.com slides.com/jmperez