Page Performance: Page Load Time and Size
Overview
Web pages should be as light weight as possible to support faster load times which promotes a positive user experience (UX). This learning activity will make you aware of some statistics that web developers should know.
"The faster your website's load time is, the happier your visitors will be. In other words —
when you optimize your web page's load time, you can expect to see improvements in user experience,
conversion rates, and ultimately, sales revenue." - Kristen Baker - Hubspot
Prepare
- Web Performance Overview - 🎦 The ultimate guide to web performance - Beyond Fireship
- Layout Shift - 🎦Cumulative Layout Shift (CLS): What It is & How to Optimize Your Website for it - Elegant Themes
Activity Instructions
- Open your course homepage.
- Run Lighthouse in DevTools.
- Review the Performance report.
- Review the Diagnostics section within Performance.
- Are there any messages labeled "Avoid large layout shifts"? Which element or elements do are referenced? Do you know why? Discuss on MS Teams general channel.
- Now, open the Network tab in DevTools.
- Empty the cache and hard refresh the page. Why do we want to do this? Sometimes we want to simulate a first time visitor to the page/site. This is important because the browser will cache files and resources to improve performance. However, we want to make sure that the page loads quickly for first time visitors and do some measurements of page resource size.
- In the Network tab in DevTools, note the total kB or MB transferred when
the page is refreshed. Our dev standard goal in the class is to keep that number below
500 kiloBytes.
Typically the page size can be reduced by optimizing images and removing unused CSS and JavaScript.
To empty the cache and hard refresh the page, open the DevTools, right-click on the refresh
button, and select "Empty Cache and Hard Reload". You can also disable cache temporarily in
the network tab.