Think Fast: Getting started with website performance

This is my presentation at Little Rock Tech Fest held in beautiful Little Rock, AR.

Transcript

1. Think Fast Getting started with website performance in the age of RWD
2. Think Fast Getting started with website performance in the age of RWD
3. Front-End Developer @duncanjimbo
6. WHAT IS PERFORMANCE?
7. “The delay perceived by a website visitor between an action and a response”
8. PERFORMANCE IS PART OF THE EXPERIENCE
9. PERFORMANCE IS NOT JUST THE RESPONSIBILITY OF DEVELOPERS
10. PERFORMANCE IS YOUR BUSINESS
11. EFFECTS OF POOR PERFORMANCE
12. HIGH BOUNCE RATES
13. LOWER PAGE VIEWS
14. LOWER ENGAGEMENT
15. LOWER CONVERSION RATES
16. A SLOW SITE COSTS YOU MONEY
17. BY THE NUMBERS
18. Aberdeen Group “a 1 second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions”
19. Compuware/Equat!on Research “Nearly 60% of web users expect a website to load on their mobile phone in 3 seconds or less.”
20. Compuware/Equat!on Research “71% of mobile users expected web pages to be as fast or faster than on a desktop - up from 58% in 2009.”
21. Philip Tellis, Geek at LogNormal “What delighted users a few years ago is now an expected baseline, the absence of which will frustrate users.”
22. WHERE THINGS ACTUALLY STAND
23. Web Performance Today “The median top 500 e-commerce homepage takes 9.3 seconds to load vs. 7.7 seconds a year ago.”
24. Web Performance Today “The average webpage has gotten 31% fatter between 2013 and 2014.”
25. IMPROVING PERFORMANCE
26. MAKE PERFORMANCE A GOAL IN PROJECT DOCUMENTS
27. SET A PERFORMANCE BUDGET
28. “Removing important content to decrease page weight is not a performance strategy”
29. DESIGN CHOICES IMPACT PAGE SPEED
31. DON’T BET ON A USER’S CONNECTION SPEED
33. PIZZA!
35. MAKE FEWER RESOURCE REQUESTS
37. At the time, viewing this page once would have cost $22 on Verizon’s cheapest plan Based on Verizon data plan costs as of April 2013
38. MINIFY & CONCATENATE FILES
39. OPTIMIZE IMAGES
40. Average bytes per page by content
41. LOAD CSS BEFORE JAVASCRIPT
42. CONSIDER YOUR APPROACH WITH THIRD-PARTY SCRIPTS
43. LAZY LOAD IMAGES
44. CONDITIONALLY LOAD CONTENT USING MEDIA QUERIES
45. BE EFFICIENT WITH DATABASE QUERIES
46. USE CACHING EFFECTIVELY
47. FINE-TUNE YOUR SERVERS
48. CULTURE OF PERFORMANCE
49. PERFORMANCE IS A JOURNEY, NOT A GOAL
50. THANK YOU @duncanjimbo http://simplydano.com/lrtf