Lesson 5, Topic 3

In Progress

← Previous Next→

Performance Optimisation and SEO Essentials

isaac March 12, 2026

Lesson Progress

0% Complete

Modern websites must be fast, accessible, and easy to find. Performance and SEO (Search Engine Optimisation) overlap heavily: many changes that improve speed and user experience also help search rankings.

This topic focuses on practical steps you can apply to most projects, whether you use plain HTML/CSS/JS or a framework.

1) Why Performance and SEO Matter (Production Mindset)

Performance impacts:

User experience (people leave slow sites)
Conversion rates (sign-ups, sales, enquiries)
Accessibility (slow, heavy pages are harder to use on low-end devices and poor networks)
Cost (less bandwidth and fewer server resources)

SEO impacts:

Discoverability (being found via Google and other search engines)
Trust and credibility (well-presented search results)
Long-term traffic (organic traffic can be more sustainable than ads)

In production, you should aim for:

Fast loading and responsiveness
Stable layout (no jumping content)
Clear, crawlable content structure
Correct metadata and technical setup

2) Core Web Vitals (CWV) Basics

Core Web Vitals are Google’s user-experience metrics that focus on loading speed, interactivity, and visual stability.

Key metrics (what they mean)

LCP — Largest Contentful Paint
- Measures how quickly the main content (often a large image or heading section) becomes visible.
- Good LCP usually comes from optimising images, reducing render-blocking resources, and using caching/CDNs.
INP — Interaction to Next Paint (replaces FID in modern guidance)
- Measures how responsive the page feels when users interact (click, type, tap).
- Good INP usually comes from reducing heavy JavaScript work, breaking up long tasks, and avoiding unnecessary re-renders (in frameworks).
CLS — Cumulative Layout Shift
- Measures layout stability (how much content shifts around while loading).
- Good CLS comes from setting image/video dimensions, reserving space for dynamic content, and avoiding late-loading fonts and banners that push content down.

How to measure CWV (practical tools)

Chrome DevTools → Lighthouse: quick audits for performance and SEO.
Chrome DevTools → Performance tab: deeper investigation of slow scripts and layout shifts.
PageSpeed Insights: combines lab data (simulated) with field data (real users) when available.
WebPageTest: advanced testing, including different network speeds and locations.

Tip: Always test on a mobile profile and on a slow network. A site that feels fast on fibre can still be slow on 4G.

3) Image and Asset Optimisation (Biggest Wins, Fastest)

Images are often the largest files on a page. Optimising them usually gives immediate improvement.

Choose the right image format

AVIF / WebP: modern formats with much smaller file sizes than JPEG/PNG.
JPEG: good for photos (older format).
PNG: good for transparency, but often larger.
SVG: ideal for logos and icons (vector, scales cleanly).

Resize images correctly

Do not upload a 4000px wide image and display it at 400px. Instead:

Export images close to the maximum display size needed.
Provide responsive sizes using srcset and sizes.

Example (responsive image):

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 1200px"
  alt="A person using a laptop at a desk"
/>

Compress assets

Use build tools or image pipelines to compress images.
Minify CSS and JavaScript in production builds.

Optimise fonts

Fonts can slow down rendering.

Use fewer font families and weights.
Prefer WOFF2.
Consider self-hosting fonts to reduce third-party calls.
Use font-display: swap; so text appears quickly even if the font is still loading.

Example:

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-display: swap;
}

4) Caching Essentials (Browser + Server + CDN)

Caching reduces repeated downloads and improves returning visits.

Browser caching (HTTP headers)

Your server can tell the browser to keep files for longer:

Good for versioned assets like app.3f2a1c.js or styles.91bd.css
Risky for non-versioned files if you update them often (users may keep old copies)

Common headers/concepts:

Cache-Control: max-age=...
ETag and If-None-Match (validation)
Last-Modified and If-Modified-Since

A typical approach:

Long cache for versioned assets (months)
Short cache for HTML (minutes) so updates appear

CDN caching

A CDN (Content Delivery Network) stores copies of static assets closer to users. Benefits:

Faster load times (lower latency)
Reduced load on your main server
Better reliability during traffic spikes

5) Lazy Loading and Loading Strategy

Lazy loading means loading content only when it’s needed, rather than loading everything upfront.

Lazy-load images below the fold

Modern browsers support:

<img src="gallery-1.webp" loading="lazy" alt="Gallery item" />

Use lazy loading for:

Images in long pages
Off-screen iframes (maps, embedded videos)

Be careful:

Do not lazy-load the main “hero” image at the top of the page. That can hurt LCP.

Reduce render-blocking

To improve initial load:

