Unit 6.1 · Tutorial 1

Web Performance Fundamentals

Chapter 17 · Advanced Topics

~2.5 hours Intermediate Core Web Vitals · Lighthouse · Bundling

Overview

Speed is a feature. This tutorial covers the fundamentals of web performance: measuring and optimising your application using Core Web Vitals, Lighthouse audits, bundle optimisation, code splitting, and lazy loading. You'll learn how to make your application faster and more responsive.

Why this matters: Performance directly impacts user experience, conversion rates, and SEO. A 100ms delay can reduce conversion by 7%. Optimising performance is essential for any production application.

1. Performance Metrics & Core Web Vitals

Core Web Vitals are Google's standard metrics for user experience:

LCP (Largest Contentful Paint): Loading performance. Time to render the largest content element. Target: < 2.5s.
FID (First Input Delay): Interactivity. Time from user interaction to browser response. Target: < 100ms.
CLS (Cumulative Layout Shift): Visual stability. Unexpected layout shifts. Target: < 0.1.
FCP (First Contentful Paint): First content appears. Target: < 1.8s.
TTI (Time to Interactive): Page becomes fully interactive. Target: < 5s.

                        // Measuring Web Vitals in JavaScript
                        import { onCLS, onFID, onLCP, onFCP, onTTFB } from 'web-vitals';

                        function sendToAnalytics({ name, value, id }) {
                        console.log(`Web Vitals: ${name} = ${value}`);
                        }

                        onCLS(sendToAnalytics);
                        onFID(sendToAnalytics);
                        onLCP(sendToAnalytics);
                        onFCP(sendToAnalytics);
                        onTTFB(sendToAnalytics);
                    

2. Lighthouse Audits

Lighthouse is an open‑source tool for auditing performance, accessibility, SEO, and more. Run it in Chrome DevTools or via CLI.

                        # CLI usage
                        npx lighthouse https://example.com --output html --output-path ./report.html

                        # With custom settings
                        npx lighthouse https://example.com --preset desktop --only-categories=performance
                    

Lighthouse performance categories:

Performance: LCP, FID, CLS, FCP, TTI, TBT (Total Blocking Time).
Accessibility: Semantic HTML, ARIA, contrast.
Best Practices: Security, modern standards.
SEO: Meta tags, robot rules.
PWA: Progressive Web App capabilities.

Tip: Run Lighthouse on every PR to track performance regressions using automated CI integration.

3. Bundling & Code Splitting

Bundlers (Webpack, Vite, Rollup) combine modules into optimised bundles.

Code splitting strategies

Route‑based: Each route loads its own chunk.
Component‑based: Large components (modals, charts) load on demand.
Vendor splitting: Third‑party libraries in separate bundles.

                        // React route-based code splitting
                        import { lazy, Suspense } from 'react';
                        import { BrowserRouter, Routes, Route } from 'react-router-dom';

                        const Home = lazy(() => import('./pages/Home'));
                        const Dashboard = lazy(() => import('./pages/Dashboard'));
                        const Settings = lazy(() => import('./pages/Settings'));

                        function App() {
                        return (
                        
                            Loading...
                    

}> } /> } /> } /> ); }

4. Lazy Loading & Async Patterns

Lazy loading defers loading of non‑critical resources until they're needed.

Image lazy loading

Dynamic imports with React

// Heavy component lazy loading const HeavyComponent = React.lazy(() => import('./HeavyComponent')); // With preloading const preloadHeavy = () => import('./HeavyComponent'); function MyComponent() { // Preload on hover return

; }

Quiz

Question 1

What is the target LCP (Largest Contentful Paint) for a good user experience?

Less than 1s
Less than 2.5s
Less than 5s
Less than 10s

Show answer

B. Less than 2.5s.

Question 2

Which of the following is NOT a Core Web Vital?

Show answer

D. TTI (Time to Interactive) is not a Core Web Vital.

Question 3

What is the purpose of code splitting?

To reduce the size of the initial bundle
To remove all unused code
To combine all files into one bundle
To minify JavaScript

Show answer

A. To reduce the size of the initial bundle.

Exercises

Exercise 1

Run a Lighthouse audit on a website of your choice. Record the Performance score and the three Core Web Vital metrics.

Sample answer

Website tested: example.com

Performance Score: 78/100
LCP: 2.1s (Good)
FID: 45ms (Good)
CLS: 0.05 (Good)

Improvements: Largest Contentful Paint could be reduced by optimising hero images.

Exercise 2

Write a React component that implements route‑based code splitting for a dashboard application with routes: Home, Analytics, and Settings.

Sample answer

                            import { lazy, Suspense } from 'react';
                            import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

                            const Home = lazy(() => import('./pages/Home'));
                            const Analytics = lazy(() => import('./pages/Analytics'));
                            const Settings = lazy(() => import('./pages/Settings'));

                            function App() {
                            return (
                            
                                
                                    Home
                                    Analytics
                                    Settings
                                
                                Loading page...
                        

}> } /> } /> } /> ); }

Homework

Homework 1

Analyse the performance of your capstone project using Lighthouse. Identify the top 3 performance issues and propose solutions. Then implement at least one optimisation (code splitting, lazy loading, or image optimisation).

Sample outline

Lighthouse Report: Current performance score and metrics.
Top issues: Largest Contentful Paint (hero image), Total Blocking Time (third‑party scripts), Cumulative Layout Shift (ad placeholders).
Solutions: Optimise images with WebP, defer third‑party scripts, add size attributes to images.
Implementation: Code splitting for the dashboard route.

Mini‑Project

Performance Audit & Optimisation

Take a medium‑sized web application (your capstone or a public demo) and:

Run a Lighthouse audit and document the results
Identify the top 5 performance bottlenecks
Implement code splitting for the largest routes
Add lazy loading for images
Re‑run Lighthouse and document the improvements

Sample outline

Initial Lighthouse score: 62/100
Bottlenecks: LCP (4.2s), TBT (350ms), CLS (0.15)
Implementations: Route‑based code splitting, lazy loading hero image, deferring analytics script.
Final Lighthouse score: 85/100

Web Performance Fundamentals

Overview

1. Performance Metrics & Core Web Vitals

2. Lighthouse Audits

3. Bundling & Code Splitting

Code splitting strategies

Webpack dynamic imports

4. Lazy Loading & Async Patterns

Image lazy loading

Dynamic imports with React

Quiz

Question 1

Question 2

Question 3

Exercises

Exercise 1

Exercise 2

Homework

Homework 1

Mini‑Project

Performance Audit & Optimisation

Tutorial Summary