Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
How slow load times hurt UX
(and what you can do about it)
@tameverts
performancebeacon.com
WPOstats.com
What do users want?
What metrics does performance affect?
What are the most common
performance issues?
What can you do to ...
What do users want?
“47% of consumers expect a web
page to load in 2 seconds or less.”
Akamai, 2009
“But my site
is different.”
Performance affects everything…
for everyone
Every 1 second of load time
improvement equals a 2% conversion
rate increase for Walmart.com
Staples.com shaves 1 second f...
http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
At Google, a 500-millisecond
slowdown equals a 25% decrease in
searches
GQ cuts load time by 80%, grows
traffic by 83%
Edm...
Lara Hogan, Senior Engineering Manager
“We ran this experiment on mobile web
where we added 160 kilobytes of hidden images...
fast
slow
What are the most common
performance/UX issues?
Why?????
Poorly executed stylesheets
e.g. carousels, sliders, RWD, custom fonts
Blocking/unoptimized JS
e.g. third-party s...
19 things you can do*
*There are waaaaay more than 19 things you can do
Front-end
Back-end
“80-90% of end-user response time is
at the front end. Start there.”
Steve Souders, ‘High Performance W...
http://www.soasta.com/blog/more-bandwidth-isnt-a-magic-bullet-for-web-performance/
Know where your page weight
is coming from
Create a performance budget
for your pages
Measure, measure, measure
Solutions
How to set a performance budget
http://timkadlec.com/2013/01/setting-a-
performance-budget/
Performance budget metrics
htt...
Reformat
Compress
Defer/lazy load
Adaptive images
Auto-preloading
Solutions
http://www.oreilly.com/pub/e/3425
Let’s talk complexity
http://www.webpagetest.org/
Consolidate resources
Make sure stylesheets are in the document
HEAD
Optimize web fonts (See Ilya Grigorik’s post:
http://...
http://www.slideshare.net/nzakas/enough-withthejavascriptalready
https://vimeo.com/79098392
http://blog.codinghorror.com/the-principle-of-least-power/
Third-party content
can make up >50%
of page requests
What if my third parties fail?
Original: 3.5s
SPOF: 22.7s
Defer scripts
Use asynchronous versions
(when possible)
Know your scripts and their
performance penalties
Monitor constant...
Keep on learnin’!
http://soasta.io/timei
smoneybook
Thanks!
@tameverts
performancebeacon.com
WPOstats.com
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
Próxima SlideShare
Cargando en…5
×

How slow load times hurt UX (and what you can do about it) [FluentConf 2016]

14.554 visualizaciones

Publicado el

There are compelling arguments why companies need to care about serving faster pages to their users. Countless studies have found an irrefutable connection between load times and key performance indicators, ranging from page views to revenue.

In this talk, I outlined research-based reasons why you need to care about web performance and what you can do to make your pages faster. Your takeaways (I hope) will be an understanding of why improving load times is critical to delivering better online experiences and how to identify and fix common performance leeches on your pages.

Topics include:

- User expectations
- The impact of load time on business metrics (revenue, conversions, bounce rate, and user satisfaction/retention)
- The insidiousness of “page bloat”
- 19 things you can do to deliver a faster user experience

Publicado en: Tecnología
  • Sé el primero en comentar

How slow load times hurt UX (and what you can do about it) [FluentConf 2016]

  1. 1. How slow load times hurt UX (and what you can do about it)
  2. 2. @tameverts performancebeacon.com WPOstats.com
  3. 3. What do users want? What metrics does performance affect? What are the most common performance issues? What can you do to fix them?
  4. 4. What do users want?
  5. 5. “47% of consumers expect a web page to load in 2 seconds or less.” Akamai, 2009
  6. 6. “But my site is different.”
  7. 7. Performance affects everything… for everyone
  8. 8. Every 1 second of load time improvement equals a 2% conversion rate increase for Walmart.com Staples.com shaves 1 second from median load time, improves conversion rate by 10% Intuit cuts load times by more than half, increases conversions by 14%
  9. 9. http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
  10. 10. At Google, a 500-millisecond slowdown equals a 25% decrease in searches GQ cuts load time by 80%, grows traffic by 83% Edmunds.com shaves 7 seconds off load time, sees 17% increase in page views and 3% increase in ad revenue
  11. 11. Lara Hogan, Senior Engineering Manager “We ran this experiment on mobile web where we added 160 kilobytes of hidden images, meaning the user saw nothing different. We just dumped a bunch of hidden images onto the page and increased page weight by 160 kilobytes. It triggered a 12% increase in bounce rate. Insane. Twelve percent is a lot of percent.”
  12. 12. fast slow
  13. 13. What are the most common performance/UX issues?
  14. 14. Why????? Poorly executed stylesheets e.g. carousels, sliders, RWD, custom fonts Blocking/unoptimized JS e.g. third-party scripts, pop-ups Massive resources e.g. high-res hero images Designing, developing, and testing in an ivory tower Little/no real user monitoring of live sites
  15. 15. 19 things you can do* *There are waaaaay more than 19 things you can do
  16. 16. Front-end Back-end “80-90% of end-user response time is at the front end. Start there.” Steve Souders, ‘High Performance Web Sites’
  17. 17. http://www.soasta.com/blog/more-bandwidth-isnt-a-magic-bullet-for-web-performance/
  18. 18. Know where your page weight is coming from Create a performance budget for your pages Measure, measure, measure Solutions
  19. 19. How to set a performance budget http://timkadlec.com/2013/01/setting-a- performance-budget/ Performance budget metrics http://timkadlec.com/2014/11/performance-budget- metrics/
  20. 20. Reformat Compress Defer/lazy load Adaptive images Auto-preloading Solutions
  21. 21. http://www.oreilly.com/pub/e/3425
  22. 22. Let’s talk complexity
  23. 23. http://www.webpagetest.org/
  24. 24. Consolidate resources Make sure stylesheets are in the document HEAD Optimize web fonts (See Ilya Grigorik’s post: http://soasta.io/1R8ySpw) Optimize pop-up scripts Monitor performance ALL THE TIME Solutions
  25. 25. http://www.slideshare.net/nzakas/enough-withthejavascriptalready https://vimeo.com/79098392
  26. 26. http://blog.codinghorror.com/the-principle-of-least-power/
  27. 27. Third-party content can make up >50% of page requests
  28. 28. What if my third parties fail? Original: 3.5s SPOF: 22.7s
  29. 29. Defer scripts Use asynchronous versions (when possible) Know your scripts and their performance penalties Monitor constantly Solutions
  30. 30. Keep on learnin’!
  31. 31. http://soasta.io/timei smoneybook
  32. 32. Thanks! @tameverts performancebeacon.com WPOstats.com

×