Why performance matters
A slow website feels broken even if the code is correct. Performance affects trust, engagement, accessibility, conversion, and search visibility.
Images
Images are often the largest assets. Use appropriate dimensions, compression, modern formats, lazy loading, and width and height attributes. Reserve lazy loading for images below the initial viewport: the main hero image usually needs to load promptly.
CSS and JavaScript
Avoid loading code you do not need. Use defer for scripts that do not need to block page parsing. Keep third-party scripts deliberate because each dependency can add network work, execution time, and failure risk.
Fonts
Custom fonts can improve branding but slow rendering. Use limited families and weights. A design that downloads five font weights when it only uses two is spending bandwidth without improving the interface.
Measure meaningful outcomes
Use browser DevTools and Lighthouse to identify actual issues before optimising. Largest Contentful Paint (LCP) reflects how quickly the main visible content appears. Cumulative Layout Shift (CLS) reflects unexpected movement. Interaction to Next Paint (INP) reflects responsiveness after a user interaction. Measure first, change one cause, and measure again.
Read the network waterfall
The Network panel shows which files load, their size, and how long they take. Sort by size to find heavy assets. Look for missing files, duplicated requests, and resources that load before they are needed. Performance work becomes more reliable when it is based on evidence.
Example code
<img
src="course-preview.webp"
width="900"
height="560"
loading="lazy"
alt="Course dashboard preview">
<script defer src="/js/main.js"></script>Applied example: responsive image markup
A responsive image can give the browser more appropriate file choices while reserving layout space.
<img
src="project-preview-900.webp"
srcset="
project-preview-480.webp 480w,
project-preview-900.webp 900w
"
sizes="(max-width: 640px) 100vw, 50vw"
width="900"
height="560"
loading="lazy"
alt="Responsive portfolio project homepage preview">Guided example: how to approach this lesson
Use these steps as a practical build process. The goal is not just to read the concept, but to know exactly how to apply it in your own page.
Step 1: Measure first
Use DevTools or Lighthouse to identify the real performance issues before changing code.
Step 2: Optimise large files
Large images, unused JavaScript, heavy fonts, and unnecessary libraries are common causes of slow pages.
Step 3: Retest after changes
Optimisation should be measured. Confirm whether the page actually loads or responds faster.
More examples
Compare these examples carefully. The improved version shows the kind of code pattern you should aim for when building your own project.
Poor image usage
<img src="huge-photo.jpg" alt="Student learning code">This gives the browser no size information and may load a very large image.
Better image usage
<img
src="student-learning.webp"
width="900"
height="560"
loading="lazy"
alt="Student learning code on a laptop">This uses a modern format, reserves layout space, and lazy-loads non-critical imagery.
Before moving on
Use this checklist to make sure you understand the lesson well enough to apply it without copying blindly.
- Are images resized and compressed?
- Do images include width and height?
- Are non-critical scripts deferred?
- Have you measured before and after optimisation?
Common mistakes to avoid
- Uploading huge images.
- Loading blocking scripts unnecessarily.
- Using too many font weights.
- Not setting image dimensions.
Practice task
Run a before-and-after performance review on your deployed project.
Required outcome
- Use the Network panel to record the three largest transferred assets.
- Optimise at least one image and add explicit width and height attributes.
- Review script loading and defer one non-critical script where appropriate.
- Run Lighthouse or a comparable browser audit before and after the change, then record what improved.
Stretch goal: Add responsive image sources and verify which file the browser downloads at a narrow viewport.