Wordpress optimization

3,531 views

Published on

Powerpoint file(incl. animations!): http://db.tt/oQiXb9lq

This is the slides of the presentation "Wordpress optimization" who presented at WordCamp 2013.
How to improve your wordpress performance and speed up your website more than 700% faster!

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,531
On SlideShare
0
From Embeds
0
Number of Embeds
409
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Wordpress optimization

  1. 1. Wordpress optimization { Speed up your wordpress
  2. 2. Who dafuq are you?
  3. 3. What are we going to talk about? How to improve your wordpress performance.Speed up your website over than 700% faster!
  4. 4. What are we going to talk about?1. Huh? Performance?2. How do I analyze my wordpress performance?3. How to optimize!
  5. 5. Hey.. Wait a second!Why should I do it? 1. Why not? 2. It will save you money! $$$$ 3. Make your users happy    4. Stay up under heavy load.. 5. Improve your google results!
  6. 6. What does it mean “Performance”?Loading time is influenced by Hardware Services Requests Better hosting Configurations Caching Better hardware 3rd party serviced Right Development (varnish, cdn..,apc) Location
  7. 7. What does it mean “requests”?
  8. 8. What does it mean “Performance”?There are two states: Deploy Production 1 user = request at time multiple users = multiple request low hardware high hardware
  9. 9. Analyzing toolsThere are few tools to analyze our website:1. Feeling - the website went slow2. Requests analyzing tools3. By-subject analyzing tools4. Wordpress analyzing
  10. 10. Requests analyzingFirebug’s Net tab:
  11. 11. Requests analyzing webpagetest.orgAllowing test with different engines, and test within first view or repeated.. And much more
  12. 12. Requests analyzingPingdom.com tools
  13. 13. By-subject analyzingYSlow:
  14. 14. By-subject analyzingYSlow:
  15. 15. By-subject analyzingGoogle pagespeed:
  16. 16. By-subject analyzingGoogle pagespeed:
  17. 17. Wordpress analyzingWordpress plugin: P3P3 is analyzing yourplugins and provide andetailed analysis.
  18. 18. Cat time!
  19. 19. How to optimize!The obvious:1. Keep your wordpress updated! (core & plugins)2. Deactivate unused plugins3. Check about the plugin before install it.4. Analyze your website.. Duh?
  20. 20. Optimize serverUse linux!• Configure the PHP as well - increase memory, timeout..• Configure MySQL as well - some innodb issues may slow your website
  21. 21. Optimize server• Use opcode accelerators - APC, Xcache, memcache• Varnish• Consider replacing apache2 with nginx
  22. 22. Development optimizationsRemember this?Because our browser have many requests, the loading time much longer.So, lets try to reduce the requests!
  23. 23. Development optimizationsUse sprites!Sprites make the browser load all the images at once and reducing newrequests.
  24. 24. Development optimizationsMinify and aggregation1. Aggregate all the resources(js, css, image->sprites)2. Aggregation is reducing the requests3. Minifying all the resources(html, css, js)4. Minifying is speeding up your loading!
  25. 25. Development optimizationsJavascript1. Make your ajax scripts cacheable2. Reduce document ready events.3. Reduce jQuery queries! – every query is scanning the whole webpage! use canonical finding instead: var $section = $("#section"); $section.find(".class").text("cool");
  26. 26. Development optimizationsWrite semantic and valid code!1. Separate code from style: markup shouldnt contains style elements.2. Use CSS’s pseudo class “:before” and “:after”3. Use CSS3 features(gradient, shadow…)
  27. 27. Development optimizations Write semantic code by the html5 rules!<header role="banner"> <h1><a href="http://link.com/" title="Website" rel="home">Logo</a></h1> <nav role="navigation"><ul> <li class="current"><a href="http://link.com/" title="Home">Home</a></li> <li class="page_item"><a href="http://link.com/About">About</a></li> </ul></nav></header><section id="content"> <article id="post-19" class="post-19 post type-post"> … </article> <article id="post-21" class="post-21 post type-post"> … </article></section><footer> …</footer>
  28. 28. Development optimizationsImages1. DO NOT scale images with CSS!2. Save images for web3. You may use www.smush.it or WP-Smush.it plugin
  29. 29. Development optimizationsSet properly headers for browser-cachingSet expire headers, e-tags, etc..GZip everything!Compress your source files(css, js, html) with gzip.. It will accelerate your loading time.
  30. 30. What is cache? Database Web ServerThis is really long way..And actually.. It’s the same result!
  31. 31. What is cache?Cache is the way to access distant data faster by storing it locally.
  32. 32. Server-side cacheEvery request for each page is making our website rebuild this page using the databaseour theme, and much more.. Database Request homepage Server But, actually- our page hasn’t been changed.
  33. 33. Cache optimizationsSo.. Why haven’t we cache this pages?! Cached page is page cached? Database Request homepage Server
  34. 34. Cache optimizations April 2010 results..
  35. 35. Cache optimizations April 2010 results..
  36. 36. Cache optimizationsThere are two leading plugins:1. W3 Total Cache – complex, but cover much everything! Including CDN, minifying, aggregation, and much more..2. WP Super Cache – much simpler! Almost automatic.. Handle only caching.
  37. 37. CDN
  38. 38. Server CDN 1s3s 1s 3.5s 8s 7s 15s 18s
  39. 39. Server CDN 1s 1.5sjs 1s 1.5s CDNimg CDN 1.5scss 2s CDN 1s 1.2s
  40. 40. CDN1. Use Google’s CDN for jQuery by “use-google-libraries” plugin2. If you have serious traffic you may use enterprise CDN
  41. 41. HARDCODE!1. Use separate server for database server2. Use HyperDB for multiple database servers3. Use Memcache on separate server4. Use nginx5. Develop you plugin using the wordpress cache api!
  42. 42. MOST IMPORTANT!NEVER EVER hack the core.
  43. 43. Questions?
  44. 44. Thank you!

×