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

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

8081b26e05bb4354f7d65ffc34cbbd67?s=128

Chris Coyier

December 12, 2012
Tweet

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