178 lines
6.1 KiB
HTML
178 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Performance Optimization Instructions</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
max-width: 900px;
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
}
|
|
h1 { color: #FF6B35; }
|
|
h2 { color: #FF8A50; margin-top: 30px; }
|
|
.code-block {
|
|
background: #2a2a2a;
|
|
border: 1px solid #FF6B35;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
overflow-x: auto;
|
|
}
|
|
code {
|
|
color: #FFB74D;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.warning {
|
|
background: rgba(255, 107, 53, 0.1);
|
|
border-left: 4px solid #FF6B35;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.success {
|
|
background: rgba(76, 175, 80, 0.1);
|
|
border-left: 4px solid #4CAF50;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
ul {
|
|
line-height: 1.8;
|
|
}
|
|
li {
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🚀 Performance Optimization Guide for Odoo Expertos</h1>
|
|
|
|
<div class="warning">
|
|
<strong>⚠️ Important:</strong> These optimizations are designed to improve performance WITHOUT breaking existing pages.
|
|
</div>
|
|
|
|
<h2>Current Performance Issues (PageSpeed Score: 63/100)</h2>
|
|
<ul>
|
|
<li>❌ Largest Contentful Paint: 9.4s (should be < 2.5s)</li>
|
|
<li>❌ Render-blocking resources: 1,270ms delay</li>
|
|
<li>❌ No HTTP caching headers</li>
|
|
<li>❌ Large unoptimized images (12MB from Pexels)</li>
|
|
<li>❌ D3.js loaded synchronously (1,380ms delay)</li>
|
|
</ul>
|
|
|
|
<h2>Quick Win #1: Use Optimized Server (Immediate Impact)</h2>
|
|
<div class="code-block">
|
|
<code>
|
|
# Stop current server (Ctrl+C)<br>
|
|
# Start optimized server with caching:<br>
|
|
node server-optimized.js
|
|
</code>
|
|
</div>
|
|
<div class="success">
|
|
✅ Adds HTTP caching headers<br>
|
|
✅ Enables ETags for efficient revalidation<br>
|
|
✅ Sets proper cache durations by file type<br>
|
|
✅ No code changes needed
|
|
</div>
|
|
|
|
<h2>Quick Win #2: Add Performance Script to Homepage</h2>
|
|
<p>Add this single line to your index.html before the closing </body> tag:</p>
|
|
<div class="code-block">
|
|
<code><script src="/performance-optimizer.js" defer></script></code>
|
|
</div>
|
|
<div class="success">
|
|
✅ Adds lazy loading for images<br>
|
|
✅ Defers D3.js loading<br>
|
|
✅ Implements browser caching<br>
|
|
✅ Preloads critical resources
|
|
</div>
|
|
|
|
<h2>Quick Win #3: Optimize Images (Manual but Effective)</h2>
|
|
<p>For images currently loading from Pexels, modify your HTML:</p>
|
|
<div class="code-block">
|
|
<code>
|
|
<!-- Before (slow) --><br>
|
|
<img src="https://images.pexels.com/photos/1181406/pexels-photo-1181406.jpeg" alt="..."><br><br>
|
|
|
|
<!-- After (fast with lazy loading) --><br>
|
|
<img class="lazy-bg" data-src="https://images.pexels.com/photos/1181406/pexels-photo-1181406.jpeg?auto=compress&cs=tinysrgb&w=800" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3C/svg%3E" alt="..." loading="lazy">
|
|
</code>
|
|
</div>
|
|
<p>Note: Adding <code>?auto=compress&cs=tinysrgb&w=800</code> reduces image size by ~70%</p>
|
|
|
|
<h2>Quick Win #4: Defer Component Loading</h2>
|
|
<p>Replace synchronous component loading in your HTML:</p>
|
|
<div class="code-block">
|
|
<code>
|
|
<!-- Before (blocks rendering) --><br>
|
|
<script src="/components/header.js"></script><br>
|
|
<script>document.write(createHeader());</script><br><br>
|
|
|
|
<!-- After (non-blocking) --><br>
|
|
<div id="header-placeholder"></div><br>
|
|
<script><br>
|
|
(function() {<br>
|
|
var s = document.createElement('script');<br>
|
|
s.src = '/components/header.js';<br>
|
|
s.async = true;<br>
|
|
s.onload = function() {<br>
|
|
document.getElementById('header-placeholder').innerHTML = createHeader();<br>
|
|
};<br>
|
|
document.head.appendChild(s);<br>
|
|
})();<br>
|
|
</script>
|
|
</code>
|
|
</div>
|
|
|
|
<h2>Verification: Check Cache Status</h2>
|
|
<p>Your Redis/Upstash cache API is configured but not being used. To verify it's working:</p>
|
|
<div class="code-block">
|
|
<code>
|
|
# Test cache API (in browser console):<br>
|
|
fetch('/api/cache?action=stats')<br>
|
|
.then(r => r.json())<br>
|
|
.then(console.log);<br><br>
|
|
|
|
# Expected response:<br>
|
|
{ success: true, stats: { keys: X, connected: true } }
|
|
</code>
|
|
</div>
|
|
|
|
<h2>Expected Performance Improvements</h2>
|
|
<ul>
|
|
<li>✅ LCP: 9.4s → ~3.5s (63% improvement)</li>
|
|
<li>✅ FCP: 2.2s → ~1.2s (45% improvement)</li>
|
|
<li>✅ Page Load: 12MB → ~4MB (67% reduction)</li>
|
|
<li>✅ PageSpeed Score: 63 → ~85+ (35% improvement)</li>
|
|
</ul>
|
|
|
|
<h2>Testing the Optimizations</h2>
|
|
<ol>
|
|
<li>Start the optimized server: <code>node server-optimized.js</code></li>
|
|
<li>Open Chrome DevTools → Network tab</li>
|
|
<li>Look for "from disk cache" or "304 Not Modified" on reload</li>
|
|
<li>Check Performance tab for improved metrics</li>
|
|
<li>Run PageSpeed Insights again after changes</li>
|
|
</ol>
|
|
|
|
<div class="warning">
|
|
<strong>💡 Pro Tip:</strong> Start with the optimized server (Quick Win #1) - it requires no code changes and provides immediate benefits!
|
|
</div>
|
|
|
|
<h2>Optional: Install Compression</h2>
|
|
<div class="code-block">
|
|
<code>
|
|
npm install compression<br><br>
|
|
|
|
# Then uncomment lines in server-optimized.js:<br>
|
|
const compression = require('compression');<br>
|
|
app.use(compression());
|
|
</code>
|
|
</div>
|
|
<p>This will add gzip compression, reducing transfer sizes by ~70% for text files.</p>
|
|
|
|
</body>
|
|
</html> |