Keep critical CSS small
Defer non-critical JavaScript

Examples:

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

defer loads the script without blocking HTML parsing and runs it after the document is parsed.

Preload important resources (use carefully)

Preloading can improve LCP if used correctly:

<link rel="preload" as="image" href="/images/hero.webp">

Only preload truly critical assets; too many preloads can slow everything down.

6) Metadata Essentials (What Search Results Show)

Metadata helps search engines understand your pages and improves how links appear when shared.

Basic meta tags

Add these in the <head>:

<title>Affordable Web Design in Cape Town | Example Studio</title>
<meta name="description" content="We build fast, accessible websites for small businesses. Get a quote in 24 hours.">
<meta name="viewport" content="width=device-width, initial-scale=1">

Guidelines:

Title: unique per page, clear and relevant.
Description: short summary that encourages clicks.
Avoid duplicate titles/descriptions across multiple pages.

Open Graph and social sharing

<meta property="og:title" content="Affordable Web Design in Cape Town">
<meta property="og:description" content="Fast, accessible, mobile-first websites.">
<meta property="og:image" content="https://example.com/social-card.png">
<meta property="og:url" content="https://example.com/">
<meta name="twitter:card" content="summary_large_image">

7) Structured Content and Technical SEO Foundations

SEO is not only keywords. Search engines need clean structure and crawlable pages.

Use semantic HTML (helps accessibility and SEO)

Use headings in order: h1 → h2 → h3
Use landmarks: <header>, <nav>, <main>, <footer>
Use lists for list content, tables for truly tabular data

This improves:

Screen reader navigation
Content understanding by search engines

Clean URLs

Prefer readable URLs:

Good: /services/web-development
Avoid: /page?id=123&ref=abc (not always bad, but harder to read and share)

Canonical URLs (avoid duplicate content issues)

If the same content can appear on multiple URLs, declare the preferred one:

<link rel="canonical" href="https://example.com/services/web-development">

Robots directives (control indexing)

robots.txt: tells crawlers what they may crawl
<meta name="robots" content="noindex">: tells crawlers not to index a page (useful for staging or admin areas)

Important: Do not accidentally block your whole site.

XML sitemap

A sitemap helps search engines discover pages.

Most frameworks and CMSs can generate this.
Submit it in Google Search Console.

Mobile-first and responsive

Google primarily evaluates the mobile version of your site. Ensure:

Responsive layout
Readable text sizes
Buttons/links are easy to tap
No horizontal scrolling

8) Performance Optimisation Checklist (Practical)

Use this as a “production readiness” check:

Images

[ ] Correct dimensions for display
[ ] Modern format (WebP/AVIF where possible)
[ ] Compressed
[ ] alt text included
[ ] Lazy loading only for below-the-fold images

CSS

[ ] Minified in production
[ ] Remove unused CSS where possible
[ ] Keep critical CSS small

JavaScript

[ ] Minified and bundled (as appropriate)
[ ] Avoid large dependencies unless needed
[ ] Use defer/async appropriately
[ ] Break up long tasks and avoid heavy work on page load

Caching

[ ] Long cache headers for versioned assets
[ ] Short cache for HTML
[ ] CDN for static assets (if available)

SEO

[ ] Unique <title> and meta description per page
[ ] Structured heading order and semantic HTML
[ ] Clean URLs and internal linking
[ ] Sitemap and robots configured correctly
[ ] Canonical tags where needed

9) Common Mistakes to Avoid

Uploading huge images and relying on CSS to shrink them.
Lazy-loading the hero image (hurts LCP).
Adding many third-party scripts (chat widgets, trackers) without performance review.
Using non-semantic HTML for everything (e.g. many <div> tags with no structure).
Forgetting metadata or duplicating it across pages.
Blocking crawlers on production with robots.txt or noindex by accident.
Ignoring mobile testing and slow-network testing.

10) Mini Practical: Quick Audit and Improvements

Run Lighthouse in Chrome DevTools for Performance and SEO.
Identify top issues (often images, render-blocking assets, unused JS/CSS).
Apply two improvements:
- Convert and compress the largest image to WebP/AVIF
- Add/update <title>, meta description, and Open Graph tags
Re-run Lighthouse and compare scores and key metrics (LCP/CLS/INP indicators).

Deliverable: a short note explaining:

What you changed
Which metric(s) improved
Any remaining warnings you will address later (e.g. third-party scripts)

Performance and SEO are ongoing work, not once-off tasks. Each feature you add should be evaluated for its impact on speed, stability, accessibility, and crawlability, especially before deployment.

Website Development: From Fundamentals to Deployment

Participants 8