WordPress Greek Community - Meetup Thessaloniki 2 - Website Optimisation - Takis Bouyouris

Transcript

1. WordPress Thessaloniki 2nd Meetup "Website Optimisation" Takis Bouyouris, Nevma
2. Who am I? Takis Bouyouris Software Engineer/Web Developer Co-founder @ Nevma WordPress Greek Community WordPress Greek Athens Meetup <Hello_World/>
3. Very happy to be in Thessaloniki (again). Go, team WordPress!
4. What I do? I build websites and web apps mostly based on WordPress Not impressed!
5. 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?
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. 1. Server Performance Operating System File system Database layer Web server Application layer (more of a system admin's job)
20. 2. Network performance DSL, ADSL, VDSL 2G, 3G, 4G, HSDPA WiFi, Ethernet etc Cannot do much about that, it does not depend on the web developer.
21. 3. Browser performace Where frontend developers -should- shine! phase-1 : until page has loaded phase-2 : after page has loaded
22. Browser / phase-1 => 'DOMContentLoaded' => 'load' event
23. Browser / phase-2 after page 'load' event Animations One-page apps HTML5 games
24. But now let's focus on: 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 "the server" (in short)
32. 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 server 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. Keep your code clean - Write quality code which is fast and maintainable - Choose quality addons themes, plugins, etc - Test early, test often
36. How to optimise a website's load time "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. HTTP connections cost
41. Browsers cannot download many files from the same domain at the same time let's say 6-8 max!
42. Rule No 1 again Seriously make as few and quick HTTP requests possible! GIF on the right is there just to draw your attention Did it?
43. Combine and minify CSS files - Smaller file sizes - Less HTTP requests
44. Put CSS in the HEAD - Is downloaded asynchronously - Helps browsers start rendering page as often as possible * Except for "critical" CSS
45. Combine and minify JS files - Smaller file sizes - Less HTTP requests
46. Put JS before BODY end - Javascript is "blocking" everything else - Helps browsers start rendering page as early as possible
47. Everyone says minify HTML too, but it won't make a difference!
48. Compress images - Think of mobile devices, too - JPEG should be preferred - JPEG sizes can be reduced - PNG colours can be reduced - WebP, the new kid on the block (Many tools online for this)
49. Use image sprites - Combines many images into one - Smaller file sizes - Less HTTP requests
50. Use SVGs and fonts - Scalable vector graphics - One file, one download - Scales at any size But, be careful, too many of them can slow down your browser!
51. Rule No 2 Cache as much as you can and for as long as possible
52. Cache on the server - Cache whole requests - Use object cache in WP - HTML fragment cache in WP - Use query cache in DB - Opcode caching in PHP
53. Cache on the browser 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
54. # Expires headers – sent to browsers Cache-Control : max-age=900 Date : Fri, 18 Dec 2015 14:12:57 GMT Expires : Fri, 18 Dec 2015 14:27:56 GMT ==> # Example .htaccess code part - Apache ExpiresDefault "access plus 1 week" ExpiresByType text/html "access plus 1 day" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType image/jpg "access plus 3 months" ExpiresByType image/png "access plus 3 months" ExpiresByType font/opentype "access plus 6 months"
55. What expires headers do They turn "200-OK" into "304-Not-Modified"
56. Use a caching server (like Varnish) and/or a CDN not only because it's fast, also because it is distributed
57. If ye be a hipster - SPDY, HTTP2, HTTPS - Content prefetching - DNS prefetching - SCRIPTs 'async' and 'defer' (Google them)
58. Bored to death yet?
59. Just remember a) Make as few HTTP requests as possible b) Cache as much as you can for as long as you can c) Everything I said is already available online
60. 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)
61. Thank you! takis@nevma.gr http://takis.nevma.gr/ f @ takis.bouyouris
62. Questions? ΚΟΥ-ΡΑ-ΜΠΙΕ-ΔΕΕΕΣ