Wordpress optimization
6 likes27,728 views
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!
Ad
More Related Content
What's hot (20)
Similar to Wordpress optimization (20)
Ad
More from Almog Baku (7)
Ad
Recently uploaded (20)
Wordpress optimization
- 1. Wordpress optimization { Speed up your wordpress
- 2. Who dafuq are you?
- 5. What are we going to talk about? How to improve your wordpress performance. Speed up your website over than 700% faster!
- 6. What are we going to talk about? 1. Huh? Performance? 2. How do I analyze my wordpress performance? 3. How to optimize!
- 7. 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!
- 8. 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
- 9. What does it mean โrequestsโ?
- 14. What does it mean โPerformanceโ? There are two states: Deploy Production 1 user = request at time multiple users = multiple request low hardware high hardware
- 15. Analyzing tools There are few tools to analyze our website: 1. Feeling - the website went slow 2. Requests analyzing tools 3. By-subject analyzing tools 4. Wordpress analyzing
- 16. Requests analyzing Firebugโs Net tab:
- 17. Requests analyzing webpagetest.org Allowing test with different engines, and test within first view or repeated.. And much more
- 23. Wordpress analyzing Wordpress plugin: P3 P3 is analyzing your plugins and provide an detailed analysis.
- 24. Cat time!
- 26. How to optimize! The obvious: 1. Keep your wordpress updated! (core & plugins) 2. Deactivate unused plugins 3. Check about the plugin before install it. 4. Analyze your website.. Duh?
- 27. Optimize server Use linux! โข Configure the PHP as well - increase memory, timeout.. โข Configure MySQL as well - some innodb issues may slow your website
- 28. Optimize server โข Use opcode accelerators - APC, Xcache, memcache โข Varnish โข Consider replacing apache2 with nginx
- 29. Development optimizations Remember this? Because our browser have many requests, the loading time much longer. So, lets try to reduce the requests!
- 30. Development optimizations Use sprites! Sprites make the browser load all the images at once and reducing new requests.
- 31. Development optimizations Minify and aggregation 1. Aggregate all the resources(js, css, image->sprites) 2. Aggregation is reducing the requests 3. Minifying all the resources(html, css, js) 4. Minifying is speeding up your loading!
- 32. Development optimizations Javascript 1. Make your ajax scripts cacheable 2. 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");
- 33. Development optimizations Write semantic and valid code! 1. Separate code from style: markup shouldn't contains style elements. 2. Use CSSโs pseudo class โ:beforeโ and โ:afterโ 3. Use CSS3 features(gradient, shadowโฆ)
- 34. 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>
- 35. Development optimizations Images 1. DO NOT scale images with CSS! 2. Save images for web 3. You may use www.smush.it or WP-Smush.it plugin
- 36. Development optimizations Set properly headers for browser-caching Set expire headers, e-tags, etc.. GZip everything! Compress your source files(css, js, html) with gzip.. It will accelerate your loading time.
- 37. What is cache? Database Web Server This is really long way.. And actually.. Itโs the same result!
- 38. What is cache? Cache is the way to access distant data faster by storing it locally.
- 39. Server-side cache Every request for each page is making our website rebuild this page using the database our theme, and much more.. Database Request homepage Server But, actually- our page hasnโt been changed.
- 40. Cache optimizations So.. Why havenโt we cache this pages?! Cached page is page cached? Database Request homepage Server
- 41. Cache optimizations April 2010 results..
- 42. Cache optimizations April 2010 results..
- 43. Cache optimizations There 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.
- 44. CDN
- 45. Server CDN 1s 3s 1s 3.5s 8s 7s 15s 18s
- 46. Server CDN 1s 1.5s js 1s 1.5s CDN img CDN 1.5s css 2s CDN 1s 1.2s
- 47. CDN 1. Use Googleโs CDN for jQuery by โuse-google-librariesโ plugin 2. If you have serious traffic you may use enterprise CDN
- 48. HARDCODE! 1. Use separate server for database server 2. Use HyperDB for multiple database servers 3. Use Memcache on separate server 4. Use nginx 5. Develop you plugin using the wordpress cache api!
- 49. MOST IMPORTANT! NEVER EVER hack the core.
- 50. Questions?
- 51. Thank you!