Fix Image Layout Shifts

How to optimize playingcardtarot.app

Generic SiteScore: 56/100Analyzed March 2026Re-analyze this site

Fix Image Layout Shifts

High Impact+15 points estimated

Why It Matters

Unsized images cause 0.22 CLS score and create jarring content jumps during loading.

How to Fix

Add explicit width and height attributes to all images, especially the head-splash.webp causing the largest shift. Use CSS aspect-ratio property to maintain responsive behavior while reserving space. Preload the LCP image to prevent layout shifts.

0Needs Improvement

What This Score Means

A score of 56 falls in the "Needs Improvement" range (50-89). While it is better than poor (0-49), you should aim for 90+ to provide an optimal user experience and maximize SEO benefits.

This site is slower than approximately 35% of similar sites. The main issues affecting performance are image optimization, JavaScript execution time, and layout stability.

Addressing these issues could improve your conversion rate by 15-20% and boost your search engine rankings.

Core Web Vitals Analysis

LCP

Largest Contentful Paint

3.7s
Needs Improvement

Good: < 2.5s

Measures how long it takes for the main content to appear on screen

INP

Interaction to Next Paint

427ms
Needs Improvement

Good: < 200ms

Measures how quickly the page responds to user interactions

CLS

Cumulative Layout Shift

0.22
Needs Improvement

Good: < 0.1

Measures visual stability - how much content shifts during page load

AI Performance Analysis

This website has poor performance with a score of 56/100, indicating significant user experience issues. The biggest problem is excessive main-thread work taking 33.7 seconds, which is causing the page to become interactive only after 17.3 seconds - far too slow for users. The site is also suffering from render-blocking CSS files that could save 2.2 seconds in load time, layout shifts caused by unsized images, and image optimization issues that could save 116KB in downloads. Prioritizing the reduction of JavaScript processing time, deferring non-critical CSS, and properly sizing images would dramatically improve the site's performance and user experience.

Other Optimization Recommendations

Eliminate Render Blocking Resources

High Impact+25 points estimated

Why It Matters:

CSS files are blocking initial page render and delaying LCP by 2.2 seconds.

How to Fix:

Inline critical CSS for above-the-fold content directly in the HTML head. Defer loading of card-animations.css and theme CSS using media='print' onload='this.media="all"'. Consider replacing the large Tailwind CDN (127KB) with a custom build containing only used classes.

Reduce Main Thread Work

Medium Impact+10 points estimated

Why It Matters:

33.7 seconds of main thread blocking creates 430ms input delay and prevents user interactions.

How to Fix:

Profile JavaScript execution to identify bottlenecks in the 17.4s of 'Other' work. Break up long-running tasks using setTimeout or requestIdleCallback. Optimize forced reflows in theme-system.js by batching DOM reads and writes separately.

Keep Your Site Fast After Optimization

Once your site is optimized, maintain that speed. Use DeployHQ for zero-downtime, automated deployments—so performance fixes and updates go live safely every time, without breaking your site.

Explore DeployHQ →Trusted by engineering teams shipping high-performance sites

Want to Analyze YOUR Website?

Get AI-powered performance insights with actionable fixes in 30 seconds

More Generic Speed Tests

Generic Performance Resources

Frequently Asked Questions