1. Image Optimisation (Biggest Win)
Images are typically 60–80% of a page's total download size. Optimising them is the single highest-impact performance change you can make.
- Convert to WebP — 25–35% smaller than JPG/PNG at equivalent quality
- Use srcset to serve smaller images on mobile
- Add
loading="lazy"to all below-the-fold images - Always set
widthandheightattributes to prevent layout shift - Use our Image Compressor and WebP Converter
2. Font Loading
<!-- Preconnect to font origin -->
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<!-- Add display=swap to prevent invisible text -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>font-display: swap shows a system font immediately, then swaps to your custom font when it loads. This prevents the "invisible text" problem where content is unreadable while the font downloads.
3. Critical CSS
CSS blocks rendering — the browser won't paint anything until all CSS is loaded. For large stylesheets, inline the CSS needed for above-the-fold content and defer the rest:
<head>
<!-- Inline critical CSS (hero, nav, fold content) -->
<style>
/* Only the styles needed for above-the-fold content */
body { margin: 0; font-family: sans-serif; background: #060b14; }
header { position: sticky; top: 0; height: 56px; }
</style>
<!-- Defer full CSS -->
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<noscript><link rel="stylesheet" href="/css/main.css"/></noscript>
</head>4. Script Loading
<!-- Defer non-critical scripts -->
<script src="/js/analytics.js" defer></script>
<!-- Async for independent scripts (e.g. ads, chat widgets) -->
<script src="/js/widget.js" async></script>
<!-- Never block rendering with scripts in <head> without defer/async -->| Attribute | Downloads | Executes | Blocks HTML? |
|---|---|---|---|
| (none) | Immediately | Immediately | Yes |
| defer | In parallel | After HTML parsed | No |
| async | In parallel | As soon as downloaded | Possibly |
Core Web Vitals
| Metric | Measures | Good Score |
|---|---|---|
| LCP (Largest Contentful Paint) | Loading speed of main content | ≤ 2.5s |
| CLS (Cumulative Layout Shift) | Visual stability — unexpected layout shifts | ≤ 0.1 |
| INP (Interaction to Next Paint) | Responsiveness to user input | ≤ 200ms |
💡 Measure first: Use PageSpeed Insights (free, powered by Google Lighthouse) to get a baseline before optimising. Fix the highest-impact issues first.