What Skin Changes Are Associated With CVI?
Analysis: April 21, 2026 - Lighthouse 13.1
Executive Summary
Main issue: The page takes 6.7 seconds to display its main content on mobile devices (should be under 2.5s). Desktop performs excellently at 98.
Root cause: Same pattern as other pages - YouTube thumbnail delayed by lazy loading, plus reCAPTCHA blocking 467ms of main thread time.
Improvement vs CVI Causes: TBT improved from 570ms to 270ms, but LCP still critical at 6.7s.
Score from 0-100. Target: 90+. This score affects Google ranking.
<img src="https://i.ytimg.com/vi/.../maxresdefault.jpg" class="perfmatters-lazy">Rendered size: 560 x 315px (above the fold, hero position)
Actual load time: 6.7 seconds (target: <2.5s)
- TTFB: 0ms - Server responds quickly
- Resource Load Delay: 1,260ms - Time before browser even starts loading the image (lazy loading holds it)
- Resource Load Duration: 60ms - Actual download is fast once started
- Element Render Delay: 1,480ms - Time after load before render (JS blocking)
- Total: ~2,800ms of preventable delay from lazy loading + JS blocking
The waterfall shows a clear gap between DOMContentLoaded (2.1s) and LCP (6.6s). During this 4.5 second gap, the image element exists in the DOM but has
src
replaced with data-src by PerfMatters, preventing the browser from fetching it.
The irony: Lazy loading is designed to IMPROVE performance by deferring off-screen images. But when applied to the LCP element (which is ON-screen), it does the opposite - it artificially delays the most important content.
Root Cause
Plugin: PerfMatters (Lazy Loading feature)
Conflict: PerfMatters applies perfmatters-lazy class globally to all images without detecting which image is the LCP candidate.
Missing optimization: No fetchpriority="high" attribute to signal browser priority.
Missing preload: No <link rel="preload"> for the hero image.
Exceeds threshold by: 70ms (1.35x the acceptable limit)
Note: Better than CVI Causes (570ms) but still needs improvement
| Script | Blocking Time | Source |
|---|---|---|
recaptcha__en.js |
467ms | Google reCAPTCHA v3 (767KB) |
invoca-latest.min.js |
150ms | Invoca call tracking |
scripts.min.js |
57ms | Divi Theme core |
FontAwesome kit |
48ms | Icon fonts (163KB) |
reCAPTCHA v3 runs continuously in the background to build a "trust score" - it analyzes mouse movements, scroll behavior, and typing patterns. This requires significant JavaScript execution on every page load, even when there's no form submission.
The conflict: PerfMatters detects reCAPTCHA and wraps it with
type="pmdelayedscript" to defer loading. However, Divi's Contact Form module injects the script with data-no-defer="1", which overrides PerfMatters. Result: the script loads immediately AND the deferral wrapper adds overhead.
Root Cause
Primary blocker: Google reCAPTCHA v3 (312ms / 55% of TBT)
Loaded by: Divi Contact Form Module
Location: Divi → Theme Options → Integration → reCAPTCHA
Conflict detail: Divi adds data-no-defer="1" which bypasses PerfMatters delay, while PerfMatters still wraps it causing double processing.
Manual Validation in Chrome DevTools
Analysis performed in Incognito mode to eliminate extension interference. Click each image to enlarge.
| Origin | Transfer | Main Thread |
|---|---|---|
| [unattributed] | 0.1 KB | 3,333 ms |
| veintreatmentclinic.com | 79 KB | 228 ms |
| Google CDN (reCAPTCHA) | 0 KB | 68 ms |
This is NOT a JavaScript problem - it's a CSS/DOM complexity problem:
- DOM has 1,856 elements (high)
- Divi generates complex nested CSS selectors
- Every DOM change triggers full style recalculation
- Inline styles from Divi modules add overhead
| Activity | Self Time | % of Total |
|---|---|---|
| Recalculate style | 1,558 ms | 48.7% |
| querySelectorAll | 227 ms | 7.1% |
| Pre-paint | 184 ms | 5.7% |
| Function call (inline script) | 167 ms | 5.2% |
New Recommendation Based on DevTools
Enable Dynamic CSS in Divi:
Divi → Theme Options → Performance → Dynamic CSS → ON
This generates CSS only for modules actually used on each page, reducing CSS complexity and style recalculation time significantly.
Plugin identified: Divi Theme (Contact Form Module)
Location: Divi - Theme Options - Integration - reCAPTCHA v3
Problem: PerfMatters tries to defer the script with pmdelayedscript but Divi forces data-no-defer="1", causing a conflict.
Solution: In PerfMatters - Script Manager - find reCAPTCHA - set to "Delay" or "Disable" for pages without forms. Alternatively, disable global reCAPTCHA in Divi and enable only where needed.
Problem: reCAPTCHA loads immediately even if the user never touches the form.
Solution: PerfMatters - Script Manager - search "recaptcha" - select "Delay JavaScript".
Note: Resolve the conflict from the previous action first for the delay to work.
Problem: The video thumbnail is the largest element, but PerfMatters delays it with lazy loading.
Solution: PerfMatters - Lazy Loading - Exclusions - add the YouTube thumbnail URL or element class.
Additional: Add fetchpriority="high" to the image so the browser prioritizes it.
Problem: Images of 1080x1080 are displayed at 134x134 (serving 8x larger than needed).
Solution: Use responsive images with srcset to serve the correct size per device.
Problem: CSS for components not visible on initial load (sliders, Instagram feed) blocks rendering.
Solution: PerfMatters - CSS - Unused CSS or use "Remove Unused CSS" to defer these styles.
Problem: Icon fonts don't have font-display: swap, causing briefly invisible text.
Solution: Configure in FontAwesome Kit settings or add custom CSS.
Unused JavaScript (469 KB):
swiper-bundle.min.js- 42 KB. Solution: Exclude via PerfMatters - Script Manager if no sliders on page.scripts.min.js- 43 KB (Divi core, difficult to reduce).sticky-elements.js- 27 KB. Solution: Disable if no sticky headers used.recaptcha- 357 KB. Reduced by deferring reCAPTCHA.
Unused CSS (194 KB):
style-static.min.css- 84 KB. Solution: Divi - Theme Options - Performance - Dynamic CSS.- FontAwesome - 49 KB. Solution: Use icon subset.
- reCAPTCHA styles - 41 KB. Removed by deferring reCAPTCHA.