Web performance fundamentals
You measure Core Web Vitals with Lighthouse and developer tools and make pages measurably faster with image, font, script and caching improvements.
Level 301 · 18 lessons · 15 practice labs
Lessons
Measuring
- Why speed matters and how it is perceived
- Core Web Vitals: LCP, INP and CLS
- Lab data and field data
- Running Lighthouse and reading the report
- Reading the waterfall chart
- Short task: record a site’s speed baseline
Improving
- Optimising images
- Optimising fonts
- Reducing and deferring scripts
- The cost of third-party scripts
- Caching and compression
- Improving LCP
- Fixing layout shift
- Reducing interaction delay
- Short task: speed up a product page
Keeping it fast
- Performance budgets
- Real-user monitoring: web-vitals
- Capstone: measure and speed up a news site
Practice labs
- Pick three priorities from a Lighthouse report: Read a stationery shop's Lighthouse report and pick the three changes that will gain the most.
- Find the waiting chain in a waterfall: Find the chain of requests waiting on each other in the waterfall and explain what delays the main content.
- Reconcile lab and field data: Explain an LCP that looks good in Lighthouse but bad in field data by examining device, network and cache differences.
- Shrink an oversized hero image: Re-export a 4 MB hero image at the right size in a modern format and measure the change in load time.
- Fix text hidden while fonts load: Fix headings that stay blank until the font loads with font-display, preloading and subsetting.
- Halve the image weight of a listing page: Cut the total image weight of a property listing page by more than half with responsive images and lazy loading.
- Defer a blocking script in the head: Defer an analytics script loaded synchronously in the head and measure the difference in first paint.
- Measure third-party script costs: Block chat, ad and map scripts one at a time and tabulate each one's load and interaction cost.
- Strip unused JavaScript: Find unused code in the main bundle with the coverage panel and shrink the first load by splitting it per page.
- Reserve space for a shifting ad slot: Reserve space in advance for an ad slot that pushes content down when it loads, and lower CLS.
- Load the LCP element early: Find the LCP element on a product page and cut its time by raising its priority and breaking the chain delaying it.
- Speed up the add-to-cart click: Bring an INP over 500 ms on "Add to cart" below 200 ms by splitting long tasks and deferring work.
- Write a performance budget for a home page: Prepare a budget file with JS, image and LCP limits for a news site's home page.
- Collect field data with web-vitals: Add the web-vitals library to a page and send LCP, INP and CLS to the lab's collection endpoint.
- Catch a change that breaks the budget: Hook the budget check into the build and show that a change adding a large library stops the build.
About this course
You measure Core Web Vitals with Lighthouse and developer tools and make pages measurably faster with image, font, script and caching improvements.
What you will learn
- Measuring
- Improving
- Keeping it fast
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.