Improving Page Speed
Apply practical techniques to make pages load and respond faster.
Faster pages rank and convert better. Here are the highest-impact optimizations.
Loading (LCP)
- Compress and lazy-load images; use WebP/AVIF.
- Serve assets from a CDN and enable caching.
- Preload the hero image and critical fonts.
- Minify and reduce render-blocking CSS/JS.
Interactivity (INP)
- Break up long JavaScript tasks.
- Defer non-essential scripts and third-party tags.
Stability (CLS)
- Set
widthandheighton images and embeds. - Reserve space for ads and dynamic content.
- Use
font-display: swapto avoid invisible text.
Example
<!-- Preload the LCP image and reserve its space to avoid CLS -->
<link rel="preload" as="image" href="/img/hero.webp">
<img src="/img/hero.webp" width="1200" height="600" alt="...">When to use it
- A retailer converts all product images from PNG to WebP and reduces page weight by 60%, cutting LCP from 4.1 s to 1.9 s on mobile.
- A developer defers non-critical JavaScript bundles with <script defer> so the main thread is unblocked during initial render, improving Time to Interactive.
- A blog enables gzip/Brotli compression on its CDN, halving HTML/CSS transfer sizes and reducing TTFB from 800 ms to 190 ms across all pages.
More examples
Serve next-gen images in HTML
The picture element with a WebP source delivers 25-35% smaller files versus JPEG with identical quality, directly reducing page weight and LCP.
<picture>
<!-- Serve WebP to browsers that support it -->
<source
type="image/webp"
srcset="/images/shoe-400.webp 400w, /images/shoe-800.webp 800w"
sizes="(max-width:600px) 400px, 800px">
<!-- JPEG fallback for older browsers -->
<img
src="/images/shoe-800.jpg"
alt="Trail Runner Pro"
width="800" height="600"
loading="lazy">
</picture>Defer non-critical scripts
Deferring analytics and widget scripts prevents them from blocking HTML parsing, improving Time to Interactive and INP for the initial page load.
<head>
<!-- Critical CSS inline: no render-blocking -->
<style>/* above-the-fold styles */</style>
<!-- Defer analytics and third-party scripts -->
<script src="/js/analytics.js" defer></script>
<script src="https://cdn.example.com/widget.js" defer></script>
<!-- Async for scripts that don't depend on DOM order -->
<script src="/js/chat-widget.js" async></script>
</head>Enable Brotli compression in nginx
Brotli achieves 15-25% better compression than gzip for text assets; enabling both ensures all clients receive compressed responses regardless of support.
# nginx.conf — enable Brotli and gzip compression
http {
brotli on;
brotli_types text/html text/css application/javascript application/json;
brotli_comp_level 6;
# Gzip fallback for clients that don't support Brotli
gzip on;
gzip_types text/html text/css application/javascript application/json;
gzip_min_length 1024;
}
Discussion