slow-lcp.html•5.56 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slow LCP - Hero Image Problem</title>
<!-- Problem 1: No preconnect for external domains -->
<!-- Missing: <link rel="preconnect" href="https://images.example.com"> -->
<!-- Problem 2: Render-blocking CSS before LCP element -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- Problem 3: Large inline CSS blocking render -->
<style>
/* 10KB of CSS that blocks rendering */
${Array.from({length: 200}, (_, i) => `
.unused-class-${i} {
background: linear-gradient(${i}deg, #${Math.floor(Math.random()*16777215).toString(16)}, #${Math.floor(Math.random()*16777215).toString(16)});
box-shadow: 0 ${i}px ${i*2}px rgba(0,0,0,0.${i % 10});
transform: rotate(${i}deg) scale(${1 + i * 0.001});
}
`).join('\n')}
/* Actual styles for the page */
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
}
.hero-image {
width: 100%;
max-width: 1200px;
height: auto;
}
</style>
<!-- Problem 4: JavaScript in head without async/defer -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<!-- Problem 5: Heavy synchronous script execution -->
<script>
// Blocking script that delays LCP
console.log('Starting heavy computation...');
const start = Date.now();
let sum = 0;
for (let i = 0; i < 10000000; i++) {
sum += Math.sqrt(i);
}
console.log(`Computation took ${Date.now() - start}ms`);
</script>
</head>
<body>
<!-- Problem 6: Content above the fold pushes LCP element down -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Slow LCP Site</a>
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</nav>
<!-- Problem 7: Lazy-loaded content before LCP -->
<div id="dynamic-content-1"></div>
<div id="dynamic-content-2"></div>
<main class="hero-section">
<!-- Problem 8: Hero image without preload -->
<!-- Missing: <link rel="preload" as="image" href="..."> -->
<!-- Problem 9: Image from slow external domain -->
<!-- Problem 10: No width/height attributes causing layout shift -->
<!-- Problem 11: Large unoptimized image (simulated with 4K resolution) -->
<img
class="hero-image"
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=3840&h=2160&fit=crop"
alt="Hero Image - Mountain Landscape"
>
<!-- This is the LCP element but it loads very slowly due to:
- No preload hint
- No preconnect to unsplash
- Render-blocking resources above
- Large image size
- No responsive images (srcset)
-->
</main>
<!-- Problem 12: JavaScript that modifies DOM before LCP -->
<script>
// Inject content that delays LCP
setTimeout(() => {
document.getElementById('dynamic-content-1').innerHTML = `
<div style="height: 200px; background: #ddd;">
<h2>Dynamically inserted content</h2>
<p>This appears before the hero image loads</p>
</div>
`;
}, 100);
setTimeout(() => {
document.getElementById('dynamic-content-2').innerHTML = `
<div style="height: 300px; background: #ccc;">
<h2>More dynamic content</h2>
<p>This also delays the LCP</p>
</div>
`;
}, 500);
</script>
<!-- Problem 13: Third-party scripts competing for bandwidth -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script src="https://connect.facebook.net/en_US/sdk.js"></script>
<script src="https://platform.twitter.com/widgets.js"></script>
<!-- Problem 14: Web fonts loaded late causing text to reflow -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<script>
// Problem 15: Additional images loaded before LCP element
window.addEventListener('DOMContentLoaded', () => {
// Preload other images that compete with LCP
['image1.jpg', 'image2.jpg', 'image3.jpg'].forEach(img => {
const link = document.createElement('link');
link.rel = 'prefetch';
link.as = 'image';
link.href = `https://example.com/${img}`;
document.head.appendChild(link);
});
});
</script>
</body>
</html>