As métricas de desempenho de carregamento de páginas são essenciais para otimizar a experiência do usuário. Aqui estão conceitos-chave e métodos de medição relacionados.

TTFB (Time To First Byte)

O TTFB representa o tempo entre o início de uma requisição de rede e o recebimento do primeiro byte do servidor. Ele abrange a resolução DNS, o estabelecimento da conexão TCP, o envio da requisição HTTP e o tempo inicial de resposta. Redirecionamentos de página aumentam o TTFB; portanto, minimize-os para melhorar o desempenho.

Para otimizar o TTFB:

• Reduza consultas DNS desnecessárias.
• Implemente redes de entrega de conteúdo (CDN).
• Utilize técnicas de descarga antecipada (early flush) no servidor.
• Adicione cabeçalhos de cache adequados.

TTSR (Time to Start Render)

O TTSR indica quando elementos visuais começam a ser exibidos no navegador. Um TTSR curto reduz a percepção de espera do usuário. Alto consumo de CPU durante o carregamento inicial pode atrasar o TTSR, especialmente em páginas com muitas imagens ou scripts.

Para otimizar o TTSR:

• Melhore o TTFB primeiro.
• Reduza o consumo de CPU adiando scripts não críticos para o final do corpo do documento.
• Evite seletores CSS complexos e filtros CSS que sobrecarregam o navegador.

Exemplo de script para aproximar o TTSR no lado do cliente:

<script>
(function() {
    var startTime = new Date().getTime();
    var attempts = 0;
    var maxAttempts = 500;
    var checkInterval = setInterval(function() {
        attempts++;
        if ((document.body && document.body.scrollHeight > 0) || attempts >= maxAttempts) {
            clearInterval(checkInterval);
            var renderTime = new Date().getTime() - startTime;
            console.log('TTSR aproximado: ' + renderTime + ' ms após ' + attempts + ' verificações');
        }
    }, 10);
})();
</script>

Este script verifica periodicamente se o corpo do documento tem altura visível, simulando o início da renderização. Note que métodos precisos dependem do navegador; por exemplo, eventos como MozAfterPaint não são confiáveis para TTSR exato.

TTDC (Time to Document Complete)

O TTDC é o tempo até que o documento principal esteja totalmente carregado e pronto para interação, equivalente ao evento onload do navegador. Um TTDC baixo melhora a responsividade da página.

Para otimizar o TTDC:

• Otimize TTFB e TTSR primeiro.
• Adie carregamentos não essenciais para após o evento onload.
• Minimize recursos bloqueantes no cabeçalho.

Script para detectar o momento de conclusão do documento:

function onDocumentComplete(callback) {
    if (document.readyState === 'complete') {
        callback();
    } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function() {
            if (document.readyState === 'complete') callback();
        });
        window.addEventListener('load', callback, false);
    } else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState === 'complete') callback();
        });
        window.attachEvent('onload', callback);
    }
}

onDocumentComplete(function() {
    console.log('Documento completo: pronto para interação');
});

TTFL (Time to Fully Loaded)

O TTFL engloba todo o tempo necessário para carregar completamente a página, incluindo recursos adicionais carregados após o onload. É a soma do tempo de carregamento antes e depois do evento onload.

Para otimizar o TTFL:

• Aplique as otimizações de TTFB, TTSR e TTDC.
• Utilize carregamento assíncrono ou preguiçoso (lazy loading) para recursos não críticos.
• Implemente carregamento sob demanda para componentes dinâmicos.

Otimizando o TTFB

Ao analisar o TTFB, verifique os componentes principais: resolução DNS, tempo de conexão e tempo de resposta do servidor. Se a resolução DNS for lenta, considere usar serivdores de nomes mais confiáveis. Se a conexão inicial for demorada, a infraestrutura do servidor pode precisar de melhorias. Caso contrário, otimize o código do servidor ou atualize o hardware. O tempo ideal de TTFB próximo a zero indica eficiência sem necessidade imediata de otimização adicional.