Finding web performance issues you didn’t know you had

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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’));

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@jmperezperez jmperezperez.com slides.com/jmperez