Need for Speed: Optimizing the User Experience


Web speed in seconds:
if less than:
> 0.1 – instant (zappos, etsy)
> 1s – flow
> 2s – expected
> 3s – impatient
> 4s – start leaving – 1/3rd leave
> 7s – Intolerable – danger zone

Reasons for Performance:

  • Performance and KPI’s (Key Performance Indicators)
    • Transform dollars and cents – an increase of 100ms increase $$,
    • The opposite 1% decrease – decreases sales
  • Slow hurts mobile
    • Mobile by nature is even slower
    • Plus needs extra time to connect – 1-2sec
    • adding 300ms extra to the time

71% of the people know mobile is slower
31% use mobile only*

  • Fast opens markets
  • Google hates slow sites – SEO – google penalizes
  • ***Slow sites are filthy (most countries are still coal powered)
    • Internet leaves 830 million tons of carbon footprint

How to fix it

1. Research:

  • Use browser developer tools to see how much time it takes a page to appear
  • Time to interact – Important!
  • Time Loaded – webpagetest –
    • Can test other cities
    • browser configurations
    • Type of connections
    • EnterpriseGrade: Gives you more analytics than google
  • Use firefox tool to view a site in 3D and analyze for complexity of sites
  • Average load times
  • Specific load times for different people/markets
  • In king for what’s slow??? – review this note


Bring performance out to the public

  • Post performance in a pinned area
  • Sell the benefits
  • The first hit is free

Make performance cultural

Set a Goal – “Your website should load in X seconds”


Developers know @scottjehl
Outsource it
Changing hosts increases load time
Software testing tools


  • Page budgets
  • Set a time for audience
  • More mobile?
  • Guesstimate target
  • Content strategy
    • 1 video = 20 big images
    • 50kw =  35svg animations
    • Full Width Photo =  500 words … etc
    • ***** see graphic on optimization

5. WIREFRAMES = design while measuring

1.2mb images
100kb js
400kb social plugins
200kb webfonts
50kb html and css
TOTAL 300kb = Total required = 20


  • Carousel – people won’t click beyond the second image
  • share buttons are usual 400 kb in images and scripts – only use on pages where people would really want to share stuff or get rid of it – embed as links
  • Maps – ?
  • Autoplay video – no
  • Placeholder content


Optimize properly Safe for web – better than photoshop

Radical changes will be made if you follow these:

  • Use monochrome images – smaller if less color
  • Select to blur all except a specific area to reduce size of photo
  • Leave big hero photos in illustrator – smaller
  • if you need crispier photos, replace with vector images instead – presentation on svg

Recommended Books:

Recent books that do a great job on this topic:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s