FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

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.

of mobile users abandon sites that take over 3 seconds to load

53

%

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

@jmperezperez

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

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)

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

Tools are important, but...

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

  • 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

Quick & easy

performance fixes

Too much effort for

little gain

Quick Fixes

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

  • Enable compression
  • Preconnect
  • Lazy Loading
  • Font-display

36

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

of potential files are not compressed

%

Source: HTTP Archive

Quick Fixes

Compression

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Quick Fixes

Preconnect

<link rel="preconnect"
      href="https://fonts.gstatic.com/"
      crossorigin>

Without Preconnect

With Preconnect

<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

@jmperezperez

Quick Fixes

Lazy-Loading

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Quick Fixes

Lazy-Loading

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Quick Fixes

Lazy-Loading

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

@jmperezperez

Quick Fixes

Font-display

Non obvious issues

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

  • After-rendering performance (eg repaints, junky scroll)
  • Duplicated combined assets
  • Third-party scripts

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Advanced Fixes

Long frames

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Advanced Fixes

Unnecessary repaints

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Advanced Fixes

Duplicated resources

3rd party scripts

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Tech

Marketing

Advanced Fixes

3rd party scripts impact

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Tech

Marketing

Where the magic happens

3rd party scripts

Advanced Fixes

3rd party scripts impact

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Advanced Fixes

3rd party scripts impact

Pro-Tip

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

Measure the impact

of your

performance improvements

Pro-Tip

FINDING WEB PERFORMANCE ISSUES YOU DIDN'T KNOW YOU HAD

@jmperezperez

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

Finding web performance issues you didn't know you had

By José M. Pérez

Made with Slides.com

Finding web performance issues you didn't know you had

A quick look at some of the main web performance culprits. Fixing the easy ones and progressing to tackle the difficult to spot ones.

  • 1,959

More from José M. Pérez