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
   

   View Slide

2. CHRIS
   COYIER
   @chriscoyier
   

   View Slide

3. View Slide

4. Let’s do a bunch of
   simple stuff to make
   our websites faster
   

   View Slide

5. Let’s do a bunch of
   simple stuff to make
   our websites faster
   

   View Slide

6. PAUL
   IRISH
   Google
   

   View Slide

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
   

   View Slide

8. STEVE
   SOUDERS
   

   View Slide

9. 80
   20
   THE PERFORMANCE GOLDEN RULE
   

   View Slide

10. On average, 80% of the
    end-user response time is
    spent on the front end.
    THE PERFORMANCE GOLDEN RULE
    

    View Slide

11. “20%”
    

    View Slide

12. “80%”
    

    View Slide

13. 117 Requests
    7.81 MB
    4.59s Total*
    0.16s Back End
    4.43s Front End
    3% / 97%
    * on Madison broadband
    

    View Slide

14. 24%/76% Top 10
    8%/92% 10 ~10,000
    16%/84% Startups
    13%/87% Top 50,000
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

17. 1TURN ON HTTP
    COMPRESSION
    

    View Slide

18. “The Internet”
    file file
    SERVER BROWSER
    “The Internet”
    imperceptibly fast
    squishing
    file file
    imperceptibly fast
    un-squishing
    

    View Slide

19. gzipwtf.com
    

    View Slide

20. html5boilerplate.com
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. 2CACHE
    STUFF
    

    View Slide

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
    

    View Slide

26. html5boilerplate.com
    

    View Slide

27. View Slide

28. View Slide

29. Sweet.
    YO BROWSER,
    you can hold on to a bunch of these files.
    You might need them later.
    

    View Slide

30. The fastest HTTP
    request is the one
    not made.
    http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/
    

    View Slide

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/
    

    View Slide

32. 3LOSSLESSLY
    OPTIMIZE
    IMAGES
    

    View Slide

33. 1.7MB of
    IMAGES
    

    View Slide

34. View Slide

35. View Slide

36. OS X
    imageoptim.com
    Windows
    pnggauntlet.com
    

    View Slide

37. 4COMBINE
    CSS AND JS
    & Compress
    

    View Slide

38. 1
    23
    http://css-tricks.com/one-two-three/
    global.css
    section-or-page.css
    page.css
    

    View Slide

39. View Slide

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

    View Slide

41. View Slide

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

    View Slide

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

    View Slide

44. View Slide

45. GROUP
    PINKY SWEAR
    

    View Slide

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
    

    View Slide

47. THANKS
    @chriscoyier
    

    View Slide