When Design Best Practices Become Performance Worst Practices

5,126 views

Published on

A surprising number of top-ranked retail sites are making the same three mistakes. These mistakes – ranging from unoptimized feature content to poorly placed call-to-action locations to inappropriate pop-up usage – are profoundly hurting load times and, ultimately, the user experience.

Read the State of the Union: Ecommerce Page Speed & Web Performance Report http://www.radware.com/social/summer-sotu2014/ for more info on how websites are getting slower.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,126
On SlideShare
0
From Embeds
0
Number of Embeds
2,728
Actions
Shares
0
Downloads
38
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

When Design Best Practices Become Performance Worst Practices

  1. 1. When Design Best Practices Become Performance Worst Practices Tammy Everts Shop.org Online Merchandising Workshop July 21-23, 2014
  2. 2. Slide 2 Performance matters.
  3. 3. Slide 3
  4. 4. Slide 4 Radware SOTU for ecommerce performance Every quarter since 2010 Home pages for top 100 & top 500 retail sites Real-world performance over a DSL connection Measure page size & composition Measure load time & other metrics Analyze changes over time
  5. 5. Slide 5 Radware SOTU for Ecommerce Web Performance, June 2014
  6. 6. Slide 6
  7. 7. Slide 7 Performance measurement terms Response time Start render Above-the-fold time Load time Time to interact (TTI)
  8. 8. Slide 8 Time to interact (TTI) The moment that the primary content and call-to-action are rendered in the browser
  9. 9. Slide 9 Worst practice #1 Pages that are blank, then populate all at once…
  10. 10. Slide 10 …or pages that load nav elements first and primary content last
  11. 11. Slide 11 Optimal load time 8-second delay Jakob Nielsen: Website Response Times
  12. 12. Slide 12 Why does it happen? Poorly executed stylesheets e.g. carousels, sliders, RWD, custom fonts Blocking JavaScript e.g. third-party scripts Massive page resources e.g. high-resolution hero images
  13. 13. Slide 13 Stylesheets are both a boon and a curse for modern web pages.
  14. 14. Slide 14
  15. 15. Slide 15 Solution Move stylesheets to the document HEAD Avoid document embedded styles Avoid inline styles Avoid using complicated selectors And more… Chris Love: CSS Web Performance Optimizations
  16. 16. Slide 16
  17. 17. Slide 17 Third-party calls are the single greatest potential point of failure for web pages.
  18. 18. Slide 18 Third-party calls can make up >50% of page requests. Steve Souders on High Performance Web Components
  19. 19. Slide 19 Increase page weight Increase number of hosts and connections Introduce additional latency Can block page rendering Prevent pages from loading
  20. 20. Slide 20 832ms 918ms 1.788s New Relic: Are External Services Slowing You Down?
  21. 21. Slide 21
  22. 22. Slide 22 Original: 3.5s SPOF: 22.7s
  23. 23. Slide 23 Solution Defer scripts Use asynchronous scripts (when possible) Know your scripts and their performance penalties Monitor constantly Web Performance Today: Can Third-Party Scripts Take Down Your Entire Site?
  24. 24. Slide 24 Images represent the most fertile ground for optimizing performance.
  25. 25. Slide 25
  26. 26. Slide 26
  27. 27. Slide 27 HTTP Archive, June 2014
  28. 28. Slide 28
  29. 29. Slide 29
  30. 30. Slide 30 Solutions (beyond “save for web”) >70% acceleration gain Reformat Sprite/consolidate Compression Deferral/lazy load Adaptive images Progressive image rendering Auto-preloading
  31. 31. Slide 31 Worst practice #2 Pages in which the CTA is the last thing to render.
  32. 32. Slide 32 Two long-held conventions are innocently eroding the user experience...
  33. 33. Slide 33 Convention #1: CTA at the bottom of feature image
  34. 34. Slide 34 Convention #2: Default baseline images
  35. 35. Slide 35
  36. 36. Slide 36 Solution Move the CTA Use progressive JPEGs Implement other image optimization techniques
  37. 37. Slide 37 Worst practice #3 Pop-ups that block the rest of the page
  38. 38. Slide 38 Too early Block the rest of the page from rendering Disrupt the user experience
  39. 39. Slide 39 Solution Optimize pop-up script Ensure cross-browser functionality Delay for at least 10 seconds A/B test for effectiveness (e.g. conversions/bounce rate)
  40. 40. Slide 40 Practice #4 Designing and testing in an ivory tower
  41. 41. Slide 41 Performance must be the responsibility of everyone who touches a page. Design Usability test Build Plan and implement third-party scripts Launch Post-launch
  42. 42. Slide 42
  43. 43. Slide 43
  44. 44. Thank You www.radware.com Tammy Everts @tameverts webperformancetoday.com

×