Performance Budgeting – For A Seamless User Experience – Performance

View Github Repository Open presentation in a new window

sandraszenti

See all presentation from sandraszenti

Performance Budgeting – For A Seamless User Experience – Performance

0 0

redev15

Performance budgeting for a seamless User Experience

On Github sandraszenti / redev15

Performance Budgeting

For A Seamless User Experience

Sandra Szenti

Performance

Friend or Foe?

Technology should improve the quality of life

  • achieve our tasks quicker, more efficiently
  • allow access to any information
  • equal rights across locations (and nations)

Percieved performance

#perfmatters

Faster web experience

Easier steps

No blockers

The user

I don't have high speed internetI trust more in a smooth experienceI use my mobile for everything

Let's solve their problem together!

Performance should be a part of the conversation.

From beginning to end.

I want to promote performance in my company

PM || Tech lead

  • Perf should be a requirement
  • It's a long-term benefit
  • Realistic benefits on mid-term project
I want to capture and enhance performance in projects

Developer

  • Collaboration is key
  • Don't hesitate to customise
  • Test and automate
I want to understand more about performance

UX || Designer

  • User Experience is a package
  • Good performance is good design
  • Asset optimisation is a requirement

Assembling a performance budget

A performance budget is a tool for identifing a problem.

It's a constraint that can keep the team in line.

It can be used as a safety net integrated into production.

Understanding web performance

Loading performance

is affected by...

Design

  • number of assets
  • fonts
  • image sizes
  • resolutions
  • layout (mobile first?)

Development

  • HTML
  • CSS
  • Critical Rendering Path
  • number of assets
  • blocking assets

Rendering performance

is affected by...

Design

  • animations
  • interaction design
  • UI elements

Development

  • JS
  • CSS
  • DOM manipulation

Step one:

Understand the user

Analyse user behaviour

When pages get slower, conversion rates suffer. But some types of pages suffer more than others. - Tammy Everts

Conversion Impact Score - setup page priority

User flow and conversion

Technical constraints

Preferred technology

Geographical location

Network characteristics

Toolbox

Results

List of pages with priority

Technical environment

Step two:

Capture some data

Metrics

first byte page load time DOM content loaded speed index visually complete number of requests PSI score custom metrics

Loading performance

WebPageTest

Location and connection

Get filmstrip view

Compare sites

PageSpeed Insights

Colour coded result

Suggestions

Chrome extension

Yellow Lab Tools

Colours and metrics

JS Profiler

Rendering performance

Toolbox

Perf Rocks

75 tools

Results

Metrics of different pages

Ideas on how to improve

Step three:

Iterate over time

It's a learning curve

Focus on low hanging fruits Understand the impacts of changes Transfer knowledge Monitor and improve

Toolbox

Results

Process for managing performance

Performance culture

Recap

Embrace performance by changing your mindset.

Understand the user Measure what you can Iterate and improve
Create awesome experiences

Thanks

Sandra Szenti

@whatevertechno

Credits

Stats: Tammy Everts

Avatars: Mohamad Sabbagh

Performance Budgeting For A Seamless User Experience Sandra Szenti