Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design and develop performance

Design and develop performance

Nasia Makrygianni

November 12, 2013
Tweet

More Decks by Nasia Makrygianni

Other Decks in Programming

Transcript

  1. 57% OF ONLINE CONSUMERS will abandon a site after waiting

    3 seconds for a page to load 74% OF MOBILE WEB USERS will leave a site if it takes longer than 5 seconds to load 1/3 of them will go to a competitor site
  2. Performance should be treated as a project requirement “ Good

    performance is good design ” - Brad Frost
  3. Airports will make you walk longer to baggage claim to

    make the wait times feel shorter - Tim Kadlec
  4. 1. OPTIMIZE an existing feature or asset on the page

    2. REMOVE an existing feature or asset on the page 3. DON’T ADD the new feature or asset - Steve Souders Stay within the budget
  5. Waterfalls Charts showing the series of actions that occur between

    user-server when the user visits a site and interacts with it.
  6. See them in action : • Browser Developer tools •

    Webpagetest.org View them on : http://www.softwareishard.com/har/viewer/ Save - Export them as HAR (HTTP Archive) files by : • right click on network output and "Save as HAR with Content“ • Install add-on, Net-export Waterfalls
  7. Images • Organize them in sprites • Replace as many

    as possible with CSS • Use Data-uri • Compress them with tools as PNGGauntlet • Prefetch if sure you need them • Lazy-load them • Define their width & height (not responsive)
  8. Javascript • Minify • Bundle (combine in one) • Load

    as much as possible at the bottom • Load asynchronously • Take care of selectors • Minimize repaints and reflows
  9. css • Bundle • Write reusable styles • Use selectors

    with high specificity (not IDs) • Avoid expensive css properties • Put them in <head> • Don’t load them from subdomains
  10. kaufda.de BEFORE 125 requests 1.2MB DOM completed: 6.05s Fully Loaded:

    10.92s Wait: 15.96s Receive: 4.81s 84 Images: 948KB AFTER 105 requests 1MB DOM completed: 2.26s Fully Loaded: 5.25s Wait: 6.95s Receive: 3s 58 Images: 477KB