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?

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