Your SlideShare is downloading. ×
Kansas City WordCamp - Website Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Kansas City WordCamp - Website Performance

705

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
705
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.
  • 2. What the hell is this?
    what is performance and who cares?
    what’s dragging you down?
    is WordPress slow?
    what can I do on the front end?
    what are some plugins I can install that will make my life easier without having to really pay attention to you?
  • 3. Questions?
  • 4. Performance = Perceived Speed
    V
  • 5. The Two Sides of the Website Coin
    back end
    front end
    (client side)
    (server side)
  • 6. The Weight of the Front End
    80%
    20%
  • 7. Who Cares?
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. The Landscape by 2015
    Quadruple Traffic Globally
    Devices:
    Desktop: 25%
    Laptop: 83%
    Smartphone: 194%
    EB Reader: 550%
    Tablet: 750%
  • 13. What’s Dragging You Down?
  • 14. network reliability
    file sizes
    HTTP requests
    server configuration
    WordPress itself
    Balls, Chains, Anchors, Speed Bumps
  • 15. Network Factors
    space between mobile towers
    visitor’s data plan
    quality of connection
    random acts of God
    a billion other things
  • 16. File Size
  • 17. HTTP Requests
  • 18. Server Configuration
  • 19. Balls, Chains, Anchors, Speed Bumps
    network reliability
    file sizes
    HTTP requests
    server configuration
    WordPress itself
  • 20. Is wordpress slow?
  • 21. It’s Only as Fast as your theme.
  • 22. 0 JS files(0k)
    1 CSS files(23k)
    2 images(53k)
    0 iframes(0k)
    80k+ download
    ~5 requests
  • 23. 11 JS files(191k)
    3 CSS files(43k)
    6 images(179k)
    2 iframes(16k)
    500k+ download
    20+ requests
  • 24. 23 JS files(1243k)
    6 CSS files(92k)
    70 images(549k)
    3 iframes(123k)
    2000k+ download
    100+ requests
  • 25. What can I do on the front end?
  • 26. HTML
    HTML5 is your friend
    more semantic tag use, less div soup; default WP does NOT do this
    avoid the hidden calories of iframes
    strip white space
  • 27. CSS
    kill unnecessary rules
    shorthand
    combine
    minify
  • 28. JavaScript
    if you load a library, load it from Google APIs(75% less load impact)
    native JS is faster(select element by ID through jQuery = 86% slower than native)
    combine
    minify
    load at the bottom
  • 29. Images
    CSS3 is your friend
    image sprites
    CRUSH THEM
  • 30. How CSS is More Efficient
    Traditional:
    2 images
    Extra markup
    ~ 5-6k, extra requests
    div {
    height: 300px;
    width: 300px;
    border: 2px solid #0c9da9;
    box-shadow: 0 5px 10px rgba(0,0,0,.4),
    inset 0 0 0 2px rgba(255,255,255,.7);
    border-radius: 10px;
    background: #daf0ff;
    background: -moz-linear-gradient(top, #daf0ff 0%, #99cfff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#daf0ff), color-stop(100%,#99cfff));
    background: -webkit-linear-gradient(top, #daf0ff 0%,#99cfff 100%);
    background: -o-linear-gradient(top, #daf0ff 0%,#99cfff 100%);
    background: -ms-linear-gradient(top, #daf0ff 0%,#99cfff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daf0ff', endColorstr='#99cfff',GradientType=0 );
    background: linear-gradient(top, #daf0ff 0%,#99cfff 100%);
    }
    CSS:
    No images
    No extra markup
    740 bytes, no requests
  • 31. Image Sprites
    Individually:
    20 images = 17k
    20 requests
    Sprite:
    1 image = 4.2k
    1 request
  • 32. Bonus Round
    content delivery network (CDN)
    use your own subdomain (crap.acme.com)
    gzip compression
    more: HTML5 boilerplate
  • 33. What Plugins AreWorth a Shit?
  • 34. There Are a Few
    WP Smush.it(automatic image compression)
    W3 Total Cache(complete server optimization, requires access to .htaccess)
    WP Minify(automatically minify JS and CSS)
    WP-HTML-Compression(strip white space from HTML)
    CDN Tools(helps set up a CDN i.e. Google API or MaxCDN)
  • 35. How Can I Test?
  • 36. Great Question.
  • 37. It’s Easy. Really.
    Plugin: Debug Queries(discover where your site is slowing down)
    Websites and Tools:
    Pingdom Tools
    Web Page Analyzer
    Google Page Speed
    Yahoo! YSlow (firefoxplugin for Firebug)
    Yahoo! Boomerang
    Jdrop(mobile performance testing)
  • 38. Thank You.Really.
  • 39. @kevinpotts
    graphicpush.com/wp-performance

×