Lazy Load Player

The audio player is lazy-loaded by default. It does not load its JavaScript or CSS until the visitor scrolls close to it. This keeps your page's Largest Contentful Paint (LCP) fast.

#What lazy load does

• On page load, a small placeholder is rendered in the player's position
• JavaScript and CSS for the full player are NOT loaded yet
• When the visitor scrolls within 500px of the player, the full player loads and replaces the placeholder
• The transition is visually smooth (usually under 100 ms)

#Why it helps Core Web Vitals

Without lazy load, every page with a player pays the cost of the player JS and CSS on initial load. With lazy load:

• LCP: unaffected - player is not in the above-the-fold content
• INP: unaffected - no heavy JS runs on load
• CLS: unaffected - placeholder has the same height as the final player

#When to turn it off

Lazy load is on by default. Turn it off if:

• Your player is always above the fold (rare)
• You use autoplay and want the player ready instantly (very rare)
• You want to test without lazy load for debugging

#How to turn it off

1. Go to Text to Speech → Advanced.
2. Flip Lazy load player to off.
3. Save.

#How it works technically

• The plugin uses IntersectionObserver to detect when the player scrolls into view
• On intersection, it dynamically loads the required JS and CSS
• Once loaded, the scripts stay cached in the browser for the rest of the session

Browsers without IntersectionObserver (very old) fall back to loading scripts on page load.

#Known edge cases

#Player inside a hidden element

If your player is inside a display: none section (like a collapsed accordion), lazy load does not trigger until the section becomes visible. Usually this is desired - no sense loading what is not shown.

#Audio autoplay

If you set autoplay on the player and it is lazy-loaded, it will not play until the visitor scrolls to it. Autoplay starts as soon as the player loads.

#Related pages

• Customize the player
• Performance and Core Web Vitals