Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

WordPress Greek Community

September 23, 2015
Tweet

More Decks by WordPress Greek Community

Other Decks in Programming

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  5. What is performance?
    What is performance?

    View Slide

  6. Performance means to be fast!
    Performance means to be fast!
    `

    View Slide

  7. performance ! == speed
    performant ! == successfull
    performance == complicated
    performance ! == speed
    performant ! == successfull
    performance == complicated

    View Slide

  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

    View Slide

  9. Performance is important because
    1. Fast is good
    saves time
    saves resources
    keeps users happy

    View Slide

  10. Performance is important because
    2. Fast means more conversions
    whatever that means for you
    be it sales, pageviews, emails etc

    View Slide

  11. http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showi
    ng-how-page-speed-correlates-to-business-metrics-at-walmart-com/

    View Slide

  12. Performance is important because
    3. says so
    speed is a SEO ranking factor
    because it is good for the users
    especially on mobile

    View Slide

  13. http://googlewebmastercentral.blogspot.gr/2010/04/using-site-speed-in-web-search-ranking.html

    View Slide

  14. Performance is not always real,
    sometimes it is just
    "perceived performance"
    measurable performance
    ! ==
    UI/UX performance

    View Slide

  15. eg
    progress indicators

    View Slide

  16. eg
    progressive JPEG

    View Slide

  17. But let's talk about
    "real" website performance
    But let's talk about
    "real" website performance

    View Slide

  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

    View Slide

  19. Phase 1 - Server performance
    System
    Database
    Filesystem
    CMS
    Custom code
    Phase 1 - Server performance
    System
    Database
    Filesystem
    CMS
    Custom code

    View Slide

  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"

    View Slide

  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

    View Slide

  22. Phase 3 - Browser / part-b
    after page has loaded
    Phase 3 - Browser / part-b
    after page has loaded

    View Slide

  23. View Slide

  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

    View Slide

  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

    View Slide

  26. Chrome > Network tab
    Chrome > Network tab

    View Slide

  27. Firefox/Firebug > Net tab
    Firefox/Firebug > Net tab

    View Slide

  28. Internet Explorer > Network
    Internet Explorer > Network

    View Slide

  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

    View Slide

  30. One needs
    - objectivity
    - stable conditions
    - metrics
    => Onlnine tools
    One needs
    - objectivity
    - stable conditions
    - metrics
    => Onlnine tools

    View Slide

  31. Webpagetest.org
    http://www.webpagetest.org/
    Webpagetest.org
    http://www.webpagetest.org/

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  35. Overview
    Overview

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. And this was only desktop
    browser testing
    Wanna go mobile?
    And this was only desktop
    browser testing
    Wanna go mobile?

    View Slide

  43. View Slide

  44. Gtmetrix
    https://gtmetrix.com/
    Gtmetrix
    https://gtmetrix.com/

    View Slide

  45. Websitetest.com
    http://www.websitetest.com/
    Websitetest.com
    http://www.websitetest.com/

    View Slide

  46. Pingdom
    http://tools.pingdom.com/fpt/
    Pingdom
    http://tools.pingdom.com/fpt/

    View Slide

  47. Speedcurve (a service)
    https://speedcurve.com/
    Speedcurve (a service)
    https://speedcurve.com/

    View Slide

  48. Pagespeed Insights
    https://developers.google.com/speed/
    Pagespeed Insights
    https://developers.google.com/speed/

    View Slide

  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

    View Slide

  50. Name a website
    and let's test it...
    Name a website
    and let's test it...

    View Slide

  51. Thank you for listening!
    Questions?
    Thank you for listening!
    Questions?

    View Slide

  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/

    View Slide

  53. Takis Bouyouris
    [email protected]
    https://www.facebook.com/takis.bouyouris
    https://www.linkedin.com/in/takisbouyouris
    Takis Bouyouris
    [email protected]
    https://www.facebook.com/takis.bouyouris
    https://www.linkedin.com/in/takisbouyouris

    View Slide