What are we going to talk about? How to improve your wordpress performance.Speed up your website over than 700% faster!
What are we going to talk about?1. Huh? Performance?2. How do I analyze my wordpress performance?3. How to optimize!
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!
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
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?
Optimize serverUse linux!• Configure the PHP as well - increase memory, timeout..• Configure MySQL as well - some innodb issues may slow your website
Optimize server• Use opcode accelerators - APC, Xcache, memcache• Varnish• Consider replacing apache2 with nginx
Development optimizationsRemember this?Because our browser have many requests, the loading time much longer.So, lets try to reduce the requests!
Development optimizationsUse sprites!Sprites make the browser load all the images at once and reducing newrequests.
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!
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…)
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>
Development optimizationsImages1. DO NOT scale images with CSS!2. Save images for web3. You may use www.smush.it or WP-Smush.it plugin
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.
What is cache? Database Web ServerThis is really long way..And actually.. It’s the same result!
What is cache?Cache is the way to access distant data faster by storing it locally.
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.
Cache optimizationsSo.. Why haven’t we cache this pages?! Cached page is page cached? Database Request homepage Server
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.