10 HTML and CSS Techniques for Faster Websites
Quick answer: Faster pages come from sending fewer and smaller resources, prioritizing the content people need first, and checking real user performance. Start with the page's largest image, unused CSS, JavaScript, fonts, and third-party scripts; measure before and after each change.
HTML and CSS choices affect how quickly a browser can discover, download, and render page content. No single technique guarantees better rankings. Use these practices to improve the experience, then measure the result on the pages that matter.
1. Resize and compress images
Export images close to the dimensions at which they are displayed. Compress them and choose a suitable format such as AVIF, WebP, JPEG, or PNG based on image content and browser support. A huge original image scaled down with CSS still takes longer to transfer.
2. Serve responsive image sizes
Use srcset and sizes when you have multiple widths of an image, so the browser can choose a file suited to the viewport and layout.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
width="1200" height="800"
alt="A red kayak on a calm lake">3. Load offscreen images later
Add loading="lazy" to images that begin below the initial viewport, or to non-critical embedded frames. Do not lazy-load the hero or another image likely to be the Largest Contentful Paint (LCP) element; that can delay the page's main content.
4. Reserve image and embed space
Provide image width and height attributes or an explicit CSS aspect ratio. Reserve space for ads, video embeds, and other content that arrives later. Stable dimensions reduce unexpected movement as the page loads.
5. Remove unused CSS
Ship only the styles the page needs, remove duplicate declarations, and avoid loading large style libraries for a few components. Minification can reduce transferred bytes, but eliminating unused code and render-blocking work is often more useful than making files harder to read.
6. Defer non-critical scripts
Use defer for external scripts that should run after the HTML is parsed. Reserve async for independent scripts that do not rely on execution order. Reduce or delay JavaScript that is not needed for the first useful view.
<script src="site.js" defer></script>7. Use fonts efficiently
Use a small number of font families and weights. A system font stack avoids a font download; if web fonts are needed, serve only the required subsets and weights, and use font-display: swap so text can appear while a font loads.
8. Review third-party code
Analytics, advertising, chat, and embed scripts can add network requests and main-thread work. Keep only the services you need, understand when they load, and compare performance with optional scripts enabled and disabled.
9. Cache static resources
Configure suitable cache headers for versioned images, fonts, stylesheets, and scripts. A content delivery network can serve static files closer to visitors, but the correct cache lifetime and invalidation strategy depend on how your site publishes updates.
10. Measure real user experience
Check performance on representative pages and devices before and after changes. Core Web Vitals are LCP for loading, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. Current "good" thresholds at the 75th percentile are LCP ≤ 2.5 seconds, INP ≤ 200 milliseconds, and CLS ≤ 0.1.
Use field data when available to understand real visits, and lab tools to diagnose a specific load. A single Lighthouse score is not a substitute for field performance. Read the Core Web Vitals guide, the LCP optimization guide, and the lazy-loading guide for more detail.
Conclusion
Measure first, fix the largest bottlenecks, and check the page again. Image loading, CSS, scripts, fonts, caching, and third-party code interact, so make changes in small steps and confirm that the experience improves for real users. To learn the foundations, explore the HTML tutorial and CSS tutorial.