WordPress Greek Community 5th meetup - Measuring Website Performance - Takis Bouyouris

Transcript

1. Measuring website performance Takis Bouyouris Web Developer @ Nevma WordPress Greek Community Meetup 5 Wed 23/09/2015 Measuring website performance Takis Bouyouris Web Developer @ Nevma WordPress Greek Community Meetup 5 Wed 23/09/2015
2. Nice to meet you My name is Takis Bouyouris web developer @ Nevma Nice to meet you My name is Takis Bouyouris web developer @ Nevma
3. Today Discuss the different aspects of measuring website performance with a focus on page load times Today Discuss the different aspects of measuring website performance with a focus on page load times
4. Contents 1. What it is 2. How to measure it 3. Tools we can use *-_BUT NOT_-* How to achieve it Contents 1. What it is 2. How to measure it 3. Tools we can use *-_BUT NOT_-* How to achieve it
5. What is performance? What is performance?
6. Performance means to be fast! Performance means to be fast! `
7. performance ! == speed performant ! == successfull performance == complicated performance ! == speed performant ! == successfull performance == complicated
8. Performance requires the - completion of a user request in a - fast (or perceived fast) timeframe with a - reliable and predictable outcome Performance requires the - completion of a user request in a - fast (or perceived fast) timeframe with a - reliable and predictable outcome
9. Performance is important because 1. Fast is good saves time saves resources keeps users happy
10. Performance is important because 2. Fast means more conversions whatever that means for you be it sales, pageviews, emails etc
11. http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showi ng-how-page-speed-correlates-to-business-metrics-at-walmart-com/
12. Performance is important because 3. says so speed is a SEO ranking factor because it is good for the users especially on mobile
13. http://googlewebmastercentral.blogspot.gr/2010/04/using-site-speed-in-web-search-ranking.html
14. Performance is not always real, sometimes it is just "perceived performance" measurable performance ! == UI/UX performance
15. eg progress indicators
16. eg progressive JPEG
17. But let's talk about "real" website performance But let's talk about "real" website performance
18. Three phases in every HTTP request 1 2 3(a, b) Server -> Network -> Browser Three phases in every HTTP request 1 2 3(a, b) Server -> Network -> Browser
19. Phase 1 - Server performance System Database Filesystem CMS Custom code Phase 1 - Server performance System Database Filesystem CMS Custom code
20. Phase 2 - Network performance How the website data will reach the browser as fast as possible "Make fewer, faster requests" Phase 2 - Network performance How the website data will reach the browser as fast as possible "Make fewer, faster requests"
21. Phase 3 - Browser / part-a until page is loaded Phase 3 - Browser / part-a until page is loaded 'DOMContentLoaded', 'load' events 'DOMContentLoaded', 'load' events
22. Phase 3 - Browser / part-b after page has loaded Phase 3 - Browser / part-b after page has loaded
24. Today we are talking about part-a "Page load time " a web developer's headache Today we are talking about part-a "Page load time " a web developer's headache
25. Tools to use Browser Developer Tools > Net tab Firefox, Chrome, (Opera), Safari, even IE Tools to use Browser Developer Tools > Net tab Firefox, Chrome, (Opera), Safari, even IE
26. Chrome > Network tab Chrome > Network tab
27. Firefox/Firebug > Net tab Firefox/Firebug > Net tab
28. Internet Explorer > Network Internet Explorer > Network
29. Browser tools are -very- good for undestanding performance during development, but not nearly enough to reliably measure it One relies on their machine's conditions and their own perception of understanding performance Browser tools are -very- good for undestanding performance during development, but not nearly enough to reliably measure it One relies on their machine's conditions and their own perception of understanding performance
30. One needs - objectivity - stable conditions - metrics => Onlnine tools One needs - objectivity - stable conditions - metrics => Onlnine tools
31. Webpagetest.org http://www.webpagetest.org/ Webpagetest.org http://www.webpagetest.org/
32. Sit tight this might take some time it's my favourite tool Sit tight this might take some time it's my favourite tool
33. Why Webpagetest.org - Real machines - Real browsers - Real networks - In as stable and uniform conditions as possible Why Webpagetest.org - Real machines - Real browsers - Real networks - In as stable and uniform conditions as possible
34. Why Webpagetest.org - Honest - Qualitative - Most complete in features (cities, devices, networks, options) - Open source Why Webpagetest.org - Honest - Qualitative - Most complete in features (cities, devices, networks, options) - Open source
35. Overview Overview
42. And this was only desktop browser testing Wanna go mobile? And this was only desktop browser testing Wanna go mobile?
44. Gtmetrix https://gtmetrix.com/ Gtmetrix https://gtmetrix.com/
45. Websitetest.com http://www.websitetest.com/ Websitetest.com http://www.websitetest.com/
46. Pingdom http://tools.pingdom.com/fpt/ Pingdom http://tools.pingdom.com/fpt/
47. Speedcurve (a service) https://speedcurve.com/ Speedcurve (a service) https://speedcurve.com/
48. Pagespeed Insights https://developers.google.com/speed/ Pagespeed Insights https://developers.google.com/speed/
49. To sum up - choose your tool - measure your performance - make fewer requests - make the blue and purple lines happen quickly as possible To sum up - choose your tool - measure your performance - make fewer requests - make the blue and purple lines happen quickly as possible
50. Name a website and let's test it... Name a website and let's test it...
51. Thank you for listening! Questions? Thank you for listening! Questions?
52. WordPress Greek Community / WPGreece https://facebook.com/groups/WordPressGreekCommunity/ https://twitter.com/wordpressgrcomm/ http://www.wpgreece.org/ http://www.wpgc.gr/ WordPress Greek Community / WPGreece https://facebook.com/groups/WordPressGreekCommunity/ https://twitter.com/wordpressgrcomm/ http://www.wpgreece.org/ http://www.wpgc.gr/
53. Takis Bouyouris takis@nevma.gr https://www.facebook.com/takis.bouyouris https://www.linkedin.com/in/takisbouyouris Takis Bouyouris takis@nevma.gr https://www.facebook.com/takis.bouyouris https://www.linkedin.com/in/takisbouyouris