Oliver/odoo-expertos.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new site

Browse Source
This commit is contained in:
oliver
2026-08-28 10:11:11 -03:00
parent f533ff8e36
commit 585951c8ce
1380 changed files with 1540268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
add-performance.html
+178
View File
@@ -0,0 +1,178 @@
<!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 &lt; 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 &lt;/body&gt; tag:</p>
<div class="code-block">
<code>&lt;script src="/performance-optimizer.js" defer&gt;&lt;/script&gt;</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>
&lt;!-- Before (slow) --&gt;<br>
&lt;img src="https://images.pexels.com/photos/1181406/pexels-photo-1181406.jpeg" alt="..."&gt;<br><br>
&lt;!-- After (fast with lazy loading) --&gt;<br>
&lt;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"&gt;
</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>
&lt;!-- Before (blocks rendering) --&gt;<br>
&lt;script src="/components/header.js"&gt;&lt;/script&gt;<br>
&lt;script&gt;document.write(createHeader());&lt;/script&gt;<br><br>
&lt;!-- After (non-blocking) --&gt;<br>
&lt;div id="header-placeholder"&gt;&lt;/div&gt;<br>
&lt;script&gt;<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>
&lt;/script&gt;
</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>