culture-of-performance

View Github Repository Open presentation in a new window

iamcarrico

See all presentation from iamcarrico

culture-of-performance

0 0

culture-of-performance

Practically creating a culture of performance within your organization

On Github iamcarrico / culture-of-performance

#perfCulture

Creating a Culture of Performance

Performance is important. Very important. Other similar presentations that have some great resources: * https://www.youtube.com/watch?v=0bRLtJHo0pI

Ian Carrico

Web Performance Artist, Vox Media

Chris Ruppel

Frontend Engineer, Four Kitchens

What is this?

  • How to consider performance at every step
  • Performance budgets
  • Sharing information with teams
  • Implementing Continuous Integration tools

For a small site, and even some slightly larger sites, none of this is mind-blowingly difficult, it's just a matter of setting it up and committing to it.

@tsmith512

What is a performance culture?

Getting everybody on board to make performant choices on the web

Everybody

Yes, EVERYBODY

  • Designers
  • Developers
  • Project Managers
  • Product Owners
  • CXO

On Board

Buy-in at all levels

To get the culture started, buy-in must be achieved at every level of the organization.

CXO

  • How will this effect our bottom line?
  • What about advertising revenue?
There are huge reasons why at a higher-level caring about performance is key. Many studies have been done by both industry leaders and psychologists over the effect of performance and the user's ability to focus. Google, Amazon and Bing have all found they have more revenue when a site performs faster. Even more important, users have been found to go to competitor's site if a site is too slow. All of this turns into lost revenue very quickly for a site.

Product Owner

  • We don't have time to work on performance
  • We want the site to be responsive, and that cannot be performant
  • A great user experience is more important
There are many myths about the time it takes to make a site truly performant. If started from the beginning, with appropriate budgets set, creating a performant site does not have to take substantially more time. And that time pays off very quickly. There are many studies into the page weight that is added from doing RWD. And while it is not zero, it is hardly enough to prevent a performant site. In fact, many techniques (e.g. image lazy-loading) will prevent extra resources from being downloaded. * http://daverupert.com/2014/07/rwd-bloat/

Project Manager

  • How can we add this to a story?
  • How do we get the client to care?
Planning for performance should not be a single story, or cleanup— but something that we consider at every step. Much like design, or cost, performance needs to be checked and looked at constantly.

Designer

  • You can't have good design and be performant
  • Don't take away my web fonts
  • The PSD was already approved
More myths that seem to pop up constantly. Mainly that designers will be unable to have good design by the constraints of performance. In reality, performance is one of constraints of building on the web. On the flip side, it is very easy to say "no ads" or "no webfonts", or even just grumble about these things often. Even these minor gripes can start to create a schism between performance and the rest of the teams— all of these hard decisions needs to be negotiations between teams within the constraints of a performance budget. https://medium.com/@gpeuc/design-is-not-art-d229af10c167 https://twitter.com/meganerinmiller/status/530805380709097472

Developer

  • I don't have time to do it
  • I can't test performance easily
There are many reasons why a developer might not want to get on board with performance. It adds in extra workflow tasks, and is more to consider when building features. At the end of the day, it is a necessary step, and one that can be made much simpler by adding in build tools.

Performant Choices

Once we have buy-in, the right information needs to be shared with every level of the organization.

Performance Budgets

  • Team-wide agreement on what the goals are
  • Includes performance in all discussions
  • Automated tools prevent anybody from being the "bad guy"
Performance budgets set the allowed performance allocation for a project. Similar to a household budget, it gives the

Be honest

  • Share the information honestly and openly
  • Celebrate success
  • Acknowledge failures
More than anything, being honest about where we stand and our goals is paramount. This means not just celebrating the successes that the team makes, but also acknowledging failures. http://product.voxmedia.com/2015/5/6/8561867/declaring-performance-bankruptcy https://twitter.com/lara_hogan/status/578295642302316546

Constant Reminders

  • Dashboards that show goals and status
  • Visuals
http://www.webpagetest.org/video/compare.php?tests=150512_9B_12R7,150510_7W_4G,150510_ZT_4P http://www.webpagetest.org/video/view.php?id=150512_a1702c187f12d2582548c5e9be8d0b6dd308ab67

Continuous Integration

  • Build tools (e.g. Gulp)
  • Frontend tests
  • CI Server Testing (Travis CI)
Having easy-to-use build tools that any developer can use is incredibly important. Using a tool such as gulp or grunt, base frontend tests can be created that developers can use to test their code. These same build tools can be integrated into CI servers, Jenkins, Circle CI, Travis or a host of other options to test PRs and master. Some example code on getting frontend tests built in Gulp. https://github.com/fourkitchens/frontend-perf/blob/master/gulpfile.js

Getting everybody on board to make performant choices on the web

Thank you

Questions?

Feedback

http://iamc.co/lafeedback

Slides

http://iamc.co/perf-culture