Performance Troubleshooting and Diagnostics: identifying and fixing performance issues

Performance degrades. Page that loaded in two seconds now loads in four seconds. Something changed.

Troubleshooting answers: what changed. Why did performance degrade.

Root causes: new feature added large JavaScript bundle. Database query became slow. Third-party script was added. Image size increased. Server became overloaded.

Systematic troubleshooting finds root cause. Systematic fixing removes root cause.

Troubleshooting framework

Step one: identify symptom. LCP increased from two to four seconds. CLS increased from zero point zero five to zero point two. INP increased from one hundred to four hundred milliseconds.

Step two: timeline. When did degradation start. Last week. Last day. Last hour. Timeline narrows search.

Step three: correlate to changes. What code changed. What features shipped. What infrastructure changed. Correlation identifies cause.

Step four: isolate cause. Performance degraded. Hypothesis: new JavaScript bundle. Test: measure LCP with new bundle disabled. LCP returns to two seconds. Hypothesis confirmed.

Step five: fix or rollback. Fix cause (optimize bundle) or rollback (revert change). Decision depends on severity.

Real example: e-commerce site performance degradation

Symptom: LCP increased from two seconds to three point five seconds. Detected via monitoring alert.

Timeline: degradation happened on Tuesday morning. Team shipped new recommendation engine on Monday night.

Correlation: coincidence suggests recommendation engine caused degradation.

Isolation test: disable recommendation engine. LCP returns to two seconds. Recommendation engine confirmed as cause.

Investigation: recommendation engine loads product images for recommendations. Images are not optimized (original size, no compression). Loading fifty product images adds two megabytes to page.

Fix: optimize recommendation engine images. Compress images, use lazy loading for images below fold. Image size reduces to five hundred kilobytes. LCP improves to two point two seconds.

Rollout: revert recommendation engine, deploy optimized version. LCP returns to two point two seconds.

Common performance issues and solutions

Issue one: large JavaScript bundle

• Symptom: LCP slow, INP slow
• Cause: new feature adds code, bundle grows
• Solution: code split feature, lazy load feature
• Expected improvement: LCP improves by zero point five seconds

Issue two: slow database queries

• Symptom: TTFB slow
• Cause: database query becomes slow (missing index, query joins many tables)
• Solution: add database index, optimize query, cache results
• Expected improvement: TTFB improves by two hundred milliseconds

Issue three: unoptimized images

• Symptom: LCP slow, bandwidth high
• Cause: images are large (uncompressed, wrong format)
• Solution: compress images, convert to WebP, use responsive images
• Expected improvement: LCP improves by one second

Issue four: third-party scripts

• Symptom: LCP slow, page becomes unresponsive
• Cause: third-party analytics, tracking, ads slow down page
• Solution: lazy load third-party scripts, use web worker, load asynchronously
• Expected improvement: LCP improves by zero point five seconds, INP improves by one hundred milliseconds

Issue five: CLS from ads or embeds

• Symptom: layout shifts while reading
• Cause: ads load and take space, content shifts
• Solution: reserve space for ads, lazy load ads below fold
• Expected improvement: CLS improves from zero point two to zero point zero five

Monitoring for early detection

Alert on degradation: if LCP exceeds two point five seconds, alert team.

Alert on regression: if LCP increases by more than zero point five seconds from baseline, alert team.

Alert on business impact: if sign-up completion decreases by one percent, alert team (may indicate performance issue).

Real example: alerts at SaaS company

• Alert one: if LCP exceeds two point five seconds
• Alert two: if performance regression detected (LCP increases fifty percent over one day)
• Alert three: if Core Web Vitals shift from good to needs improvement for more than five percent of users
• Alert four: if sign-up completion decreases below target (may indicate checkout page performance issue)

When alert triggers: engineering team investigates within one hour. Root cause identified. Fix deployed same day.

Real example: payment processing performance issue

Symptom: checkout abandonment rate increased from fifteen percent to twenty-five percent. Started on Thursday.

Investigation: checkout page performance degraded. Payment processing button interaction time increased from two hundred milliseconds to one second.

Timeline: payment processor made infrastructure change on Thursday morning.

Root cause: payment processor moved from California to Europe. Network latency from user to payment processor increased by two hundred milliseconds. Total payment processing time increased to one second.

Solution: use CDN edge location near user. Route payment request through local CDN edge. CDN edge relays to European payment processor. Network latency reduced. Payment processing time returns to two hundred milliseconds.

Outcome: checkout abandonment rate returns to fifteen percent.

Business impact: five thousand monthly checkouts at fifteen percent abandonment is seven hundred fifty failed conversions. At one hundred dollar order value, that is seventy-five thousand dollars lost monthly. Fixing latency issue saved company seventy-five thousand dollars monthly.

Frequently asked questions