WordPress Greek Community - FOSSCOM 2015 - Website optimisation - Takis Bouyouris

Transcript

1. FOSSCOM 2015 "Website Optimisation" Takis Bouyouris, Nevma
2. Thank you FOSSCOM WordPress Greek Community is proud to be here
3. Who am I? Takis Bouyouris Software Engineer Web Developer Co-founder @ Nevma WordPress Greek Community Hello World!
4. Basically, I build websites and web applications most of them based on WordPress
5. Not impressed? Okay, but building a "good" website is not always such a simple task!
6. A "good" website must: look good function well and be ...faaast
7. Why fast? Why not slow? I'll tell you why!
8. 1. Fast is good, saves time, saves resources keeps users happy!
9. 2. Fast means more conversions (whatever that means for you be it sales, pageviews, emails etc)
10. http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/
11. 3. Google says so Speed is a SEO ranking factor because it is good for the users! Webmaster Central Blog: http://googlewebmastercentral.blogspot.gr/2010/04/using-site-speed-in-web-search-ranking.html
12. Website optimisation... Performance! Wait what is performance?
13. Good performance requires: The completion of a request in a fast -or perceived fast- timeframe, with a reliable and predictable outcome.
14. Websites live on HTTP requests Phases in every HTTP request 1 – Browser 2 – Network 3 – Server 4 – Network 5 – Browser
15. http://chimera.labs.oreilly.com/books/1230000000545/ch11.html
16. A modern web page means lots of files!
17. You forgot the GIFs!
18. In order to optimise a website you need to optimise all three: 1 – Server side 2 – Network layer 3 – Browser side
19. Server Performance Operating System File system Database layer Web server Application layer (more of a system admin's job)
20. Network performance DSL, ADSL, VDSL 2G, 3G, 4G, HSDPA WiFi, Ethernet (cannot do much about that in HTTP)
21. Browser performace, where frontend developers (should) shine! phase-1 : until page has loaded phase-2 : after page has loaded
22. Browser / phase-1 until page has loaded DOMContentLoaded and load Javascript DOM events
23. Browser / phase-2 after page has loaded Animations One-page apps HTML5 games
24. But now let's focus on website performance which means: How to make a website load faster!
25. First, we need a tool to measure website performance All modern browsers have Developer Tools with a Network tab!
26. But the best way is via an online service which - is objective - has stable conditions - provides good metrics
27. Webpagetest.org the best online, free tool out there
28. Why Webpagetest.org - Real machines - Real browsers - Simulated networks - Stable, uniform conditions - Cities, devices, options - Open source
30. Gtmetrix.com pretty decent, freeware
31. How to optimise a website's load time (at last!)
32. First keep server side healthy - Secure your OS - Perform regular updates on OS, app server, db server - Keep as less files as possible especially images, even gifs - Database garbage cleanups - Database tables optimisation
33. Also, server side - Allow HTTP keep-alive - Enable GZIP for texts - Avoid 404 requests - Use multiple domains - Avoid redirects
34. WordPress specific tips - Delete old post revisions - Delete auto drafts - Delete spam comments - Delete unused terms - Set revisions not too often - Set number of revisions low - Use few custom image sizes - Cleanup old sticky posts - Delete orphaned post meta - Avoid frequent hooks and filters like "pre_get_posts" - Avoid long taxonomy "not-ins" - Remove unused plugins - Remove unused themes
35. Then keep your codebase clean - Write quality code which is fast and maintainable - Choose quality addons themes, plugins, etc - Test early, test often aaand - WRITE QUALITY CODE!
36. Next: The browser!
37. Help browsers render web pages as fast as possible... Wow, that was deep! (not Depp, get it?)
38. Assuming your web server is not too slow and the network is not holding you back...
39. Rule No 1 Make as few and quick HTTP requests as possible
40. Rule No 1 again Seriously Make as FEW and QUICK HTTP requests as POSSIBLE! GIF on the right is there just to draw your attention Did it?
41. Combine and minify CSS files - Smaller file sizes - Less HTTP requests
42. Put CSS in the HEAD - Is downloaded asynchronously - Helps browsers start rendering page as often as possible * Except for "critical" CSS
43. Combine and minify JS files - Smaller file sizes - Less HTTP requests
44. Put JS before BODY end - Because Javascript is "blocking" - Helps browsers start rendering page as early as possible
45. Everyone will tell you to minify HTML too, but honestly, it won't make much of a difference!
46. Compress images - Think of mobile devices, too - JPEG should be preferred - JPEG sizes can be reduced a lot - PNG sizes can be reduced a lot - WebP, the new kid on the block (Many tools online for this)
47. Use image sprites - Combines many images into one - Smaller file sizes - Less HTTP requests
48. Use SVGs - Scalable vector graphics - One file, one download - Scales at any size But, be careful, too many of them can slow down your browser!
49. Rule No 2 Cache everything for as long as possible
50. Cache on the server - Cache whole requests - Use object cache - Use query cache - HTML fragment caching - Opcode caching
51. Cache on the browser Add expires headers Favicons -almost- never change Font files -almost- never change Styles and scripts rarely change Images also very rarely change HTML might change (but it depends) Be prepared to un-cache (invalidate) content
52. What expires headers do They turn 200-OK into 304-Not-Modified
53. Use a caching server like Varnish and/or a CDN not because it's fast, but because it is distributed
54. "Edgy" hipster stuff - SPDY, HTTP2, HTTPS - Page prefetching - DNS prefetching - Async and defer in SCRIPTs (Google them)
55. Bored to death yet?
56. Just remember this: Try to make as few HTTP requests as possible and cache as much as you can ...and you 'll be half way there!
57. The end – Questions?
58. http://wpgreece.org/ http://www.wpgc.gr/ https://www.facebook.com/groups/WordPressGreekCommunity/ https://twitter.com/wpgreeceorg/ https://www.youtube.com/channel/UCn2JrgFY9lHO85gGTAlfw0A/ https://speakerdeck.com/wpgr/ (or just Google us)
59. Thank you! takis@nevma.gr http://takis.nevma.gr/ f @ takis.bouyouris