Think

FastFast

, First

Empowering Performance Culture

Hi, I'm Alfredo.


You can call me Al...

This is my story of attending


PerfMatters

Learnings

Attempts

Achievements

Let's rewind

Hearst is a media company with more than 360 businesses.

Its major interests include magazines, TV networks, newspapers and more.

100+ websites

1 application

1. Get the Executive Buy-In

  • Measure

  • Compare to Competitors

Performance Calculator

https://www.thinkwithgoogle.com/feature/testmysite

Where to start?

Before

360kb Uncompressed

MAKE IT FASTER

Does the user need
this right now?

Infer by user action

Progressive Enhancements



After

27kb Uncompressed

~4 seconds faster FCP

Why is it still slow?

First Party vs Third Party

  • First Party: 11 Requests
  • Tag Manager: 7th Request
  • Third Party: 125 Requests

Optimizing Performance
is like going to the dentist

Looking back...

  • Focused on delivering results
  • Teams felt it was a top-down decision
  • How fast is fast enough?

What if performance is part of
the development process?

2. Developer Awareness

BEST PRACTICES

Performance is easy

Making fast websites in 2019 isn’t difficult.

You just have to be buddies with browser makers,

get paid to make websites faster, hang out on Twitter all day

for all the hot performance tips, and prefer hacking on

performance tweaks to watching Netflix.

Malte Ubl

Divide and Conquer



Svg Vector Icons : http://www.onlinewebfonts.com/icon

Server

Application

Development

Potential Bottlenecks

What do you
intend to do?

Abstract frequent optimizations

getBoundingClientRect

      
        // module-a.js
        requestAnimationFrame(() => {
          const { right, bottom } = el.getBoundingClientRect();
        });
        // module-b.js
        requestAnimationFrame(() => {
          el.classList.add('change-size'); 😱
        });
      
    

IntersectionObserver

      
        const io = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            //   entry.boundingClientRect
            //   entry.intersectionRatio
            //   entry.intersectionRect
            //   entry.isIntersecting
            //   entry.rootBounds
            //   entry.target
            //   entry.time
          });
        });
        // observe the element
        io.observe(el);
      
    
      
        const getBoundingClientRect = el =>
          new Promise((resolve) => {
            const io = new IntersectionObserver((entries) => {
              resolve(entries.shift().boundingClientRect);
              io.disconnect();
            });
            io.observe(el);
          });
      
    
        
        const touchDevice = 'ontouchstart' in window;

        const addListener = (target, type, listener) => {
          // switch click to touchstart on touch devices
          if (type === 'click' && touchDevice) {
            type = 'touchstart';
          }

          target.addEventListener(type, listener);
        }

        
    

Is it worth it?

  • Is it part of the critical path?
  • How frequent will it run?
  • Is it a shared or base component?

Your one-off is someone's pattern.

Looking back...

  • Developers were challenged by constraints
  • Features took longer to finish
  • Education without immediate action is quickly forgotten.

so, now what?

You need the cooperation of all these different groups to actually achieve your goals.

Lauren Nagel Younger

3. Product and Design

1. Idea 2. Prototype 3. Test

4. Development 5. MVP 6. Optimize

Where we think Performance should happen.

Where it should happen.

Could performance affect your hypothesis?

  • "We accounted for it during testing"
  • Features are not isolated

Performance Paths

  • Why are we doing this?
  • Align best practices with goals
  • Render vs Runtime
  • Mobile vs Desktop

We plan for today's problems.

But how can we prevent from blocking ourselves tomorrow?

Tech Debt != Bad Code

What if it rocks?


Share the vision

Document your tradeoffs



  • Specify the reasons.

  • Is it by design?
  • Is it a technical limitation?

Plan your tradeoffs



  • Describe the scenarios
    a tradeoff would block.


  • Prevent "Told you so" moments.



You don't have to build to enable it.

Don't go down a rabbit hole




Timebox it!

You are all caught up!

Lessons learned

A temporary manual setup is crucial to progressively refactor an application.

81kb

86kb

Customization is key

Wishlist: Performance options per bundle

      
        module.exports = {
          performance: {
            assetFilter: function(assetFilename) {
              return !legacy.includes(assetFilename);
            }
          }
        };
      
  

Performance budgets
are great, but...

It's rarely a single Pull Request

Predicting Regressions

Sptter

Spotter

TLDR

What should we do if we care about performance?

Don't stop at tools or techniques but how they fit into a process.

How do we get
our colleagues to care about performance?

Make tools intuitive and digestible.




Source

DX


QA

Product

Design

Marketing

DevelopmenterExperience

Performance culture
is more than code

It's not about fast or slow.


But the choice to wander out


with a clear path back.

Thanks for listening!

@lfredolo



https://perfmatters.alfre.do