Download to read offline
More Related Content
Similar to I Can Haz More Performanz?
I Can Haz More Performanz?
- 1. PRESENTED TO WORDCAMPOMAHA BY ANDY MELICHAR
- 2. FIRST THINGS FIRST ALITTLE ABOUT MEâŚ
- 3. THIS IS MYFIRST WORCAMP SPEAKING GIG⌠WOOO!! Thanks for the opportunity!
- 4.
- 5. Serial Hobbyist Current obsession: HAM Radio. Mycallsign is KEĂATA
- 6. I just might knowmy way around the kitchen⌠Look familiar?
- 7. Omaha, born and raised! Andnow I live in Ypsilanti, Michigan
- 8. What the heckdoes a serial hobbyist, karaoke-singing culinary guy know about WordPress?
- 9. Director of Web Developmentand Agile Product Owner for A2 Hosting We spend a lot of time on making WordPress better for our customers! Ask me about Agile/Scrum!
- 10. From the Perspectiveof a Hosting CompanyâŚ ďľ A high percentage of our current and new customers are WordPress users, and the number keeps rising ďľ Being on the hosting end, we can dig into common performance issues MUCH deeper because we know our web servers inside and out ďľ The very high percentage of WordPress related support requests that we receive are performance related, so weâve looked at many different ways to improve performance
- 11. SECOND THINGS SECOND TIMEFOR YOU ALL TO FESS UP!
- 12. How many ofyouâŚ ďľ Have attempted to optimize your WP Site? ďľ Have installed/configured a caching plugin? ďľ Know what a CDN is? ďľ Have added configurations to an .htaccess file ďľ Are running your own server (VPS/dedicated/cloud) ?
- 13. Why should wecare about performance?
- 14. Some statisticsâŚ ďľ 40%of people abandon a website that takes more than 3 seconds to load ďľ A 1 second delay in page response can result in a 7% reduction in conversions ďľ If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year Source: https://blog.kissmetrics.com/loading-time/
- 15. Bottom lineâŚ ďľ Apoorly optimized website can cost you real $$ in support and hosting costs ďľ By diving into performance and optimization, youâll learn more about WordPress, and more about web systems and infrastructure ďľ By becoming a performance expert, youâll be able to deliver a much more reliable, robust product to your customers!
- 16. How do youmeasure performance?
- 17. Performance Measurement Tools ďľGtmetrix.com â my favorite! ďľ Free ďľ Easy to use/understand ďľ Has a WordPress Plugin ďľ WebPageTest.org ďľ Also Free ďľ Lots of great detailed information ďľ LoadImpact.com ďľ Free + Paid plans ďľ Simulates multiple, concurrent users hitting your site
- 18. What Measurements Matter? ďľPage Load Time ďľ Most representative of the customer experience ďľ Best âoverallâ performance metric ďľ Total Page Size ďľ Good to keep an eye on this for major problems such as ďľUncompressed images ďľHigh-resource themes/plugins
- 19. Letâs Look atour Before
- 20. Where can we âhazmore performanz?â
- 21. Areas of Focusfor Performance ďľ Optimizations within WordPress ďľ Our Web Server Environment ďľ External Services
- 22. Optimizations within WordPress ďľClean house! ďľGet rid of unused themes/plugins/etc. ďľDonât just deactivate⌠DELETE ďľBe sure everything is up-to-date ďľMost recent WordPress version ďľPlugins are all updated to latest version
- 23. Optimizations within WordPress ďľUtilize a Caching Plugin
- 24. Optimizations within WordPress ďľUtilize a Caching Plugin ďľW3 Total Cache or Fix-W3TC ďľFree and HIGHLY configurable ďľWP Rocket ďľPaid, but comes well-recommended ďľWP Super Cache ďľRobust and easy to use
- 25.
- 26. The orange arrowsrepeat for every: ⢠Image ⢠CSS File ⢠JavaScript File ⢠Video ⢠Etc.
- 27.
- 28. With Caching, weskip a bunch of steps! ⢠File System ⢠PHP ⢠Database
- 29. Enable Caching âResults (Gtmetrix) Before Caching After Caching
- 30. 25 Concurrent VirtualUsers Using LoadImpact.com No Caching: 1.5s Page Load Time Caching: 180ms Page Load Time
- 31. Optimizations within WordPress ďľTurn on Minification ďľ Most caching plugins will have an option for this, but it may not be enabled by default ďľ You DO have to be careful, because Minification can break some themes/plugins, YMMV
- 32. Minification â JQueryBefore / After Before 10,220 Lines 261KB File Size After 3 (LONG) Lines 85KB File Size ~60% Reduction In size
- 33. Optimizations within WordPress ďľTurn on GZip Compression ďľ Vast majority of hosts (especially shared hosts) support GZip from the server level, it just needs to be enabled ďľ Easily enabled via .htaccess rules ďľ Most caching plugins will also have an option to enable GZip compression ďľhttps://codex.wordpress.org/Output_Compression
- 34. Enable GZip âResults (Gtmetrix) Before Gzip After Gzip
- 35. Optimizations within WordPress ďľOptimize Images ďľ Images are a significant amount of data that has to get transferred from the server to the client ďľ Compress them! ďľBefore you upload ďľDuring upload with a plugin, such as WP Smush
- 36. Now letâs lookat the server!
- 37. Server-Side Optimizations for WordPress ďľAdd âExpiresâ headers for static content ďľ This tells the userâs browser to cache static files locally so they donât have to transferred repeatedly ďľ Done in either .htaccess or nginx config ďľ Plugins like W3 Total Cache can help you do this, though you may still need to edit an .htaccess or nginx config file
- 38. Server-Side Optimizations for WordPress ďľSwitch Web Servers ďľ Apache â most common, not as robust ďľ Nginx â increasingly more common, way better at serving up static files ďľ LiteSpeed â licensed software, drop in replacement for Apache, does well with high volume, concurrent traffic
- 39. Server-Side Optimizations for WordPress ďľSwitch Web Servers ďľ To switch, typically need to be on your own server (VPS/Dedicated/Cloud) OR you can find a host that specifically offers hosting that uses one of the alternative web servers
- 40. Server-Side Optimizations for WordPress ďľEnable APC/OpCache ďľ APC (for PHP < 5.5) or OpCache (for PHP 5.5 and greater) reduces the amount of time it takes the server to process PHP files ďľ Few shared hosts have this enabled on their servers ďľ Typically need to have a VPS or Dedicated server with APC or OpCache Installed ďľ Once enabled on the server, nothing to configure or turn on in WordPress
- 41.
- 42. What is aCDN? (Content Delivery Network) ďľ CDN Sits between the server and the client, and handles serving up some/all of your files ďľ CDNâs typically have a large infrastructure of multiple servers located in strategic geographic locations
- 43. What is aCDN? (Content Delivery Network) ďľ Benefits: ďľThey can reduce the load on your server ďľThey can shorten the distance (hops) it takes for the client to get your data ďľThey also can act as a protection tool for things like DDoS (Distributed Denial of Service) attacks, brute force attacks, and other attack vectors
- 44. Without a CDN Rememberthis mess?
- 45. With a CDN Thingsflow differently!
- 46. With a CDN Thingsflow differently!
- 47. DDoS Attack The trafficnever hits your server!
- 48. Some Popular CDNs ďľCloudFlare ďľ MaxCDN ďľ CacheFly ďľ Softlayer ďľ More in the Codex: https://codex.wordpress.org/WordPress_Optimization #Use_a_content_Delivery_Network_.28CDN.29
- 49. The Downside ofCDNs ďľ To be effective they required DNS entry changes ďľ Typically also need to have a corresponding WordPress plugin to talk to the CDN and coordinate content updates ďľ Depending on how much protection / caching / etc, can cost $$$
- 50. What all didwe do to our test site? ďľ Enabled GZip ďľ Added Expires Headers ďľ Installed W3 Total Cache ďľ Turned on Minification ďľ Enabled CloudFlare CDN ďľ Utilized nginx ďľ Enabled opCache
- 51.
- 52. Whatâs up withthat âCâ ?
- 53. Whatâs up withthat âCâ ? ďľ If we wanted to further optimize, we could bring these JS/CSS files local so they would get Minified/GZipped
- 54. Look a littlecloser at our âAfterâ ďľ On a repeat view we are REALLY flying ďľ Only 1 request needed ďľ Under 1s load time ďľ Bytes in: 16KB!
- 55. Final Thoughts ďľ Thereare LOTS of options to optimize/gain performance ďľ You donât have to do them all ďľ Many people in the WordPress community know how to help you with these configurations ďľ The Codex is your friend!
- 56.
Editor's Notes
- #7Â If that kitchen doesnât look familiar go downstairs! I unfortunately had to cut my studies short when I moved to Michigan.
- #11Â One of the nice things about working for a hosting company is that I, and my colleagues, get to know WordPress really well.
- #27Â (talk through each step)
- #29Â Talk through each step and explain how it is a much shorter process.
- #30Â On the GTMetrix we can see a direct result in our page load time. Itâs not huge, but my website also isnât very complex, so itâs harder for us to see enormous improvements. The other thing to remember about caching, is that when it REALLY shines, is with concurrent website traffic. Letâs take a look!
- #31Â Hereâs where we really see the difference â this test was conducted with LoadImpact sending 25 users to my site over 5 minutes.
- #33Â Jquery is a fairly common javascript library used in many frameworks and themes. If you compare the the full, development-ready version of Jquery against the same version run through minification, you can see the difference in size.
- #35Â Hereâs a before and after, you can see the direct results in both our PageSpeed and Yslow scores, but also the Total Page Size is reduced by about a third.
- #45Â Without a CDN, every connection from the client is DIRECTLY to your server.
- #46Â The first time we hit a page, we go through the whole cycle so the CDN can capture the content from your site.
- #47 The second time, the CDN can take over and serves up your content without even hitting your server. Occasionally the CDN will hit your server to check that it is still serving up valid content, and will update itâs internal cache if it detects a change. Also of note⌠there are many types of CDNâs, some of them work differently than others or have different subscription levels. For example, some CDNâs only serve up images and JS/CSS files, and it will still contact your server for the page content. This still saves resources on your server and speeds up the page loading time because we arenât relying on our server to do all the work.
- #48Â Now letâs say your CDN service also provides DDoS / Brute Force protection. In this case when a DDoS attack commences, the attack is absorbed by the CDN, and it only routes valid traffic back to the client. Why is this important for optimization? Because your site doesnât go down!!
- #55 Where we really see a benefit is in the repeat viewâŚ