Performance Basics

Performance Is User Experience

A slow site can feel broken. Performance affects accessibility, mobile users, search visibility, and whether people stay long enough to use the page.

Performance is felt, not just scored. A perfect report number is less important than a page that loads, responds, and stays stable for real users.

Core Web Vitals In Plain Language

Core Web Vitals are performance measurements that focus on how a page feels while loading and responding. You do not need to memorize every detail to use them well.

What Usually Slows Student Sites

Image Performance Pass

The image optimization lesson covers image editing in more depth. In this lesson, focus on launch checks: file size, dimensions, loading behavior, and layout stability.

• Resize images so they are not much larger than they appear on the page.
• Compress images before publishing.
• Use modern formats like WebP when appropriate.
• Add width and height attributes so the browser can reserve space.
• Use loading="lazy" for images lower on the page.
• Do not lazy-load the main hero image if it is the first important visual content.

<img
  src="restaurant-card.webp"
  alt="Outdoor patio at Coastal Kitchen"
  width="800"
  height="600"
  loading="lazy"
>

Responsive Image Basics

One huge image file is rarely the best choice for every screen. Responsive images let the browser choose a better file for the current screen size.

You do not need to use srcset for every beginner project, but you should understand why a 3000px-wide image is wasteful inside a small card.

<img
  src="card-800.webp"
  srcset="card-400.webp 400w, card-800.webp 800w, card-1200.webp 1200w"
  sizes="(max-width: 700px) 90vw, 400px"
  alt="Featured cafe table near a window"
  width="800"
  height="600"
>

Font Loading

Fonts can add polish, but loading too many families or weights creates unnecessary page weight. Choose intentionally.

• Use one or two font families for most student projects.
• Load only the weights you use, such as 400 and 700.
• Avoid adding five Google Font styles just to experiment.
• Use system fonts when the design does not require a custom font.
• Always include fallback fonts so text stays readable while fonts load.

body {
  font-family: "Inter", Arial, sans-serif;
}

Script Performance

JavaScript can make a page interactive, but unused scripts slow the page down and make debugging harder.

• Only include scripts needed by the current page.
• Remove libraries that were tested but are no longer used.
• Avoid adding a large library for a tiny interaction when simple JavaScript would work.
• Use defer when loading a script from the head so HTML can keep parsing.
• Check the browser console after removing or moving scripts.

<script src="js/site.js" defer></script>

CSS And File Hygiene

CSS usually is not the biggest performance problem in beginner projects, but messy files can still slow development and make pages harder to maintain.

• Remove unused CSS from copied templates or experiments.
• Avoid including a giant framework for a small project unless the project actually uses it.
• Keep selectors understandable instead of making deeply nested rules.
• Use reusable classes for repeated patterns like buttons, cards, and sections.
• Delete unused images, videos, scripts, and duplicate files before launch.

Video And Embed Guidance

Videos, maps, social embeds, playlists, and large GIFs can make a page heavy very quickly. Use them when they support the content, not just as decoration.

DevTools Network Workflow

The Network panel helps you see what the page downloads. This is one of the fastest ways to find performance problems.

• Open the live or local page in Chrome.
• Open DevTools and choose the Network tab.
• Reload the page so the file list appears.
• Sort by Size to find the biggest files.
• Ask whether each large file is needed and whether it can be smaller.
• Check that CSS, JavaScript, images, fonts, and embeds are not loading twice.

Lighthouse Workflow

Lighthouse can help you compare before and after a change. Do not chase a perfect 100. Use the report to choose one real improvement.

• Run Lighthouse before making a performance change.
• Write down one issue you understand and can fix.
• Make one change, such as compressing a large image or removing an unused script.
• Run Lighthouse again and compare the result.
• Explain what changed and why it helped.

Performance Checklist

• Images are resized and compressed.
• Important images include width and height attributes.
• Below-the-fold images can lazy-load.
• The main hero image is not accidentally lazy-loaded.
• Fonts are limited to the families and weights the design uses.
• Unused scripts, libraries, embeds, and assets are removed.
• The page does not jump around while loading.
• The live site is tested on a phone-sized screen.
• DevTools Network has been checked for unusually large files.
• Lighthouse or PageSpeed Insights has been used to support one concrete improvement.