Web Performance
Optimization Guide
Everything you need to understand Core Web Vitals, optimize images, and make your website measurably faster — starting today.
Core Web Vitals
explained
Three metrics Google uses to measure real-world user experience — and factor into search rankings.
Measures how long the largest visible element — usually a hero image or heading — takes to render from when navigation started. This is Google's proxy for perceived load speed.
Measures the latency of every user interaction — clicks, taps, key presses — and reports the worst offender. Replaced FID in March 2024. High INP means a sluggish-feeling interface.
Scores how much page content shifts unexpectedly as it loads — ads appearing, fonts swapping, images without dimensions. A high CLS is what causes you to accidentally tap the wrong button.
Pro tip: Google evaluates Core Web Vitals based on the 75th percentile of real-user field data collected via the Chrome User Experience Report (CrUX) — not just your own test run. A single fast load won't move the needle; your whole audience needs a good experience.
The 6 biggest
performance killers
Most slow websites share the same handful of problems. Here's what to look for first.
Unoptimized images
Images are typically the largest assets on any page. Serving a 3MB JPEG when a 180KB WebP would look identical is the single most common cause of a poor LCP score.
↳ Use our free tools belowRender-blocking scripts
JavaScript loaded in <head>
without defer or async pauses HTML parsing entirely.
The browser sits idle while downloading and executing every byte before showing a single pixel.
Unoptimized web fonts
Loading a 400KB font file for a single typeface causes layout shifts (CLS) and invisible text (FOIT) until the font arrives. Preconnect, font-display: swap, and subsetting are essential.
↳ Preconnect + font-display: swapNo caching strategy
Without proper Cache-Control
headers, returning visitors re-download every asset on every visit. Proper caching makes repeat
loads near-instant.
Oversized JavaScript bundles
Shipping an entire framework to render a mostly-static page inflates parse and execution time — especially on lower-end mobile devices. Code-splitting and tree-shaking are non-negotiable for large apps.
↳ Code-split and tree-shakeSlow server response (TTFB)
A high Time to First Byte delays everything downstream — no amount of frontend optimization can recover from a server that takes 2 seconds to respond. CDN, caching layers, and server-side optimizations address this.
↳ Use a CDN + page cacheWhich format
should you use?
Choosing the right image format is the highest-leverage optimization you can make. The same visual content can weigh 10× more in the wrong format. Here's the full comparison.
| Format | Best for | Transparency | Typical savings vs JPEG | Browser support |
|---|---|---|---|---|
| WebP Recommended | All web images — photos, graphics, illustrations | ✅ Yes | 25–35% smaller | All modern browsers (97%+) |
| JPEG Fallback | Photographs, complex imagery without transparency | ❌ No | — | Universal |
| PNG Fallback | Logos, icons, screenshots, anything needing sharp edges | ✅ Yes | Often larger | Universal |
| AVIF | Photographs where maximum compression is critical | ✅ Yes | 40–50% smaller | Chrome, Firefox, Safari 16+ (89%+) |
| SVG | Icons, logos, illustrations that must scale infinitely | ✅ Yes | Near-zero for small graphics | Universal |
| BMP | Internal tooling only — never use on the web | ❌ No | 5–10× larger | Varies |
Performance
optimization checklist
Work through these in order — earlier steps tend to have the biggest impact.
This checklist covers the most impactful changes you can make to a typical website. Start with the audit to get your baseline, then work top-to-bottom — each step builds on the last.
Run a baseline audit
Open Google PageSpeed Insights and run your URL on both mobile and desktop. Note your LCP, INP, CLS scores and the top three "Opportunities". This is your starting point — screenshot it.
Optimize every image
Convert all images to WebP using the free converter.
Then compress them to the lowest quality where the visual result is still acceptable
using the free compressor. Add width and height attributes to all
<img> elements to
prevent CLS.
Defer non-critical scripts
Add defer to every <script> tag that
isn't needed before first render — analytics, chat widgets, tracking pixels. Move
them to just before </body> if still
blocking.
Enable server-side compression
Gzip or Brotli compression should be enabled at the server/CDN level. This alone
reduces HTML, CSS, and JS transfer size by 60–80%. Verify it's working by checking
the Content-Encoding
response header in DevTools.
Set long-lived cache headers
For static assets (images, fonts, CSS, JS) add Cache-Control: max-age=31536000, immutable.
Use versioned filenames or query strings so cache-busting still works on updates.
Preconnect to external origins
Add <link rel="preconnect">
in <head> for
every external domain your page fetches from — fonts, analytics, CDN. This
eliminates DNS lookup latency for those origins.
Serve via a CDN
A Content Delivery Network caches your static assets on servers around the world, so every visitor is served from a node close to them. This dramatically cuts TTFB for international visitors and removes load from your origin server.
Re-audit and iterate
Re-run PageSpeed Insights after completing each batch of changes. Confirm your scores improved, then move to the next set of Opportunities listed. Treat performance as a continuous process, not a one-time fix.
Use them now —
no account needed
All tools run entirely in your browser. Files never leave your device.
Image Converter
Convert images to JPEG, PNG, WebP or BMP. Essential for switching your entire image library to WebP.
Open tool →Image Compressor
Reduce file sizes with a live quality slider. See the exact byte savings before you commit to a download.
Open tool →Color Picker
Extract a dominant palette from any image and export clean CSS, HEX, HSL or Tailwind class names.
Open tool →JSON Formatter
Paste raw JSON to instantly format, validate and minify it — useful for inspecting API responses and config files.
Open tool →Get a professional
performance audit
Not sure where your bottleneck is? A full audit covers PageSpeed analysis, Core Web Vitals, image strategy and a prioritized fix list — with implementation available. Or use our free browser tools while you’re here.
FAQ
What is a good Google PageSpeed score?
A score of 90 or above (green) is the target for both mobile and desktop. Scores between 50–89 need improvement and below 50 are considered poor. Mobile scores tend to be lower because PageSpeed simulates a mid-range device on a 4G connection — always check both.
Do Core Web Vitals directly affect Google rankings?
Yes. LCP, INP, and CLS are confirmed Google ranking signals as part of the Page Experience update. They act as a tiebreaker between pages with similar relevance — so strong performance gives a measurable edge in competitive search results.
What image format should I use for the web?
WebP is the best all-round choice today — smaller than JPEG and PNG at comparable quality, supported by all modern browsers. For photographs, use WebP or JPEG. For sharp-edged graphics and transparency, use WebP or PNG. Never serve BMP or TIFF on the web.
How much can image optimization actually reduce file size?
Converting a JPEG to WebP typically saves 25–35%. Applying quality compression on top of that can reduce a JPEG by a further 40–70% with minimal visible quality loss. Combined, it's common to reduce a 2MB image to under 200KB — a 90% reduction.
How long does it take to improve web performance?
Quick wins — image optimization, deferring scripts, setting cache headers — can be done in an afternoon and often produce a 20–40 point PageSpeed improvement immediately. A full audit and remediation of a mid-complexity site typically takes 1–3 days of focused work.