Skip to main content

Lab-2-2

(2.5% of the course mark)

WebPageTest Web App Testing​

  • This lab introduces students to performance testing of web pages using WebPageTest.org, a free tool for analyzing website speed, performance, and user experience. The lab focuses on testing a website from different geographic locations and browsers, analyzing key performance metrics like First Contentful Paint (FCP), Time to Interactive (TTI), and Largest Contentful Paint (LCP). Students learn how to identify bottlenecks and optimize performance for faster load times.

Lab objectives​

  • Run performance tests using WebPageTest with custom configurations. ie: Browser, Device, and Location.

  • Interpret performance metrics such as load time, FCP, LCP, TTI, and Speed Index.

  • Analyze waterfall charts to understand resource loading behavior and identify bottlenecks.

  • Identify and prioritize performance issues like render-blocking resources, large image files, and excessive third-party scripts.

  • Generate and download performance reports for documentation and improvement tracking.

  • Apply basic optimization techniques based on WebPageTest results. ie: Image compression, Lazy Loading, and Caching.

  • Compare performance across different test runs or versions of a web page.

  • Present findings in a structured report highlighting key issues and recommendations.

WebPageTest - Simple Configuration​

  1. Open your browser and navigate to https://www.webpagetest.org.

  2. Set the website url by entering https://www.georgebrown.ca and choose the same setting below.

webpagetest-setting

  1. Click on Start Test to initiate the web app testng.

  2. The testing will take a few moments. The results will be displayed immediately afterward.

webpagetest-status
  1. Scroll to to view the results and take a screenshot of the following sections.

  • Performance Summary, name it performance-summary.png.

  • Page Performance Metrics, name it page-performance-metrics.png.

  • Real-World Usage Metrics, name it real-world-usage-metrics.png.

tip

  • On the top of the results page, change the report view to Opportunities & Experiments to see recommendations and tips for improving your web app's load times.

  • Feel free to try the WebPageTest - Advanced Configuration test and customize the test settings based on the available options.

webpagetest-advanced

Submission​

  1. Create a folder named submit.

  2. Copy all (performance-summary.png, page-performance-metrics.png, and real-world-usage-metrics.png) the previously saved screenshots to this folder.

  3. Create a zip file of this folder.

  4. Navigate back to where the lab was originally downloaded, there should be a Submissions section (see below) where the zip file can be uploaded.

submission