HTML Course 18.5 Performance checklist related to HTML

1. Proper Meta Tags

Ensure essential meta tags are placed at the top of the <head> to guarantee correct character encoding, viewport scaling, and compatibility.

• Place <meta charset> before any other tags or scripts.
• Use a single, concise viewport declaration.
• Avoid duplicate or conflicting meta tags.

2. Resource Hints

Use preconnect, dns-prefetch, preload and prefetch to instruct the browser how to prioritize fetching of critical resources.

• dns-prefetch for third-party domains you will contact soon.
• preconnect to warm up TCP/TLS handshakes.
• preload for critical CSS, fonts, images or scripts needed immediately.
• prefetch for resources likely needed on subsequent navigation.

3. Minimize Render-Blocking Resources

Defer or asynchronously load JavaScript, and inline or split CSS so it doesn’t block initial rendering.

• Inline above-the-fold CSS and load the remainder asynchronously (media='print' hack).
• Add defer to scripts that depend on the DOM but aren’t needed immediately.
• Use async for truly independent third-party scripts.

4. Optimize Images

Serve appropriately sized, compressed, and next-gen format images. Use responsive markup to select the right image for each device.

• Compress images with tools like ImageOptim or mozjpeg.
• Use <picture> for art direction or multiple formats.
• Specify width and height to reserve layout space and avoid reflow.

5. Lazy Loading

Defer offscreen images, iframes or heavy components until they are close to the viewport.

• Use loading='lazy' on <img> and <iframe>.
• Polyfill for browsers without native support.

6. Font Loading Strategies

Minimize flash of invisible text (FOIT) or flash of unstyled text (FOUT) by preloading critical font files and controlling font-display.

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont.woff2') format('woff2');
  font-display: swap; /* Fallback text shows until font loads */
}
  

• Use preload for the most critical font weights.
• Set font-display: swap to avoid invisible text.

7. DOM Size and Structure

Avoid deeply nested or overly large DOM trees. Keep markup semantic and flat where possible.

• Limit total number of elements (ideally under 1,500 per page).
• Use semantic tags (<header>, <main>, <article>). Avoid unnecessary <div>s.
• Group repeated elements (e.g., lists) instead of separate containers.

8. Accessibility and Performance

Accessible markup often improves performance: proper use of ARIA, alt attributes, <button> vs. clickable <div>, etc.

• Always use alt on <img> to avoid layout shifts and improve crawlers.
• Prefer native controls (<button>, <a>) over role='button' hacks.
• Reduce JS polyfills for old screen reader-only features if modern browsers suffice.

9. Testing & Monitoring

Continuously measure performance using automated tools and real user monitoring.

• Automated audits: Google Lighthouse, WebPageTest, PageSpeed Insights.
• Real User Monitoring (RUM): capture Core Web Vitals from visitors.
• Set performance budgets and track asset size, server response times, and largest contentful paint (LCP).