Getting Started with Website Performance

Slides from my presentation at STLUX 2014

Transcript

1. Website Performance STLUX 2014
2. Lead Front-End Developer at Manifest Digital @duncanjimbo
3. What is Performance?
4. Don’t ask me
5. “the delay perceived by a website visitor between an action and a response”
6. Performance is part of the experience
7. Performance is your business
8. Effects of Poor Performance
9. Higher bounce rates Lower page views Lower engagement Lower conversion rates Poor performance leads to:
10. A poorly performing site costs you money
11. “a 1 second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions”
    ! Source: Aberdeen Group
12. Nearly 60% of web users expect a website to load on their mobile phone in 3 seconds or less. ! Source: Compuware/Equat!on Research
13. 71% of mobile users expected web pages to be as fast or faster than on a desktop - up from 58% in 2009. ! Source: Compuware/Equat!on Research
14. “What delighted users a few years ago is now an expected baseline, the absence of which will frustrate users.”
    ! Philip Tellis, Geek at LogNormal
15. Where Things Really Stand Today
16. “The median top 500 e-commerce homepage takes 9.3 seconds to load vs. 7.7 seconds a year ago.”
    ! Source: Web Performance Today
17. “The average webpage has gotten 31% fatter between 2013 and 2014.”
    ! Source: Web Performance Today
18. Improving your site’s performance
19. Project Planning
20. Make performance a goal in project documents.
21. Consider setting a performance budget
22. Removing important content to decrease page weight is NOT a performance strategy.
23. Design (UX and Creative)
24. Design choices impact page speed
26. Don’t bet on a user’s connection speed
28. Front-End Development
29. “80-90% of the end-user response time is spent on the front-end”
31. Make fewer resource requests
32. Every request is costly and slows down the loading of the page.
34. At the time, viewing this page once would cost $22 on Verizon’s cheapest plan. ! Based on Verizon data plan costs as of April 2013
35. Minify and concatenate CSS and Javascript files
36. Optimize images and utilize image sprites
37. Average bytes per page by content type Source: HTTP Archive
38. The Curious Case of Benjamin Button
39. Load CSS before Javascript
40. Consider the effect of 3rd-party plugins
41. Other front-end tips and tricks Lazy load non-critical content Conditionally load content for RWD Use subdomains to serve CSS and JS Use a CDN to deliver files/content
42. Back-End Development
43. Back-end tips and tricks Write efficient database queries Server-side caching Fine-tune servers
44. Closing Thoughts
45. Thank You! @duncanjimbo