What the hell is this?<br />what is performance and who cares?<br />what’s dragging you down?<br />is WordPress slow?<br /...
Questions?<br />
Performance = Perceived Speed<br />V <br />
The Two Sides of the Website Coin<br />back end<br />front end<br />(client side)<br />(server side)<br />
The Weight of the Front End<br />80%<br />20%<br />
Who Cares?<br />
The Landscape by 2015<br />Quadruple Traffic Globally<br />Devices:<br />Desktop: 25%<br />Laptop: 83%<br />Smartphone: 19...
What’s Dragging You Down?<br />
network reliability<br />file sizes<br />HTTP requests<br />server configuration<br />WordPress itself<br />Balls, Chains,...
Network Factors<br />space between mobile towers<br />visitor’s data plan<br />quality of connection<br />random acts of G...
File Size<br />
HTTP Requests<br />
Server Configuration<br />
Balls, Chains, Anchors, Speed Bumps<br />network reliability<br />file sizes<br />HTTP requests<br />server configuration<...
Is wordpress slow?<br />
It’s Only as Fast as your theme.<br />
0 JS files(0k)<br />1 CSS files(23k)<br />2 images(53k)<br />0 iframes(0k)<br />80k+ download<br />~5 requests<br />
11 JS files(191k)<br />3 CSS files(43k)<br />6 images(179k)<br />2 iframes(16k)<br />500k+ download<br />20+ requests<br />
23 JS files(1243k)<br />6 CSS files(92k)<br />70 images(549k)<br />3 iframes(123k)<br />2000k+ download<br />100+ requests...
What can I do on the front end?<br />
HTML<br />HTML5 is your friend<br />more semantic tag use, less div soup; default WP does NOT do this<br />avoid the hidde...
CSS<br />kill unnecessary rules<br />shorthand<br />combine<br />minify<br />
JavaScript<br />if you load a library, load it from Google APIs(75% less load impact)<br />native JS is faster(select elem...
Images<br />CSS3 is your friend<br />image sprites<br />CRUSH THEM<br />
How CSS is More Efficient<br />Traditional:<br />2 images<br />Extra markup<br />~ 5-6k, extra requests<br />div {<br />he...
Image Sprites<br />Individually:<br />20 images = 17k<br />20 requests<br />Sprite:<br />1 image = 4.2k<br />1 request<br />
Bonus Round<br />content delivery network (CDN)<br />use your own subdomain (crap.acme.com)<br />gzip compression<br />mor...
What Plugins AreWorth a Shit?<br />
There Are a Few<br />WP Smush.it(automatic image compression)<br />W3 Total Cache(complete server optimization, requires a...
How Can I Test?<br />
Great Question.<br />
It’s Easy. Really.<br />Plugin: Debug Queries(discover where your site is slowing down)<br />Websites and Tools:<br />Ping...
Thank You.Really.<br />
@kevinpotts<br />graphicpush.com/wp-performance<br />
Upcoming SlideShare
Loading in …5
×

Kansas City WordCamp - Website Performance

905 views

Published on

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

No Downloads
Views
Total views
905
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Kansas City WordCamp - Website Performance

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

×