Exercise: Tune Up a Slow Page

Fix the Movie Night Club page's HTML so it loads faster on a phone, and prove it with the Network panel, a Lighthouse report and the tests.

Journeyman · HTML · Web Development · Updated

The Movie Night Club's volunteers have a problem. Their page looks fine on the laptop it was built on, but people opening it on their phones at the bus stop say it's slow, the countdown to Friday's film never moves, and the browser tab has no icon. Nobody wants to touch the stylesheet or the script, and you don't need to: every problem is in the HTML. You'll measure the page, fix it, measure it again, and the tests will confirm each fix.

Before you start

You need VS Code with the Live Server extension, Node.js for the tests, and Chrome or Edge, whose developer tools have the Lighthouse panel. The setup lesson at the start of the course installs all of them. This exercise uses everything in this chapter, and the width, height and lazy loading from Image Dimensions and Lazy Loading.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into the folder where you keep your projects.

The folder holds:

  • index.html: the club's page, the file you'll fix.
  • countdown.js and style.css: a ready-made script and stylesheet. You don't need to read or change either one.
  • favicon.svg and favicon.png: the club's icon, ready to use.
  • posters/: six film posters, each 600 pixels wide and 900 tall.
  • measurements.txt: where you write your before and after numbers.
  • page.test.js and package.json: the tests. You don't need to change these.

Open the folder in VS Code, right-click index.html and choose Open with Live Server.

What to do

Here is the page's head as the club left it:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Movie Night Club</title>
  <script src="countdown.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap">
  <link rel="stylesheet" href="style.css">
</head>
  1. Measure first. Open the page in a private window. In the Network panel, tick Disable cache, choose Slow 4G, turn on the device toolbar for a phone-sized screen, and reload. Write the size transferred after 2) weightBefore: in measurements.txt. Then run a Lighthouse report (Navigation, Mobile, Performance) and write the score after 1) scoreBefore:. The README in the folder walks through each click.
  2. Unblock the script. countdown.js holds up the page and runs before the countdown's paragraph exists. Load it so it runs once the page is built.
  3. Give the page its icon. Link both icon files from the head, the SVG with its type.
  4. Connect early to the font's site. The font file comes from https://fonts.gstatic.com, which the browser only finds out about after the font's stylesheet arrives.
  5. Fix the posters. Give each one its width and height, and let every poster after the first wait until the visitor scrolls near it.
  6. Measure again, the same way, in a new private window. Write your numbers after 3) scoreAfter: and 4) weightAfter:.

Change only index.html and measurements.txt.

Check your work

Open VS Code's terminal (Terminal > New Terminal) and run:

npm install
npm test

You only need npm install once. At first, six of the seven tests fail. That's expected: each fix turns one green. The validator test passes from the start, and it's there to catch a typing mistake while you work, such as a closing tag on a <link>. When a test fails, its message says what it found, for example posters/pancake-planet.jpg is further down the page. Add loading="lazy", so it waits until the visitor scrolls near it.

Hints

  • Look before you fix. In the Network panel's list, which request has the status 404, and what is the browser looking for?
  • Which attribute fits the countdown? It needs the whole page, and Loading Scripts: defer, async and Modules has a table of which attribute suits which kind of script. One of them would make the countdown work only some of the time.
  • A preconnect names a site, not a file, and font files need one more attribute. Icons, Stylesheets and Resource Hints says which, and why.
  • The first poster is on the first screen. Lazy loading it would make the most important picture wait.
  • Watch each fix land. After each change, save, reload, and look at the Network panel's waterfall again: a request that moves earlier or disappears is your HTML at work.

When you're done

Every test passes. After your four numbers, npm test prints:

✔ 1) the countdown script no longer holds up the page (2.6408ms)
✔ 2) the page has a favicon, as an SVG with a PNG for other browsers (1.8707ms)
✔ 3) the browser connects early to the site that serves the font (1.4516ms)
✔ 4) every poster says its width and height (1.3894ms)
✔ 5) posters below the first one load lazily, and the first one loads right away (0.32ms)
✔ 6) the page passes the HTML validator (95.7178ms)
✔ 7) you recorded your numbers before and after (0.8562ms)
ℹ tests 7
ℹ suites 0
ℹ pass 7
ℹ fail 0

The countdown shows the time left until Friday's film, and the tab shows a yellow play button. Your numbers will be your own, but expect the same direction as ours: on a phone-sized screen the page went from 12 requests and 1.1 MB transferred to 9 requests and 547 kB, and its Lighthouse score from 77 to 85.

Then look back at the Lighthouse report after your fixes. It still lists Render-blocking requests and Improve image delivery. Which of them could more HTML fix, and which would need smaller poster files?

So what

You measured a page, changed a few attributes, and measured it again: the page now does about half the downloading on a phone, and the numbers prove it. That loop of measure, fix and measure again is how every slow site gets faster, from a club's page to a big shop's.

What's next

That's the end of Module 4. You can add pictures that load fast and look sharp on any screen, video and audio with captions, embeds from other sites, and a head that gets the important files moving early.

The module's project puts it all together: A Photo Gallery That Loads Fast on a Phone. You'll build a gallery of 12 or more photos of something you love (a trip, a pet, your city), each with a caption and alt text that helps, served in two or three sizes with a modern format, lazy loading below the first screen, and a short video with captions. Then you'll measure it on a phone-sized screen and bring its first load under the size the project sets. It's the kind of page you can send to a friend and have it open at once.

Module 5 makes your pages work for everyone. You'll use a page the way keyboard and screen-reader users do and fix what gets in their way, decide how your page looks in search results and when someone shares its link, and open the advanced end of HTML: how the browser repairs broken HTML, and reusable pieces built with templates and custom elements.

Key terms

Related