HTML Advanced/Module 18 — Professional Development/Lesson 61
🏆 Module 18 · Professional Dev🔴 AdvancedLESSON 61

Performance Optimization

⏱️ 16 min read
📖 Theory + Code
🧩 5 Quiz Questions
🏗️ 1 Challenge
Course progress96%
🎯 What you'll learn: Auditing with Lighthouse, lazy loading, image optimization, and render-blocking resources.
Section 1

Lighthouse

Lighthouse (built into Chrome DevTools) audits a page and scores Performance, Accessibility, Best Practices, and SEO, with specific, actionable suggestions for each. It's the standard first step for diagnosing why a page feels slow.

Section 2

Lazy Loading & Image Optimization

You met loading="lazy" back in the Responsive Images lesson — it defers offscreen images until they're about to enter the viewport, dramatically cutting initial load weight on image-heavy pages. Combine it with modern formats (WebP) and correctly-sized files (not a 4000px image displayed at 400px) for the biggest wins.

lazy-loading.html
HTML
<img src="gallery-photo.webp" loading="lazy"
     width="400" height="300" alt="Gallery photo">
💡
Always set width/height on images
Even with responsive CSS, explicit width/height attributes let the browser reserve the right amount of space before the image loads — preventing layout shift as content jumps around.
Section 3

Render-Blocking Resources

CSS in the <head> blocks rendering until it downloads — necessary since the browser needs styles before painting, but it means large stylesheets delay first paint. Scripts without defer/async block HTML parsing itself, as covered in the Script Tag lesson.

TechniqueEffect
loading="lazy" on imagesDefers offscreen image downloads
defer / async on scriptsPrevents scripts from blocking HTML parsing
Explicit width/heightPrevents layout shift while images load
Minifying/compressing assetsReduces file transfer size
⚠️
Everything you've learned connects here
Responsive images, script loading attributes, and semantic structure all directly feed into your Lighthouse score — performance isn't a separate skill, it's the payoff of everything else in this course.
🧩 Knowledge Check — Lesson 61
5 questions to test your understanding.
1. What does Lighthouse audit?
2. What does loading="lazy" primarily reduce?
3. Why should you set explicit width/height on images?
4. What makes a script "render-blocking" by default?
5. Is performance optimization a separate skill from the rest of this course?
💪
Coding Challenge — Lesson 61
Apply what you learned · Advanced Level
Challenge: Optimize an Image Gallery

Rewrite a gallery of 6 <img> tags (each missing width/height/loading) to include correct width="300" height="200", loading="lazy" (except the first, above-the-fold image), and descriptive alt text.
💡 Show hints if you're stuck
  • The very first, visible-on-load image usually should NOT be lazy — it needs to appear immediately.
Finished this lesson?
Mark it complete to track your progress.
🎉

Lesson 61 Complete!

You can now diagnose and fix real performance issues. One final lesson to go — Website Deployment!

Lesson 61 of 62Module 18 — Professional Development