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

3. None

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

21. None
22. None
23. None

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

27. None
28. None

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

34. None
35. None

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

39. None

40. Why did you use jQuery? rabble rabble rabble.

41. None

42. • 31K minified and gzipped • On the world’s fastest

    CDN • Probably cached

43. Why did you use jQuery? rabble rabble rabble.

44. None

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