Quicklink Integration for Viewport-Based Prefetching

What is Quicklink?

Quicklink is a JavaScript library that prefetches links when they enter the viewport during idle time, providing instant navigation for users.

How Quicklink Complements Speculation Rules

• Broader browser support: Works in older browsers
• Viewport-based: Only prefetches visible links
• Idle time optimization: Uses browser idle callbacks
• Network awareness: Respects slow connections and data saver

Configuration

Configure in Advanced � Quicklink:

Basic Settings

• Enable Quicklink: Activate viewport-based prefetching
• Mode:
  • Prefetch: Download resources only
  • Prerender: Render pages in background
  • Both: Combination approach

Performance Controls

• Throttle: Concurrent request limit (default: 5)
• Limit: Maximum total prefetch requests (default: 20)
• Delay: Wait time before prefetching (milliseconds)
• Timeout: Request timeout (default: 2000ms)
• Threshold: Intersection observer threshold

Advanced Features

Network Awareness

• Data Saver respect: Disable prefetching when data saver is enabled
• Connection type detection: Skip on slow connections (3G and below)
• Bandwidth optimization: Intelligent request throttling

Targeting and Filtering

• Allowed origins: Domains from which prefetching is allowed
• Ignore patterns: URL patterns to exclude from prefetching
• Priority system: Intelligent link prioritization
• Ad blocking: Built-in ad URL detection and blocking

Conditional Activation

• Enable only on specific page types
• Home pages, posts, categories, archives
• Custom page type targeting

Integration with Speculation Rules

ZiziCache intelligently coordinates both systems:

Coexistence Modes

• Complementary: Both systems work together
• Fallback: Quicklink provides fallback for unsupported browsers
• Skip if Speculation Rules: Disable Quicklink when Speculation Rules are available

Performance Optimizations

Lazy Loading

• Library loads only when needed
• Triggered by scroll, hover, or idle time
• Minimal impact on initial page load

Smart Prefetching

• HTTP/2 Server Push detection
• Duplicate request prevention
• Intelligent priority adjustment during scroll
• Request deduplication

Error Handling

• Graceful degradation on errors
• Analytics integration for monitoring
• Debug logging for troubleshooting

Monitoring and Analytics

• Performance metrics: Prefetch success rates
• Network impact: Bandwidth usage tracking
• Error tracking: Failed prefetch monitoring
• Browser compatibility: Feature support detection

Best Practices

• Start with conservative settings and gradually increase
• Monitor network usage and adjust limits accordingly
• Exclude admin areas, login pages, and external links
• Test thoroughly on mobile devices and slow connections
• Use analytics to measure impact on user engagement
• Consider server capacity when setting prefetch limits

Troubleshooting

• High bandwidth usage: Reduce throttle and limit values
• Slow page loading: Increase delay or disable on mobile
• Console errors: Check ignore patterns and origins
• No prefetching: Verify network conditions and data saver settings