Page Load Performance

Monitor detailed page load performance metrics to identify bottlenecks and optimize user experience.

Performance Metrics Overview

Navigation Timing

Zenovay captures Navigation Timing API data:

DNS    TCP    TLS    TTFB    Content    DOM    Load
|------|------|------|-------|----------|------|
0     50    100    150     400        800    1200ms

Metric	Description	Target
DNS Lookup	Domain resolution time	< 20ms
TCP Connect	Connection establishment	< 50ms
TLS Handshake	SSL negotiation	< 100ms
TTFB	Time to First Byte	< 200ms
Content Download	HTML transfer time	< 100ms
DOM Processing	Parse and execute	< 500ms
Load Complete	All resources loaded	< 3s

Key Metrics Explained

Time to First Byte (TTFB): Server processing time + network latency

TTFB = responseStart - requestStart

First Contentful Paint (FCP): First text or image painted

FCP = First content visible

DOM Interactive: HTML parsed, ready for JavaScript

domInteractive = DOM ready for scripts

DOM Complete: All resources (images, styles) loaded

domComplete = Page fully loaded

Performance Dashboard

Overview

Navigate to Performance → Page Load:

Page Load Performance (Last 7 Days)

Avg Load Time:  2.4s
Median TTFB:    185ms
Avg DOM Ready:  1.2s

Trend: ↓ 12% faster than last week

Timing Breakdown

Visual waterfall showing timing stages:

DNS Lookup      ██░░░░░░░░░░░░░░░░░░  45ms
TCP Connection  ███░░░░░░░░░░░░░░░░░  62ms
TLS Handshake   █████░░░░░░░░░░░░░░░  108ms
TTFB            ███████░░░░░░░░░░░░░  185ms
Content         █░░░░░░░░░░░░░░░░░░░  28ms
DOM Processing  ██████████░░░░░░░░░░  520ms
Load Complete   ████████████████████  2.4s

Distribution View

See performance distribution:

Load Time Distribution

< 1s    ████████████████████ 32%
1-2s    ██████████████████   28%
2-3s    ████████████████     25%
3-5s    ████████             10%
> 5s    ██                   5%

Page-Level Analysis

Slowest Pages

Identify problematic pages:

Page	Load Time	TTFB	Views
/products	4.2s	890ms	15,230
/checkout	3.8s	420ms	8,450
/search	3.5s	310ms	12,100
/blog	2.9s	180ms	22,500
/home	2.1s	150ms	45,000

Page Detail View

Click a page for detailed breakdown:

/products Performance Analysis

Timing Breakdown:
├── Server Response (TTFB)     890ms  ← Issue
│   └── Backend processing slow
├── HTML Download              45ms
├── CSS/JS Loading            320ms
│   ├── main.css              85ms
│   ├── vendor.js            180ms  ← Large bundle
│   └── app.js               55ms
├── Images                    520ms
│   └── 12 images, avg 43ms
└── DOM Complete             1,850ms

Recommendations:
• TTFB is high - check server/database
• vendor.js is large - consider code splitting

Resource Timing

Resource Waterfall

See all resources loaded:

Resource                        Start   Duration   Size
main.css                        180ms   85ms       45KB
vendor.js                       200ms   180ms      312KB
app.js                          380ms   55ms       89KB
hero-image.webp                 280ms   420ms      156KB
analytics.js (third-party)      100ms   95ms       12KB
font.woff2                      250ms   120ms      28KB

Resource Categories

Category	Count	Total Size	Total Time
Scripts	5	423KB	450ms
Stylesheets	3	78KB	120ms
Images	12	856KB	680ms
Fonts	2	56KB	180ms
XHR/Fetch	4	15KB	320ms

Third-Party Impact

Identify slow third-party resources:

Third-Party Resources

Origin                    Resources   Time    Impact
fonts.googleapis.com      2           180ms   Medium
cdnjs.cloudflare.com     3           95ms    Low
www.googletagmanager.com 1           250ms   High ← Review
connect.facebook.net     1           320ms   High ← Consider removing

Server Performance (TTFB)

TTFB Analysis

TTFB Distribution

