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.

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