Welcome to Centmin Mod Community
Become a Member

WebPerf PageSpeed How to use webpagetest.org for page load speed testing

Discussion in 'Web Development & Web Performance' started by eva2000, Jan 28, 2018.

Thread Status:
Not open for further replies.
  1. eva2000

    eva2000 Administrator Staff Member

    33,667
    7,454
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,459
    Local Time:
    2:06 PM
    Nginx 1.13.x
    MariaDB 5.5
    My favourite page speed tool for web page page load speed testing is webpagetest.org. It has dozens of test geographical locations and web browser and mobile/tablet testing profiles so you can do detailed page load speed tests. WPT has recently updated all their Amazon AWS EC2 testing locations to using Linux which has improved the testing servers performance as well. You can also read an overview at WebPerf - Measuring Web Performance – Analyzing What Matters Most.

    You can register for a Webpagetest user account which is tied to their forums here so you get access to Webpagetest API, API key and forums and can set private test runs.
    Below is a brief run down on how to use webpagetest.org to test your web sites' pages.

    When you visit webpagetest.org, the first page you're greeted with is the Advanced testing tab where you enter your web site url, your choice of testing location, your choice of web browser to simulate page loads from. Further below that is Test settings page where
    • you select the connection speed profile - which usually I use 3G mobile or Cable 5Mbps as they are the averages worldwide
    • you select the number of tests to run - always set to odd number as the results are the mean of the number of runs for more accuracy so I usually select 3, 5 or 7 test runs
    • repeat view - I usually just select first view but you can select first and repeat view
    • capture video - check the box so you get filmstrip profile of how your page loads
    • keep test private - if you register for WPT account, you can keep your test results private from public. You'd need to uncheck the box if you want to share the result url link.
    • label field to properly label your tests so if you have a registered WPT account, you can go to test result history and lookup past tests and compare past tests against each other.
    upload_2018-1-28_14-25-3.png

    The other most common settings you will probably use are for Script tab which has further configurations you can test outlined here.

    upload_2018-1-28_14-32-11.png

    Above screenshot example of setting the web browser test' custom viewport to a higher resolution than default IIRC is 1280x1080, i.e. 1920x1080 use setViewportSize and navigate. You will need to start the test from Script tab page for it to take effect.

    The Webpagetest result page will return the mean average of the number of test runs in summary table with a link in brackets to the relevant result. In this case test run 1 was the mean average of 3 run test. Clicking (Run 1) link will jump to the actual test run to inspect/view.

    Note with Scripted runs you have yellow Script text dropdown which can reveal the scripted test runs parameters.

    upload_2018-1-28_14-34-4.png

    upload_2018-1-28_14-35-33.png

    Run 1 has the waterfall, screenshot and filmstrip view results which you can click through to see the details.

    The waterfall

    upload_2018-1-28_14-37-1.png

    On waterfall page each request listed is clickable to reveal further info and stats. Example clicking on index page request 1

    the details tab. Note the summary table's reported TTFB 0.477s is actually made up of times of DNS look up 25ms + Initial Connection 31ms + SSL Negotiation 43ms and Time to First Byte 362ms to total around 462ms or 0.462s or there abouts so when you see WPT reported TTFB in summary table know that DNS, SSL negotiation response time is factored into it.

    upload_2018-1-28_14-50-25.png

    The response header tab

    upload_2018-1-28_14-51-8.png

    The screenshot

    upload_2018-1-28_14-37-34.png

    The filmstrip

    Notice thumbnail size and interval parameters you can change size of screenshots and interval of display which defaults to 0.5 seconds, i usually change to 0.1 seconds and small/medium sized thumbnails. The WPT Speedindex metric in milliseconds of 963 in Run 1 results closely correlates to filmstrip's perceived visual start render time.

    upload_2018-1-28_14-39-20.png

    If you registered a Webpagetest user account, you can lookup test result history to compare results. As you can see there is a Label column which would show your custom labels if you had configured one

    upload_2018-1-28_14-43-55.png

    Summary

    I hope this overview of Webpagetest.org page speed tool's usage is useful to folks. I always use this before and after optimisation of a site and server to measure performance improvements and regressions over time. I also use this before and after moving web servers/web hosts. You can also use this for your sites on non-Centmin Mod LEMP servers before migrating sites to Centmin Mod LEMP based servers to measure improvements or regressions as well. Pair Webpagetest with load testing tools like wrk, will allow you to measure before and after optimisation/migration improvements to your web sites :D
     
    Last edited: Jan 28, 2018
    • Like Like x 1
    • Winner Winner x 1
  2. eva2000

    eva2000 Administrator Staff Member

    33,667
    7,454
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,459
    Local Time:
    2:06 PM
    Nginx 1.13.x
    MariaDB 5.5

    Using Google Lighthouse With Webpagetest.org



    Webpagetest.org also supports Google Lighthouse tool for Chrome browser tests. It supports web apps too but for general web site performance, we would be just focused on the sub test results for Performance, Accesibility, Best Practices and SEO. Note results will be different from Webpagetest.org as Google Lighthouse tool.

    For Webpagetest.org go to the Chrome tab in Advanced settings and check the box to Capture Lighthouse Report (Chrome only) and run the test from this tab.

    upload_2018-2-19_15-54-14.png

    On the results page top right corner, you will see a new performance indicator result button for Google Lighthouse with the score for Web App subtest result. You can ignore that score as we are focused on subtest results for Performance, Accessibility, Best Practices and SEO.

    lighthouse-cmm-calforinia-01.png
    Click the Lighthouse score button on top right (shows 55 in above screenshot) to reveal the Google Lighthouse report. Focus should be on the results for First meaningful paint, First Interactive, Perceptual Speed Index metrics.

    The Google Lighthouse Tool runtime environment configuration

    lighthouse-cmm-calforinia-00.png

    The Google Lighthouse Tool results.

    lighthouse-cmm-calforinia-03.png

    SEO results

    lighthouse-cmm-calforinia-04.png

    Webpagetest Emulate Mobile Browser



    You can also emulate mobile web browsers like Google Pixel 2, Samsung Galaxy S8 and iPhone 8 with a 3G connection speed profile. Seems only the Webpagetest tests use the emulate browser configuration while Google Lighthouse uses Nexus 5X emulation instead (see below runtime environment).

    lighthouse-cmm-calforinia-s8-00.png

    lighthouse-cmm-calforinia-pixel2-3g-01.png

    lighthouse-cmm-calforinia-pixel2-3g-02.png

    lighthouse-cmm-calforinia-pixel2-3g-03.png
     
..
Thread Status:
Not open for further replies.