Responsive and Performance-Friendly HTML
Learn mobile-first structure, responsive media, lazy loading, resource hints, and HTML decisions that improve Core Web Vitals.
Learn mobile-first structure, responsive media, lazy loading, resource hints, and HTML decisions that improve Core Web Vitals. This hands-on tutorial focuses on practical implementation of responsive and performance-friendly html concepts.
Responsive and Performance-Friendly HTML
Good performance starts before CSS and JavaScript optimizations. HTML decisions strongly affect page speed, layout stability, and mobile usability.
Lesson Path
- Previous lesson: Modern HTML APIs and Elements
- In this lesson: You learn how HTML supports responsive design and faster loading experiences.
- Next lesson: HTML in React, Angular, and Next.js
1. Viewport Setup
Without the viewport meta tag, mobile browsers often render pages at desktop width and scale them down.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2. Responsive Media
HTML helps responsive design by:
- setting meaningful
widthandheighton images - using
<picture>for art direction - choosing the right media element for the job
- avoiding oversized assets
Providing width and height reduces layout shifts because the browser can reserve space before the asset loads.
3. Lazy Loading
Lazy loading defers non-critical media until it is needed.
<img src="feature.webp" alt="Feature preview" loading="lazy" />
Use it for:
- below-the-fold images
- non-critical iframes
- long landing pages with many visuals
4. Resource Hints
HTML also lets you guide the browser about important assets.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
Other useful hints:
preconnectfor third-party originsdns-prefetchfor early DNS lookupmodulepreloadfor JavaScript modules
5. Core Web Vitals Thinking
Good HTML decisions can improve:
- LCP: prioritize hero content and critical images
- CLS: reserve space for images, embeds, and ads
- INP: keep the page simple and reduce unnecessary interaction delays
Responsive Hero Section
Build a responsive hero section with a viewport-friendly structure, reserved image space, and performance-friendly image loading.