<h2>Profiling: Entendendo o Desempenho Real</h2>
<p>O profiling é a base de qualquer otimização séria. Não podemos melhorar aquilo que não medimos. A maioria dos desenvolvedores tenta otimizar por intuição, mas isso é perigoso — o gargalo real está sempre onde menos esperamos. O Chrome DevTools oferece ferramentas nativas excelentes para isso.</p>
<p>Comece abrindo a aba <strong>Performance</strong> no DevTools (F12 > Performance). Clique em "Record", interaja com sua página e pare a gravação. Você verá um gráfico detalhado mostrando CPU, memória, FPS e a timeline exata de cada operação. A métrica crucial aqui é <strong>Long Tasks</strong> — qualquer operação que ocupa mais de 50ms bloqueia a thread principal, travando a experiência do usuário.</p>
<pre><code class="language-javascript">// Exemplo: Identificar código lento
console.time('processamento');
function processarDados(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i] * 2; // operação pesada
}
return total;
}
const dados = Array.from({ length: 1000000 }, (_, i) => i);
processarDados(dados);
console.timeEnd('processamento');
// Output: processamento: 2.5ms</code></pre>
<p>Use também <code>performance.mark()</code> e <code>performance.measure()</code> para medir seções específicas do seu código:</p>
<pre><code class="language-javascript">performance.mark('inicio-fetch');
fetch('/api/dados')
.then(r => r.json())
.then(data => {
performance.mark('fim-fetch');
performance.measure('tempo-fetch', 'inicio-fetch', 'fim-fetch');
console.log(performance.getEntriesByName('tempo-fetch')[0].duration);
});</code></pre>
<h2>Lazy Loading: Carregando Apenas o Necessário</h2>
<p>Lazy loading é uma estratégia simples mas poderosa: não carregue recursos que o usuário ainda não viu. Para imagens, o navegador moderno oferece o atributo nativo <code>loading="lazy"</code>. Para JavaScript e componentes complexos, você precisa de lógica mais sofisticada.</p>
<p>A <strong>Intersection Observer API</strong> é a forma moderna e eficiente de detectar quando um elemento entra no viewport:</p>
<pre><code class="language-javascript">// Lazy loading nativo para imagens
<img src="placeholder.jpg"
loading="lazy"
data-src="imagem-real.jpg"
alt="descrição">
// Lazy loading programático com Intersection Observer
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.addEventListener('load', () => {
img.classList.add('loaded');
});
observer.unobserve(img);
}
});
}, {
rootMargin: '50px' // começa a carregar 50px antes de aparecer
});
document.querySelectorAll('[data-src]').forEach(img => {
observer.observe(img);
});</code></pre>
<p>Para componentes JavaScript, use <strong>dynamic imports</strong>. Isso permite que você carregue módulos apenas quando necessário:</p>
<pre><code class="language-javascript">// Módulo pesado carregado sob demanda
button.addEventListener('click', async () => {
const { iniciarModal } = await import('./modal-pesado.js');
iniciarModal();
});</code></pre>
<p>Combine lazy loading com <strong>code splitting</strong> em bundlers como Webpack ou Vite para resultar em chunks menores no carregamento inicial. A primeira impressão é crítica.</p>
<h2>Web Vitals: As Métricas que Importam</h2>
<p>Google definiu três <strong>Core Web Vitals</strong> que afetam diretamente seu ranking e experiência do usuário. Estas são as métricas que você deve monitorar obsessivamente.</p>
<h3>Largest Contentful Paint (LCP)</h3>
<p>O tempo até o maior elemento visível carregar. Objetivo: <strong>< 2.5s</strong>. Otimize imagens, minimize CSS crítico e use CDN. Um LCP ruim geralmente indica servidor lento ou assets não otimizados.</p>
<h3>First Input Delay (FID) / Interaction to Next Paint (INP)</h3>
<p>O tempo de resposta do navegador à primeira interação do usuário. Objetivo: <strong>< 100ms</strong>. Reduza JavaScript bloqueante usando <strong>requestIdleCallback()</strong> ou web workers para operações pesadas:</p>
<pre><code class="language-javascript">// Trabalho pesado em thread separada
const worker = new Worker('processador.js');
button.addEventListener('click', () => {
worker.postMessage({ dados: largosArrays });
worker.onmessage = (event) => {
console.log('Resultado processado:', event.data);
};
});
// processador.js
self.onmessage = (event) => {
const resultado = event.data.dados.map(x => x * 2);
self.postMessage(resultado);
};</code></pre>
<h3>Cumulative Layout Shift (CLS)</h3>
<p>Mudanças inesperadas no layout enquanto o usuário lê. Objetivo: <strong>< 0.1</strong>. Reserve espaço para imagens e anúncios:</p>
<pre><code class="language-html"></code></pre>
<p>Meça Web Vitals com a biblioteca oficial do Google:</p>
<pre><code class="language-javascript">import { getCLS, getFID, getFCP, getLCP } from 'web-vitals';
getCLS(console.log); // CLS
getFID(console.log); // FID
getFCP(console.log); // FCP
getLCP(console.log); // LCP
// Enviar para seu analytics
getLCP(metric => {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify(metric)
});
});</code></pre>
<h2>Conclusão</h2>
<p>Dominar performance em JavaScript envolve três pilares: <strong>medir antes de otimizar</strong> (profiling), <strong>carregar recursos sob demanda</strong> (lazy loading) e <strong>rastrear as métricas que importam</strong> (Web Vitals). Comece pelo Chrome DevTools para identificar gargalos reais, implemente lazy loading onde faz sentido (imagens, componentes pesados) e monitore continuamente seus Web Vitals em produção. A diferença entre um site rápido e um lento não é complexidade técnica — é rigor na medição e disciplina na otimização.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://developer.chrome.com/docs/devtools/performance/" target="_blank" rel="noopener noreferrer">Chrome DevTools Performance</a></li>
<li><a href="https://web.dev/vitals/" target="_blank" rel="noopener noreferrer">Web Vitals by Google</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noreferrer">Intersection Observer API - MDN</a></li>
<li><a href="https://javascript.info/modules-dynamic-imports" target="_blank" rel="noopener noreferrer">Dynamic Imports - JavaScript.info</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" target="_blank" rel="noopener noreferrer">Web Performance APIs - MDN</a></li>
</ul>