Speed wins twice: higher conversion rates + cleaner SEO signals

Do these inside HighLevel first

• Resize + compress images before upload (use WebP/JPG when possible).
• Remove unused/hidden sections (hidden = still heavy).
• Reduce video backgrounds (replace with image + optional click-to-play video).
• Prefer native HL forms/surveys over third-party embeds when possible.
• In funnel settings, enable Optimise Javascript and Image optimisation if available and compatible with your page.

Use DevTools like an operator

• Network tab: sort by size → kill the top 3 offenders.
• Performance/Insights: look for long tasks (script blocking).
• Disable extensions/incognito for consistent Lighthouse runs.
• Test mobile throttling to match real user pain.

LCP fixes (loading)

• Replace hero video with an image + play button.
• Resize hero images to actual display size (not 3000px wide).
• Prefer WebP/JPG; avoid huge PNGs unless necessary.
• Keep above-the-fold layout simple (less DOM = faster render).
• Avoid heavy sliders/carousels on the first screen.

INP fixes (responsiveness)

• Remove duplicate pixels + unused widgets.
• Load non-critical scripts after user intent (scroll/click).
• Prefer one analytics stack (ex: GTM) vs many direct installs.
• Reduce animations that run on scroll or on load.
• Cut section nesting (rows/columns inside rows/columns).

CLS fixes (stability)

• Reserve space for embeds/iframes (set min-height).
• Give images explicit dimensions or fixed containers.
• Don’t inject large banners above content after load.
• Keep sticky bars consistent height across breakpoints.
• Delay popups until after user has context (and avoid reflow).

Run custom JS after preview hydration (GHL preview)

In preview, HighLevel exposes a hydrationDone event so scripts that touch the DOM run at the right time. This prevents flaky "works sometimes" behavior.

document.addEventListener('hydrationDone', function () {
 // Safe to query DOM here (preview)
 // Example: set lazy loading for iframes/images
 document.querySelectorAll('iframe').forEach(f => f.setAttribute('loading','lazy'));
});

Load non-critical scripts after intent

If you have a non-essential widget, load it only after a user scrolls or clicks. This protects INP and speeds the first screen.

(function(){
 let loaded = false;
 function loadScriptOnce(){
 if(loaded) return;
 loaded = true;

 var s = document.createElement('script');
 s.src = 'https://example.com/noncritical-widget.js';
 s.async = true;
 document.head.appendChild(s);

 window.removeEventListener('scroll', loadScriptOnce);
 window.removeEventListener('click', loadScriptOnce);
 }
 window.addEventListener('scroll', loadScriptOnce, {passive:true});
 window.addEventListener('click', loadScriptOnce, {passive:true});
})();