Website Performance Optimization on Degradation
Performance degradation is a gradual or sudden deterioration of metrics on a running site. Unlike optimizing a new project, here the task is to find the regression: what exactly changed and when. This is diagnostic work that starts with correlating metrics with events.
Determining Degradation Time Point
First step is to establish the time when the problem started. Data sources:
- Google Search Console → Core Web Vitals → 28 days field vs previous period
- Grafana/Datadog — if RUM exists, check LCP/INP/TTFB graphs over time
- Lighthouse CI in CI/CD — which deploy broke metrics
- Git log — what was deployed on degradation day
# Quick view of deploys over a week
git log --oneline --since="2 weeks ago" --until="today"
# What changed on specific day
git log --oneline --after="2025-03-10" --before="2025-03-12"
If LCP metric grew from 1.8s to 4.2s — check deploys 2 days before growth start.
Common Causes of Degradation
JavaScript Regression:
Adding heavy script in <head> without defer/async blocks rendering:
<!-- Blocks LCP -->
<script src="https://somecdn.com/heavy-widget.js"></script>
<!-- Correct -->
<script src="https://somecdn.com/heavy-widget.js" defer></script>
Diagnostics: Chrome DevTools → Performance → record trace → find tasks > 50ms in main thread.
New Font Without font-display:
/* Without font-display — FOIT blocks text, LCP grows */
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap; /* add */
}
Uncompressed Images After CMS/Hosting Change:
# Check if server delivers WebP/gzip
curl -I -H "Accept: image/webp" https://mysite.ru/images/hero.jpg | grep content-type
# content-type: image/webp — good
# content-type: image/jpeg — no WebP
CLS from Elements Without Dimensions:
<!-- Image without dimensions causes layout shift -->
<img src="banner.jpg" alt="Banner">
<!-- Correct: reserve space -->
<img src="banner.jpg" alt="Banner" width="1200" height="400"
style="aspect-ratio: 1200/400">
Diagnostic Tools
WebPageTest with Tracing: webpagetest.org → Advanced → Capture video + Chrome DevTools trace. Shows exact LCP element and what delays it.
Chrome DevTools Coverage — shows unused JS/CSS:
DevTools → Coverage (Ctrl+Shift+P → "Coverage") → Record →
Reload page → Stop → check % unused bytes
If JS file is 15% used — candidate for code splitting.
Lighthouse in Comparison Mode:
# Lighthouse CLI — more stable than DevTools (no other tabs)
npx lighthouse https://mysite.ru --output json --output-path before.json
# (make changes)
npx lighthouse https://mysite.ru --output json --output-path after.json
# Diff by key metrics
node -e "
const b = require('./before.json').audits;
const a = require('./after.json').audits;
['largest-contentful-paint','total-blocking-time','cumulative-layout-shift'].forEach(k => {
console.log(k, 'before:', b[k].displayValue, '-> after:', a[k].displayValue);
});
"
LCP Optimization
LCP usually is large hero image or H1. For image:
<!-- Prioritize LCP image loading -->
<img src="/hero.webp"
alt="Hero"
width="1440" height="600"
fetchpriority="high"
loading="eager"
decoding="sync">
<!-- Preload in <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
If LCP is text block, font loading slows it. Solution:
<link rel="preload" href="/fonts/hero-font.woff2"
as="font" type="font/woff2" crossorigin>
INP — Slow Event Handlers
INP > 200ms means clicking a button, user waits for visual response. Diagnostics in DevTools:
Performance → Interactions → select long task → Bottom-up →
find function with highest Self Time
Typical cause: synchronous operation in click handler:
// Blocks main thread
button.addEventListener('click', () => {
const result = heavyComputation(data); // 300ms
updateUI(result);
});
// Correct: break into microtasks
button.addEventListener('click', async () => {
updateUI({ loading: true });
await scheduler.yield(); // free thread
const result = heavyComputation(data);
updateUI(result);
});
TTFB Degradation — Server Side
TTFB increased → server problem. Check:
# Server response time without network (localhost)
curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" http://127.0.0.1/page
# Compare with production
curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" https://mysite.ru/page
If localhost 150ms but production 2s — problem in network/CDN/SSL. If localhost already 1.5s — problem in app: slow query, blocked cache, external API call in sync code.
Work Timeline
Diagnose degradation source (Git bisect, traces, slow log): 0.5–1 day. Fix common issues (fonts, images, JS defer): 1 day. Complex cases (N+1 queries, custom JS with long tasks): 2–3 days.