Your SlideShare is downloading. ×
0
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
Kansas City WordCamp - Website Performance
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

713

Published on

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

No Downloads
Views
Total Views
713
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
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?<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. Questions?<br />
  • 4. Performance = Perceived Speed<br />V <br />
  • 5. The Two Sides of the Website Coin<br />back end<br />front end<br />(client side)<br />(server side)<br />
  • 6. The Weight of the Front End<br />80%<br />20%<br />
  • 7. Who Cares?<br />
  • 8.
  • 9.
  • 10.
  • 11.
  • 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. What’s Dragging You Down?<br />
  • 14. network reliability<br />file sizes<br />HTTP requests<br />server configuration<br />WordPress itself<br />Balls, Chains, Anchors, Speed Bumps<br />
  • 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. File Size<br />
  • 17. HTTP Requests<br />
  • 18. Server Configuration<br />
  • 19. Balls, Chains, Anchors, Speed Bumps<br />network reliability<br />file sizes<br />HTTP requests<br />server configuration<br />WordPress itself<br />
  • 20. Is wordpress slow?<br />
  • 21. It’s Only as Fast as your theme.<br />
  • 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. 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. 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. What can I do on the front end?<br />
  • 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. CSS<br />kill unnecessary rules<br />shorthand<br />combine<br />minify<br />
  • 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. Images<br />CSS3 is your friend<br />image sprites<br />CRUSH THEM<br />
  • 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=&apos;#daf0ff&apos;, endColorstr=&apos;#99cfff&apos;,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. Image Sprites<br />Individually:<br />20 images = 17k<br />20 requests<br />Sprite:<br />1 image = 4.2k<br />1 request<br />
  • 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. What Plugins AreWorth a Shit?<br />
  • 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. How Can I Test?<br />
  • 36. Great Question.<br />
  • 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. Thank You.Really.<br />
  • 39. @kevinpotts<br />graphicpush.com/wp-performance<br />

×