• Try “portfolio”, “ink”, “branding” or a code like “PRS 101”.

DMW 204Digital Media and Web Development

Website Performance Fundamentals

Make image-heavy portfolio sites load fast: Core Web Vitals, lab and field measurement, image formats and responsive images, fonts, scripts, caching and a performance budget.

Planned

About this course

Portfolio sites are image-heavy, which makes them slow by default. This course explains why speed matters to visitors and search, and how Google's Core Web Vitals measure loading (Largest Contentful Paint), responsiveness (Interaction to Next Paint) and visual stability (Cumulative Layout Shift), with 'good' thresholds assessed at the 75th percentile of page loads. You will measure with lab tools and field data, then fix the usual problems: oversized images, missing responsive image markup, layout shifts, heavy fonts, third-party scripts and embeds, and caching. You finish by setting a performance budget and producing a before-and-after report on a real site.

Who it’s for: Artists and designers who run their own websites. Introduction to Web Design (or basic HTML and CSS) is required; site-builder users can complete most lessons.

You will be able to

  • Explain the three Core Web Vitals and their 'good' thresholds.
  • Measure a page with lab tools and interpret available field data.
  • Serve appropriately sized, modern-format, responsive images without layout shift.
  • Reduce the cost of fonts, scripts and embeds on a page.
  • Set a performance budget and report before-and-after improvements.

Prerequisites

Studio project

A measured before-and-after optimization of a real site with a performance budget and a clear report.

To complete this course

  • Complete every required lesson.
  • Have the assignment “Before-and-after performance report” accepted by an instructor.
  • Records of completion are issued only for courses whose content has passed instructor review.

Part of

Syllabus

Working titles: they may change as the course is written.

  1. Module 1: Measuring performance

    Knowing what to measure and how.

    1. 1.1Why performance mattersReading · 20 min
    2. 1.2Core Web Vitals: LCP, INP and CLSReading · 35 min
    3. 1.3Lab and field dataExercise · 40 min

  2. Module 2: Images and media

    The biggest wins on portfolio sites.

    1. 2.1Image formats and compressionExercise · 40 min
    2. 2.2Responsive images and preventing layout shiftExercise · 40 min
    3. 2.3Video and third-party embedsReading · 25 min

  3. Module 3: Fonts, scripts and hosting

    Reducing what the browser has to download and run.

    1. 3.1Web font performanceReading · 30 min
    2. 3.2Scripts and third partiesReading · 30 min
    3. 3.3Caching and CDNsReading · 25 min

  4. Module 4: Performance budgets

    Keeping a site fast over time.

    1. 4.1Setting a performance budgetExercise · 30 min
    2. 4.2Studio: before-and-after optimizationStudio · 60 min

Sources

  • Web Vitals · Google (web.dev) · accessed 2026-11-04

Author: Ricketts University curriculum team (draft for founder review) · Not yet reviewed

Related courses

  1. DMW 101

    Digital File Organization

    Stop losing files: folder structures, naming conventions, versioning, backups you have actually tested, metadata, archiving and clean client handoffs.Digital Media and Web Development    Foundation9 lessons · ~8 hPlanned
  2. DMW 102

    Introduction to Web Design

    How websites work and how to design them: HTML structure, CSS, responsive layout with flexbox and grid, web typography, navigation and images, ending with a published page.Digital Media and Web Development    Foundation11 lessons · ~20 hPlanned
  3. DMW 103

    Photography for Artists

    Photograph your artwork accurately with a phone or camera: exposure, white balance, lighting flat and glazed work, 3D pieces, process and installation shots, editing and export.Digital Media and Web Development    Foundation11 lessons · ~14 hPlanned
Back to the full catalogue