Element Blocking Time in Page Task
Issue Description
Elements show blocking time in element waterfall chart.
What is Blocking Time
Blocking time occurs when:
- Browser waits for resource
- Parallel connection limit reached
- Resource queued for loading
- Dependency not yet loaded
Normal Blocking Time
| Quality | Blocking Time |
|---|---|
| Good | <100ms per element |
| Normal | 100-500ms |
| Poor | >500ms |
Possible Causes
Connection Limits
- Browser connection limit reached (typically 6 per domain)
- Too many resources from same domain
- No connection reuse
- HTTP/1.1 without keep-alive
Resource Dependencies
- CSS blocking JavaScript
- JavaScript blocking rendering
- Synchronous script loading
- Render-blocking resources
Server Issues
- Slow server response
- Server connection limits
- Keep-alive timeout
- Server overload
Network Issues
- High latency
- Limited bandwidth
- Packet loss
- Congestion
Investigation Steps
-
Analyze Waterfall
- Identify blocked elements
- Check blocking patterns
- Review element types
- Check domains
-
Connection Analysis
- Count connections per domain
- Check connection reuse
- Review keep-alive status
- Analyze timing
-
Resource Analysis
- Identify render-blocking resources
- Check resource priorities
- Review dependencies
- Analyze sizes
-
Server Analysis
- Check server response times
- Review connection limits
- Check keep-alive settings
- Analyze server logs
Resolution
Reduce Blocking
- Enable HTTP/2 (multiplexing)
- Increase parallel connections
- Use multiple domains
- Implement resource hints
Optimize Resources
- Defer non-critical JavaScript
- Async load scripts
- Inline critical CSS
- Preload important resources
Server Optimization
- Enable keep-alive
- Increase connection limits
- Optimize response times
- Implement CDN
Prevention
- Regular performance audits
- Monitor blocking trends
- Implement best practices
- Use performance budgets