< 100ms   ██████████████       42%  ✓ Excellent
100-200ms ████████████         35%  ✓ Good
200-500ms ██████               18%  ⚠ Needs work
500ms-1s  ██                   4%   ✗ Slow
> 1s      █                    1%   ✗ Very slow

TTFB by Endpoint

Endpoint	Avg TTFB	P95 TTFB	Notes
/api/products	450ms	1.2s	Database query slow
/api/search	280ms	890ms	Consider caching
/api/user	85ms	150ms	Good
Static pages	45ms	120ms	Excellent

Geographic TTFB

TTFB by Region

North America   ██████████████████   120ms
Europe          ████████████████     180ms
Asia Pacific    ████████████         320ms  ← Consider CDN
South America   ██████████           420ms  ← Consider CDN

Navigation Types

Page Load Types

Type	Description	% Traffic
Navigate	Direct navigation	45%
Reload	Page refresh	20%
Back/Forward	Browser navigation	25%
Prerender	Speculative load	10%

Performance by Navigation

Navigation Type    Avg Load    Median
Navigate           2.4s        2.1s
Reload             1.8s        1.5s    ← Cache benefit
Back/Forward       0.8s        0.6s    ← BFCache benefit

Optimization Recommendations

Server-Side

Issue	Detection	Solution
Slow TTFB	TTFB > 200ms	Optimize queries, add caching
No compression	Large HTML	Enable gzip/brotli
No HTTP/2	Multiple connections	Upgrade server
Far server	High latency by region	Use CDN

Client-Side

Issue	Detection	Solution
Large bundles	JS > 200KB	Code splitting
Render blocking	CSS in head	Critical CSS
Many requests	> 50 resources	Bundling, HTTP/2
Large images	> 200KB	Optimize, WebP

Caching

Issue	Detection	Solution
No caching	Cache-Control missing	Set cache headers
Short cache	Frequent revalidation	Longer max-age
No service worker	No offline	Implement SW

Comparing Periods

Week over Week

This Week vs Last Week

Load Time:  2.4s → 2.1s  ↓ 12% better
TTFB:       185ms → 170ms ↓ 8% better
FCP:        1.1s → 1.0s  ↓ 9% better

Changes:
• Image optimization deployed
• CDN enabled for Europe

Release Comparison

Compare performance across releases:

1. Select two releases
2. View metric comparison
3. Identify regressions
4. Correlate with changes

Real-Time Monitoring

Live Performance

Watch performance in real-time:

• Current active sessions
• Live page load times
• Geographic distribution
• Error rates

Anomaly Detection

Automatic alerts for:

• Sudden TTFB increase
• Load time spikes
• Unusual traffic patterns
• Performance degradation

Export & Reporting

Export Options

• CSV: Raw timing data
• PDF: Performance report
• API: Programmatic access

Scheduled Reports

1. Go to Reports → Scheduled
2. Create "Weekly Performance Report"
3. Select metrics and pages
4. Set recipients and schedule

Integration with CI/CD

Performance Budgets

Set budgets in your build:

// performance-budget.json
{
  "budgets": [
    {
      "path": "/*",
      "metrics": {
        "lcp": 2500,
        "fcp": 1800,
        "ttfb": 200
      }
    }
  ]
}

Lighthouse CI

Compare Lighthouse scores with real-user data.

Best Practices

Monitoring Strategy

1. Set baselines: Establish current performance
2. Define targets: Based on user expectations
3. Monitor trends: Not just snapshots
4. Segment data: Device, geography, page type
5. Act on insights: Turn data into improvements

Quick Wins

1. Enable compression (gzip/brotli)
2. Optimize images (WebP, proper sizing)
3. Set cache headers
4. Use a CDN
5. Remove unused code

Ongoing Optimization

1. Regular audits
2. Performance budgets
3. Monitoring and alerts
4. Team awareness

Troubleshooting

Missing Data

Check:

• Script loading correctly
• Sufficient traffic
• No ad blockers affecting script

Inconsistent Numbers

Consider:

• Sample rate settings
• Traffic mix changes
• Bot traffic filtering

High Variance

Normal for:

• Mobile traffic
• Global users
• Peak traffic periods

Next Steps

• Core Web Vitals
• Performance by Device
• Performance Alerts