Back to Practice
Lazy Loading
Lazy Loading Performance
Practice testing lazy-loaded content and performance metrics. Scroll down to trigger image loading.
LOADED
0/20
NETWORK REQUESTS
0
BANDWIDTH SAVED
0 KB
DEFERRED
20
How Lazy Loading Works
Images are only loaded when they enter the viewport. Scroll down to see more images load. Check the Network tab in DevTools to observe the requests.
Image Gallery (Scroll to load)
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8
Image 9
Image 10
Image 11
Image 12
Image 13
Image 14
Image 15
Image 16
Image 17
Image 18
Image 19
Image 20
Automation Tips
- • Scroll Simulation: Use scrollIntoView() or page.evaluate(() => window.scrollTo(...))
- • Load Detection: Wait for data-loaded="true" attribute on lazy elements
- • Network Monitoring: Use CDP to monitor network requests during scroll
- • Performance API: Access window.performance.getEntriesByType('resource')