⚠️ Important Notice
This page contains intentional performance issues for testing and educational purposes only. These examples demonstrate common performance problems like large unoptimized images, render-blocking resources, inefficient code, and missing optimizations. Always optimize for performance in production code.
Performance Issues
The following examples demonstrate common performance problems:
1. Large Unoptimized Images Images
Images that are too large, not compressed, or in wrong formats:
<!-- VIOLATION: Large unoptimized image -->
<img src="huge-image-5mb.jpg" alt="Photo">
<!-- No width/height, no lazy loading, wrong format -->
Loading large image (simulated): 5.2 MB
2. Render-Blocking Resources Blocking
CSS and JavaScript that block page rendering:
<!-- VIOLATION: Render-blocking CSS -->
<link rel="stylesheet" href="huge-stylesheet.css">
<!-- Blocks rendering until loaded -->
<!-- VIOLATION: Render-blocking JavaScript -->
<script src="large-library.js"></script>
<!-- Blocks parsing and rendering -->
Simulated render-blocking: 2.5s delay
3. No Image Lazy Loading Lazy Loading
All images load immediately, even if not visible:
<!-- VIOLATION: No lazy loading -->
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<!-- All load immediately, even below fold -->
4. Inefficient JavaScript JavaScript
Code that causes performance bottlenecks:
// VIOLATION: Inefficient nested loops
function findDuplicates(arr1, arr2) {
const duplicates = [];
for (let i = 0; i < arr1.length; i++) {
for (let j = 0; j < arr2.length; j++) {
if (arr1[i] === arr2[j]) {
duplicates.push(arr1[i]);
}
}
}
return duplicates; // O(n*m) complexity
}
// VIOLATION: DOM manipulation in loop
for (let i = 0; i < 1000; i++) {
document.getElementById('list').innerHTML += 'Item ' + i + ' ';
// Reflows on every iteration
}
// VIOLATION: No debouncing
window.addEventListener('scroll', function() {
// Expensive operation on every scroll
calculateHeavyOperation();
});
5. Missing Caching Headers Caching
Resources that aren't cached, causing repeated downloads:
HTTP/1.1 200 OK
Content-Type: text/css
6. No Compression (Gzip/Brotli) Compression
Resources sent without compression:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 500000
7. Too Many HTTP Requests Requests
Many small files instead of bundled resources:
<!-- VIOLATION: Too many requests -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="components.css">
<link rel="stylesheet" href="utilities.css">
<script src="jquery.js"></script>
<script src="plugin1.js"></script>
<script src="plugin2.js"></script>
<script src="plugin3.js"></script>
<script src="main.js"></script>
8. Synchronous JavaScript Synchronous
Blocking synchronous operations:
// VIOLATION: Synchronous XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', false); // false = synchronous
xhr.send(); // Blocks entire page
const data = xhr.responseText;
// VIOLATION: Blocking loop
function processLargeArray(array) {
for (let i = 0; i < array.length; i++) {
// Heavy computation blocks UI
heavyComputation(array[i]);
}
}
9. Unused CSS and JavaScript Unused
Loading code that's never used:
<!-- VIOLATION: Loading entire library for one function -->
<script src="lodash.min.js"></script> <!-- 70KB -->
<script>
// Only using one function
const result = _.map(array, fn);
</script>
<!-- VIOLATION: Loading entire CSS framework -->
<link rel="stylesheet" href="bootstrap.css"> <!-- 200KB -->
<!-- Only using 2 classes -->
10. No CDN or Resource Optimization CDN
Resources not served from CDN or optimized:
<!-- VIOLATION: No CDN, no versioning -->
<script src="/js/library.js"></script>
<link rel="stylesheet" href="/css/styles.css">
<!-- Served from single server, no caching strategy -->
11. Large Inline Styles and Scripts Inline
Large amounts of inline CSS/JS blocking rendering:
<style>
/* 5000 lines of CSS inline */
.class1 { ... }
.class2 { ... }
/* ... thousands more ... */
</style>
<script>
// 10000 lines of JavaScript inline
function hugeFunction() { ... }
// ... thousands more ...
</script>
12. No Resource Hints Hints
Missing preload, prefetch, or preconnect hints:
<!-- VIOLATION: No resource hints -->
<!-- Should use: <link rel="preload"> -->
<!-- Should use: <link rel="preconnect"> -->
<!-- Should use: <link rel="dns-prefetch"> -->
<link rel="stylesheet" href="critical.css">
<script src="important.js"></script>
13. Heavy Third-Party Scripts Third-Party
Loading heavy third-party scripts synchronously:
<!-- VIOLATION: Heavy third-party scripts blocking render -->
<script src="https://analytics.example.com/tracker.js"></script>
<script src="https://ads.example.com/ads.js"></script>
<script src="https://chat.example.com/widget.js"></script>
<!-- All blocking, no async/defer -->
14. No Code Splitting Splitting
Loading all code upfront instead of on-demand:
// VIOLATION: Loading everything upfront
import { Component1 } from './components/Component1';
import { Component2 } from './components/Component2';
import { Component3 } from './components/Component3';
// ... 50 more imports
// All loaded even if user never visits those pages
15. Memory Leaks Memory
Code that causes memory leaks:
// VIOLATION: Memory leak - event listeners not removed
function createComponent() {
const element = document.createElement('div');
window.addEventListener('scroll', function() {
// Listener never removed, accumulates
updateElement(element);
});
return element;
}
// VIOLATION: Circular references
const obj1 = { data: null };
const obj2 = { data: null };
obj1.data = obj2;
obj2.data = obj1; // Can't be garbage collected
Performance Optimizations
The following examples demonstrate proper performance practices:
1. Optimized Images Optimized
<!-- Compliant: Optimized image -->
<img
src="image.webp"
srcset="image-400.webp 400w, image-800.webp 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="Photo"
width="800"
height="600"
loading="lazy"
>
<!-- WebP format, responsive, lazy loaded, dimensions set -->
2. Non-Blocking Resources Non-Blocking
<!-- Compliant: Non-blocking CSS -->
<link rel="preload" href="critical.css" as="style">
<link rel="stylesheet" href="critical.css">
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<!-- Compliant: Deferred JavaScript -->
<script src="library.js" defer></script>
<script src="main.js" defer></script>
3. Image Lazy Loading Lazy
<!-- Compliant: Lazy loading -->
<img src="image1.jpg" loading="lazy" alt="Image 1">
<img src="image2.jpg" loading="lazy" alt="Image 2">
<img src="image3.jpg" loading="lazy" alt="Image 3">
<!-- Images load only when near viewport -->
4. Efficient JavaScript Efficient
// Compliant: Efficient algorithm
function findDuplicates(arr1, arr2) {
const set2 = new Set(arr2); // O(n) lookup
return arr1.filter(item => set2.has(item)); // O(n) overall
}
// Compliant: Batch DOM updates
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = 'Item ' + i;
fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment); // Single reflow
// Compliant: Debounced scroll handler
const debouncedHandler = debounce(function() {
calculateHeavyOperation();
}, 100);
window.addEventListener('scroll', debouncedHandler);
5. Proper Caching Headers Caching
HTTP/1.1 200 OK
Content-Type: text/css
Cache-Control: public, max-age=31536000, immutable
ETag: "abc123"
6. Compression Enabled Compressed
HTTP/1.1 200 OK
Content-Type: text/html
Content-Encoding: gzip
Content-Length: 50000
7. Bundled Resources Bundled
<!-- Compliant: Bundled resources -->
<link rel="stylesheet" href="styles.bundle.css">
<script src="app.bundle.js"></script>
8. Asynchronous Operations Async
// Compliant: Async/await
async function fetchData() {
const response = await fetch('/api/data');
const data = await response.json();
return data;
}
// Compliant: Non-blocking processing
async function processLargeArray(array) {
for (let i = 0; i < array.length; i += 100) {
const chunk = array.slice(i, i + 100);
await processChunk(chunk); // Yields to browser
}
}
9. Tree Shaking and Code Elimination Tree Shaking
// Compliant: Import only what you need
import { map } from 'lodash-es/map'; // Only imports map function
// Or use native alternatives
const result = array.map(fn); // Native, no library needed
// Compliant: CSS purging removes unused styles
// Only used CSS classes are included in final bundle
10. CDN and Resource Optimization CDN
<!-- Compliant: CDN with versioning -->
<script src="https://cdn.example.com/js/library.v2.1.0.js"></script>
<link rel="stylesheet" href="https://cdn.example.com/css/styles.v1.5.0.css">
<!-- CDN for faster delivery, versioning for cache busting -->
11. External Stylesheets and Scripts External
<!-- Compliant: External files, cached separately -->
<link rel="stylesheet" href="styles.css">
<script src="main.js"></script>
<!-- Can be cached, minified, and compressed -->
12. Resource Hints Hints
<!-- Compliant: Resource hints -->
<link rel="dns-prefetch" href="https://api.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.html">
13. Async Third-Party Scripts Async
<!-- Compliant: Async third-party scripts -->
<script async src="https://analytics.example.com/tracker.js"></script>
<script defer src="https://chat.example.com/widget.js"></script>
<!-- Or load after page load -->
<script>
window.addEventListener('load', function() {
const script = document.createElement('script');
script.src = 'https://ads.example.com/ads.js';
document.body.appendChild(script);
});
</script>
14. Code Splitting Splitting
// Compliant: Dynamic imports (code splitting)
const Component1 = () => import('./components/Component1');
const Component2 = () => import('./components/Component2');
// Load only when needed
if (route === '/page1') {
const Component1 = await import('./components/Component1');
// Component1 loaded on-demand
}
15. Proper Memory Management Memory
// Compliant: Clean up event listeners
class Component {
constructor() {
this.handleScroll = this.handleScroll.bind(this);
window.addEventListener('scroll', this.handleScroll);
}
destroy() {
window.removeEventListener('scroll', this.handleScroll);
}
}
// Compliant: Avoid circular references
const obj1 = { data: null };
const obj2 = { data: obj1 };
obj1.data = obj2; // OK, one-way reference
About This Page
This page is designed for:
- Testing performance analysis tools (Lighthouse, WebPageTest, etc.)
- Training developers on performance optimization
- Understanding common performance bottlenecks
- Learning web performance best practices
Remember: Always measure performance, optimize critical rendering path, and test on real devices. Use tools like Lighthouse, WebPageTest, and Chrome DevTools to identify and fix performance issues.