⚡ Advanced HTML

Performance Basics

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can load scripts without blocking the page, lazy-load images, reserve space to prevent layout jumps, and explain why lean HTML matters for real users.

A fast page isn't a luxury — for someone on a budget phone and a patchy 3G connection, it's the difference between using your site and giving up. Plenty of speed comes from a few HTML habits. You've already met some; here we pull the performance ones together.

1Load scripts without blocking

By default, when the browser hits a <script> tag it stops building the page to download and run it. A few scripts in the <head> can leave the user staring at a blank screen. Two attributes fix this:

AttributeWhat it doesUse for
deferDownload in the background, run after the page is parsed (in order).Most scripts — the safe default.
asyncDownload in the background, run as soon as it arrives (any order).Independent scripts like analytics.
<script src="app.js" defer></script>
Rule of thumb: reach for defer almost always. The page renders immediately and your script still runs once everything's ready.
Key points
  • A plain <script> blocks page rendering while it downloads and runs.
  • defer runs scripts after parsing, in order — the safe default for most scripts.
  • async runs as soon as the script arrives, in any order — good for independent things like analytics.

2Lean images and no layout jumps

Images are usually the heaviest thing on a page, so the wins from the Images lesson are also your biggest performance wins:

  • loading="lazy" — off-screen images download only when the user scrolls near them. Huge on long, image-heavy pages.
  • Right-sized files — never send a 4000-pixel photo to display at 400 pixels. Resize and compress.
  • Set width and height — this reserves the correct space so the page doesn't jump as images load. That annoying shift where you go to tap something and the page lurches? This prevents it.

Lean markup, fewer requests

Every file the page loads is a round trip. Keep markup tidy, avoid loading the same library twice, and don't pull in a giant framework for one small effect. On a fast laptop you'd never notice; on a ₹6,000 phone on rural 3G, it's the whole experience.

Professionals measure this with Core Web Vitals — Google's metrics for loading speed, interactivity and visual stability (that 'no jumping' rule is one of them). The habits here move all three in the right direction.
Key points
  • loading="lazy" defers off-screen images — a big saving on image-heavy pages.
  • Send right-sized, compressed images; never a giant file scaled down in the browser.
  • Set width and height to reserve space and stop the page jumping as it loads.
  • Lean markup and fewer requests matter most on cheap phones and slow networks.

★ Practical: tune a page for speed

Write or adjust markup so that:

  1. A <script> uses defer so it doesn't block rendering.
  2. Below-the-fold images use loading="lazy".
  3. Each <img> has width and height set.
  4. Note one thing you could remove to cut a network request.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Meta Tags & Open Graph
Next →
Introduction to CSS