Website Performance Audit (Lighthouse/PageSpeed)
We often see sites losing 30-50% of conversions due to slow loading. Lighthouse — Google's automated audit tool — shows numbers but doesn't explain what to do. Our audit doesn't just give a score; it pinpoints the exact causes of poor metrics and provides a fix plan. Our engineers have completed over 50 successful web performance acceleration projects. Typical scenario: desktop flies, but on mobile with 3G the page loads in 8 seconds, LCP exceeds 4s, and CLS is constantly red. The culprits: unoptimized images, heavy JS bundles, and no code splitting. Without a detailed audit, you'll be guessing what's slowing you down.
Contact us for a preliminary consultation — we'll assess your site complexity within one day.
How to Run Lighthouse Correctly
Lighthouse synthetic tests emulate a Moto G4 on 4G with 4x CPU throttling. That's the median mobile device — desktop numbers will be better. For stable results:
- run in incognito without extensions (extensions affect metrics);
- perform 3-5 runs and take the median (Lighthouse can vary ±10-20 points);
- compare with competitors using the same methodology.
# Lighthouse CLI — more stable than DevTools: variance 15-20% lower npm install -g lighthouse for i in 1 2 3; do lighthouse https://mysite.ru \ --output json \ --output-path "run-$i.json" \ --chrome-flags="--headless" \ --throttling-method=simulate \ --preset=mobile done Which Metrics Affect Speed?
| Metric | Weight in score | What it measures |
|---|---|---|
| LCP | 25% | Load of the largest element |
| TBT (Total Blocking Time) | 30% | Main thread blocking time |
| CLS | 25% | Layout shifts |
| FCP | 10% | First contentful paint |
| Speed Index | 10% | Visual fill speed |
TBT has the highest weight and correlates with INP in real conditions. Sites with large JS bundles without code splitting always have high TBT. Lighthouse synthetic data is good, but real-world CrUX (Chrome User Experience Report) is even more valuable — it shows what users actually experience.
Comparison: Lighthouse vs CrUX
| Characteristic | Lighthouse | CrUX |
|---|---|---|
| Type | Synthetic | Real users |
| Conditions | Controlled (Moto G4) | Various devices/networks |
| Data | Single test | 28-day aggregate |
| Applicability | Any site | Requires >1000 unique visitors |
Combining both sources gives the full picture: Lighthouse shows potential issues, CrUX shows real experience.
Why TBT Is the Most Dangerous Metric
TBT is directly linked to long tasks (>50ms) on the main thread. We use DevTools Performance and Treemap for bundle analysis. Typical culprits: moment.js (67KB), lodash without tree-shaking, full import like import * as Icons from 'react-icons'. Bundle analysis with webpack-bundle-analyzer reveals what can be removed. Optimization can cut hosting costs up to 30% by reducing server load.
# webpack-bundle-analyzer npm run build -- --profile npx webpack-bundle-analyzer dist/stats.json How to Improve LCP
The LCP element is often the largest image or text. Typical problems:
<!-- Problem: lazy-loading on LCP element --> <img src="hero.jpg" loading="lazy" ...> <!-- Fix: eager + fetchpriority --> <img src="hero.webp" loading="eager" fetchpriority="high" width="1200" height="500" alt="LCP hero image"> If LCP is a CSS background image, Lighthouse won't see it as <img>. Solution: switch to <img> or add <link rel="preload">. According to Lighthouse on GitHub, adding fetchpriority="high" can reduce LCP by 15-20%.
How to Tackle CLS
Causes of layout shift:
- images without
width/height; - dynamically inserted banners/ads;
- fonts causing FOUT (Flash of Unstyled Text);
- skeleton screens with wrong dimensions.
Diagnose via DevTools → Rendering → Layout Shift Regions (highlights in green). Typical mistakes causing CLS:
- Missing image dimensions (always specify
widthandheightor useaspect-ratio). - Ad insertions without reserved space — set a minimum container height.
- Dynamic content loaded after render — use
min-heightor skeleton.
Automation with PageSpeed Insights API
For automated monitoring after deployment, use the API:
PSI_KEY="YOUR_GOOGLE_API_KEY" URL="https://mysite.ru/" curl -s "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${URL}&key=${PSI_KEY}&strategy=mobile" | \ jq '{ lcp: .lighthouseResult.audits["largest-contentful-paint"].displayValue, tbt: .lighthouseResult.audits["total-blocking-time"].displayValue, cls: .lighthouseResult.audits["cumulative-layout-shift"].displayValue, score: .lighthouseResult.categories.performance.score }' What's Included in the Work
- Detailed report with scores across 4 Lighthouse categories (Performance, Accessibility, Best Practices, SEO);
- Prioritized task list with impact/effort (quick wins, medium level, major refactorings);
- Configuration files (Lighthouse CLI, webpack) for self-monitoring;
- Recommendations for Core Web Vitals optimization with code examples;
- Consultation and Q&A support for 2 weeks after delivery.
Estimated Timelines
Full audit (Lighthouse, DevTools trace, bundle analysis, CrUX data, prioritized task list): 1-2 days. For large sites with multiple page types (homepage, catalog, product, checkout) — 2-3 days. Pricing is individual. Schedule a consultation — contact us. We guarantee that after implementing recommendations your site will score 90+ on Lighthouse and LCP, TBT, and CLS will enter the green zone. Order an audit to stop guessing — we'll show you what to fix and how.