Let's Do A Bunch of Simple Stuff to Make Websites Faster

Transcript

1. Let’s do a bunch of simple stuff to make our websites faster
2. CHRIS COYIER @chriscoyier
4. Let’s do a bunch of simple stuff to make our websites faster
5. Let’s do a bunch of simple stuff to make our websites faster
6. PAUL IRISH Google
7. 1 2 3 4 “Have a good to awesome affect on performance.” “A single person can do without coordinating with anyone else.” “Don’t require complex or mature processes.” “Require minimal or no ongoing maintenance efforts.” LOW EFFORT BIG IMPACT
8. STEVE SOUDERS
9. 80 20 THE PERFORMANCE GOLDEN RULE
10. On average, 80% of the end-user response time is spent on the front end. THE PERFORMANCE GOLDEN RULE
11. “20%”
12. “80%”
13. 117 Requests 7.81 MB 4.59s Total* 0.16s Back End 4.43s Front End 3% / 97% * on Madison broadband
14. 24%/76% Top 10 8%/92% 10 ~10,000 16%/84% Startups 13%/87% Top 50,000
15. 1 2 3 4 “Have a good to awesome affect on performance.” “A single person can do without coordinating with anyone else.” “Don’t require complex or mature processes.” “Require minimal or no ongoing maintenance efforts.” 5 Focus more on the front end.
16. THE PLAN 1 2 3 4 Turn on HTTP Compression! i.e. (GZip) Cache stuff! server and client side Losslessly optimize images! and sprite if you can Combine CSS and JS! three, two, or one per page
17. 1TURN ON HTTP COMPRESSION
18. “The Internet” file file SERVER BROWSER “The Internet” imperceptibly fast squishing file file imperceptibly fast un-squishing
19. gzipwtf.com
20. html5boilerplate.com
24. 2CACHE STUFF
25. BROWSER CACHE SERVER CACHE Hey, you’re going to need these files. I already got a couple of those right here. dynamic bit dynamic bit dynamic bit dynamic bit dynamic bit static bit
26. html5boilerplate.com
29. Sweet. YO BROWSER, you can hold on to a bunch of these files. You might need them later.
30. The fastest HTTP request is the one not made. http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/
31. It’s up to you to break cache. style.v1.css style.v2.css style.v3.css style.v4.css ... http://derek.io/blog/2009/auto-versioning-javascript-and-css-files/
32. 3LOSSLESSLY OPTIMIZE IMAGES
33. 1.7MB of IMAGES
36. OS X imageoptim.com Windows pnggauntlet.com
37. 4COMBINE CSS AND JS & Compress
38. 1 23 http://css-tricks.com/one-two-three/ global.css section-or-page.css page.css
40. Why did you use jQuery? rabble rabble rabble.
42. • 31K minified and gzipped • On the world’s fastest CDN • Probably cached
43. Why did you use jQuery? rabble rabble rabble.
45. GROUP PINKY SWEAR
46. I PROMISE TO... 1 2 3 4 Turn on HTTP Compression! i.e. (GZip) Cache stuff! server and client side Losslessly optimize images! and sprite if you can Combine CSS and JS! three, two, or one per page
47. THANKS @chriscoyier