Roadmap › HTML5 & CSS3 — Semantic Markup to Responsive Layouts › Module: Modern CSS and Frameworks
Lessons in this course (11)
11. Performance and SEO for HTML/CSS
AdvancedMediumLesson 11 of 11
- Critical CSS inline / small CSS bundles; remove unused CSS (Tailwind does this automatically).
<script defer>ortype="module"; avoid render-blocking third-party scripts.- Images: modern formats (WebP/AVIF), correct sizes,
width/heightattributes to prevent layout shift,loading="lazy"below the fold. - Fonts:
font-display: swap, preload the main font, limit weights. - Core Web Vitals: LCP (largest content paint ≤ 2.5 s), INP (interaction to next paint ≤ 200 ms), CLS (layout shift ≤ 0.1).
- SEO basics: unique
<title>and meta description, oneh1, semantic structure, descriptive link text,alttext, canonical URLs, Open Graph tags for sharing.