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

Improving UX Through
 Front End Performance

Improving UX Through
 Front End Performance

Optimize your site's page load time by cleaning HTML, CSS, and images. Design for performance, and help your client or organization understand the need for optimized page speed.

245cee81a9c424266e5e401d844ea881?s=128

Lara Hogan

July 26, 2012
Tweet

Transcript

  1. Improving UX Through Front End Performance dyn.com/webperf for slides, links

    and extra stuff or follow @laraswanson Lara Swanson, User Experience Manager at
  2. @laraswanson flickr.com/photos/walkingsf/5112926909/

  3. @laraswanson #webperf is kind of a big deal.

  4. @laraswanson Adding 500ms decreased Google traffic and ad revenues by

    20%. source: websiteoptimization.com
  5. @laraswanson Every additional 100ms decreased Amazon sales by 1%. source:

    websiteoptimization.com
  6. @laraswanson Google Maps reduced their home page size. 10% more

    traffic the first week 25% in the following 3 weeks source: websiteoptimization.com
  7. @laraswanson Users expect 2 seconds. source: gomez.com

  8. @laraswanson After 3 seconds 40% will abandon your site. source:

    gomez.com
  9. @laraswanson DoubleClick: one client-side redirect 12% increase in click-through rate

    source: doubleclickadvertisers.blogspot.com
  10. @laraswanson 75% of shoppers who experience an issue will not

    buy from that site. source: akamai.com
  11. @laraswanson >56% of shoppers left for a competitor’s site rather

    than suffer delays. source: gomez.com
  12. @laraswanson source: OnDevice Research 70% 59% 57% 55% 54% 50%

    44% 32% 30% 25% 22% 19% Egypt India South Africa Ghana Kenya Nigeria Indonesia Thailand China US UK Russia Mobile-­‐only  Internet  Users
  13. @laraswanson A cellular device has to establish a radio channel

    before it can send/get data. more at Taming the Mobile Beast
  14. @laraswanson Mobile is only a little bit faster than old

    dialup connections. more at Taming the Mobile Beast Desktop Wifi Mobile Network 50ms 344ms Desktop Wifi Mobile Network 5mbps 1.6mbps Round Trip Time Downlink Throughput
  15. @laraswanson We have not designed for mobile.

  16. @laraswanson

  17. @laraswanson A good user experience is intuitive and fast.

  18. @laraswanson Fast page load time builds trust in your website.

  19. @laraswanson We need commitment to performance. Designers, Developers and Clients.

  20. @laraswanson Website performance starts with design. lots more at nathanleighdavis.com

  21. @laraswanson performance + beauty = overall user experience

  22. @laraswanson impact on page speed vs. impact on conversion rate

  23. @laraswanson Question design decisions with performance in mind.

  24. @laraswanson Test it.

  25. @laraswanson Test it. A/B Manual

  26. @laraswanson A/B Manual Test it.

  27. Benchmarking

  28. @laraswanson PageSpeed (online and browser add-on)

  29. @laraswanson YSlow

  30. @laraswanson WebPageTest.org

  31. @laraswanson tools.pingdom.com

  32. @laraswanson tools.pingdom.com

  33. @laraswanson Clean Your HTML and CSS

  34. @laraswanson Bloated HTML leads to bloated CSS, and vice versa.

    HTML CSS stylesheet images File size before cleanup File size after cleanup
  35. @laraswanson

  36. @laraswanson

  37. @laraswanson HTML: Rename unsemantic elements <div class="clearfix"> <p class="blue"> HTML

    .clearfix p.blue { } CSS
  38. @laraswanson HTML: Rename unsemantic elements <div class="clearfix"> <p class="blue"> HTML

    .clearfix p.blue { } CSS
  39. @laraswanson HTML: Rename unsemantic elements <div class="clearfix"> <p class="blue"> HTML

    .clearfix p.blue { } CSS <div id="login"> <h2>
  40. @laraswanson HTML: Rename unsemantic elements <div class="clearfix"> <p class="blue"> HTML

    .clearfix p.blue { } CSS <div id="login"> <h2> ⇢CSS: Remove inefficient selectors
  41. @laraswanson HTML: Rename unsemantic elements <div class="clearfix"> <p class="blue"> HTML

    .clearfix p.blue { } CSS <div id="login"> <h2> ⇢CSS: Remove inefficient selectors #login h2 { }
  42. @laraswanson HTML: Remove unnecessary elements (divitis) <div class="content"> <div class="sidebar">

    <div class="login"> HTML .content { margin: 0 auto; } .sidebar { float: right; } .login { width: 200px; } CSS
  43. @laraswanson HTML: Remove unnecessary elements (divitis) <div class="content"> <div class="sidebar">

    <div class="login"> HTML .content { margin: 0 auto; } .sidebar { float: right; } .login { width: 200px; } CSS
  44. @laraswanson HTML: Remove unnecessary elements (divitis) <div class="content"> <div class="sidebar">

    <div class="login"> HTML .content { margin: 0 auto; } .sidebar { float: right; } .login { width: 200px; } CSS <div class="content"> <div class="login">
  45. @laraswanson HTML: Remove unnecessary elements (divitis) <div class="content"> <div class="sidebar">

    <div class="login"> HTML .content { margin: 0 auto; } .sidebar { float: right; } .login { width: 200px; } CSS <div class="content"> <div class="login"> ⇢CSS: Remove unused styles
  46. @laraswanson HTML: Remove unnecessary elements (divitis) <div class="content"> <div class="sidebar">

    <div class="login"> HTML .content { margin: 0 auto; } .sidebar { float: right; } .login { width: 200px; } CSS <div class="content"> <div class="login"> ⇢CSS: Remove unused styles .content { margin: 0 auto; } .login { float: right; width: 200px; }
  47. @laraswanson HTML: Create repurposable code <div class="post"> <p class="headline"> <p

    class="byline"> ... <div class="article"> <h2> <p class="subtitle"> .post { } .article { } .headline { } .article h2 { } .byline { } .subtitle { } HTML CSS
  48. @laraswanson HTML: Create repurposable code ⇢CSS: Combine/condense styles .post {

    } .article { } .headline { } .article h2 { } .byline { } .subtitle { } HTML CSS <div class="post"> <p class="headline"> <p class="byline"> ... <div class="article"> <h2> <p class="subtitle">
  49. @laraswanson HTML: Create repurposable code ⇢CSS: Combine/condense styles HTML CSS

    <div class="post"> <p class="headline"> <p class="byline"> ... <div class="article"> <h2> <p class="subtitle"> .post { } .article { } .headline { } .article h2 { } .byline { } .subtitle { } .post, .article { } .headline, .article h2 { } .byline, .subtitle { }
  50. @laraswanson HTML: Create repurposable code ⇢CSS: Combine/condense styles HTML CSS

    <div class="post"> <p class="headline"> <p class="byline"> ... <div class="article"> <h2> <p class="subtitle"> .post { } .article { } .headline { } .article h2 { } .byline { } .subtitle { } .post, .article { } .headline, .article h2 { } .byline, .subtitle { }
  51. @laraswanson HTML: Create repurposable code ⇢CSS: Combine/condense styles HTML CSS

    <div class="post"> <p class="headline"> <p class="byline"> ... <div class="article"> <h2> <p class="subtitle"> <div class="article"> <h2> <p class="byline"> .post, .article { } .headline, .article h2 { } .byline, .subtitle { } .post { } .article { } .headline { } .article h2 { } .byline { } .subtitle { }
  52. @laraswanson HTML: Create repurposable code ⇢CSS: Combine/condense styles .post, .article

    { } .headline, .article h2 { } .byline, .subtitle { } HTML CSS <div class="post"> <p class="headline"> <p class="byline"> ... <div class="article"> <h2> <p class="subtitle"> <div class="article"> <h2> <p class="byline"> .post { } .article { } .headline { } .article h2 { } .byline { } .subtitle { }
  53. @laraswanson HTML: Create repurposable code ⇢CSS: Combine/condense styles HTML CSS

    <div class="post"> <p class="headline"> <p class="byline"> ... <div class="article"> <h2> <p class="subtitle"> <div class="article"> <h2> <p class="byline"> .post { } .article { } .headline { } .article h2 { } .byline { } .subtitle { } .article { } .article h2 { } .byline { }
  54. @laraswanson Optimize Your Images

  55. @laraswanson Create one sprite for repeating backgrounds.

  56. @laraswanson Create one sprite for no-repeat backgrounds.

  57. @laraswanson even more info: css-tricks.com/css-sprites/

  58. @laraswanson Regenerate images using the right format (PNG-8, PNG-24, or

    JPG) and optimize them.
  59. @laraswanson Spriting increased total home page size by 60K Decreased

    requests by 21% Cut home page load time by 35%
  60. @laraswanson Use CSS3 gradients instead of a repeating background image.

    Case Study • Added 2.7% CSS file size • Saved 22% requests • Saved 2.8% page load time h1p://www.colorzilla.com/gradient-­‐editor/
  61. @laraswanson Original New Improvement CSS 11.8K (gzipped) 7.2K (gzipped) 39%

    Images 121.5K 63.85K 47.4% Requests 22 9 59% Page Speed grade 95% 99% 4.2% Time to fully load 3.550s 1.569s 55.8% (full details at dyn.com)
  62. @laraswanson Optimize Your Requests

  63. @laraswanson The number of parallel connections varies greatly across mobile

    browsers. from Taming the Mobile Beast
  64. @laraswanson Only serve content when it’s needed.

  65. @laraswanson Minify Javascript and CSS.

  66. @laraswanson Load JavaScript asynchronously.

  67. @laraswanson Limit third-party scripts. Load them asynchronously.

  68. @laraswanson

  69. @laraswanson

  70. @laraswanson Learn best practices: writegoodcode.com

  71. @laraswanson We created a baseline test page. We performance tested

    poorly- crafted HTML, CSS, and images against it.
  72. @laraswanson Using @import added +7.6% load time Using inefficient CSS

    selectors: +5.5% Adding 10kb of extra HTML: +4.8% (See them all: writegoodcode.com)
  73. @laraswanson Convince Clients

  74. @laraswanson There will be extra development time ($$$) now. Why?

  75. @laraswanson A better user experience leads to better conversion rates

  76. @laraswanson A better user experience leads to brand trust

  77. @laraswanson A better user experience leads to visitors choosing you

    over a competitor
  78. @laraswanson A better user experience leads to more returning visitors

  79. @laraswanson As an industry, we need to focus on the

    end user.
  80. dyn.com/webperf for more info and tools @laraswanson Scalable Stylesheets -

    3pm today in Room 308 Beginner's Guide to Performance - 9am tomorrow in Room 310 The Fight Against Divitis - 9am tomorrow in Room 307