WDD 231: Web Frontend Development I

UX: Page Performance

Overview

Web pages should be as lightweight as possible to support faster load times, which is crucial for promoting a positive user experience (UX). In this learning activity, you will gain awareness of key metrics that web designers and developers should know to optimize their web pages effectively. By understanding performance data, developers will be better equipped to implement strategies for improving page performance and enhancing the overall user experience and engagement.

Prepare

1. Read this article on User-centric performance metrics. In the article, focus on these UX basic questions and how they might be measured:
   • "Is it happening? Did the navigation start successfully? Has the server responded?
   • "Is it useful? Has enough content rendered that users can engage with it?
   • "Is it usable? Can users interact with the page, or is it busy?
   • "Is is delightful? Are the interactions smooth and natural, free of lag and jank?
   Consider these objective metrics, considered in aggregate, while acknowledging user perception metrics:
   • First Contentful Paint (FCP): time to any part of a render of a page.
   • Largest Contentful Paint (LCP): time to when the largest text block or image is rendered.
   • Cumulative Layout Shift (CLS): a cumulative score of all unexpected layout shifts.

   There are additional metrics that are important to consider if you want to dig deeper into this field, such as interaction latency, runtime responsiveness, smoothness, total blocking time, and time to first byte. These metrics may also be useful in seeking to evaluate and improve page performance.

2. You have used the Google Lighthouse tool, that is integrated into DevTools, in your prior work in this course and prerequisite work. This audit tool generates reports on performance metrics, as well as accessibility, best practices, and Search Engine Optimization (SEO). You have already been running this tool and it is used in many of the assignment rubrics.
   
   ✅Use this reference, Lighthouse Performance Audit as you work to improve your pages' performance score.

   Another comparable tool that is geared towards analyzing the performance of live web pages and providing optimization suggestions is the online PageSpeed Insights application on web.dev.

3. Here are a few of the specific diagnostic methods that have already used in prior coursework or to consider to improve page performance:
   • Optimize images, properly size images, and consider next generation image formats
   • Set an explicit width and height on image elements to reduce layout shifts and improve CLS.
   • Defer offscreen images and content including using lazy loading and other methods.
   • Use a Content Delivery Network (CDN)
   • Avoid excessive DOM sizes
   • Reduce unused CSS and unused JavaScript.
   • Reduce the scope and complexity of style calculations

Activity Instructions

1. In your browser, start an incognito window or private browsing session.
2. Navigate to the old Church url of: https://lds.org. Why does this URL redirect to a new domain?

   Note the domain name forwarding service changes the URL to https://churchofjesuschrist.org.
   (In addition, your preferred language parameter may be part of the URL's querystring with a name-value pair, e.g., ?lang=es)

3. How long did the page take to render the actionable Sign In button from your end-user perspective?
4. Open the browser's DevTools on this page to check the performance using metrics.
5. Run a audit on the page by using the Performance tab and clicking the reload button.

   

   

6. Use the screenshot timeline to find out how long it took to finally render the Sign In button. You can do this visually.

   

7. Using the Lighthouse tool, select the Mobile device and turn on the Performance category and then click Analyze page load.
8. Review the Performance metrics and the diagnostics.
   Is there anything that you might suggest as low hanging fruit to have fixed?
9. Post a comment or respond to a post in Microsoft Teams.
10. Evaluate your own work for page load using these page performance tools.