Dicas para nota 100 no pagespeed.web.dev

Após quase uma década trabalhando com desenvolvimento web e cinco anos focado em otimização de páginas HTML, tenho algumas dicas que podem ser valiosas em relação ao front-end e à percepção do usuário sobre o site.

O Básico - 80 - 90

1. Otimizar Assets 1.1. Minificar JS e CSS 1.2. Otimizar imagens (preferencialmente no formato WebP) 1.3. Utilizar CDN e/ou uma política de cache eficiente para seu cenário 1.4. Otimizar fontes web

2. Lazy Load 2.1. JavaScript (defer, async, import) 2.2. Lazy load de imagens 2.3. Utilizar fachadas (como em vídeos do YouTube usando iframe) 2.4. Evitar requisições antes de renderizar o conteúdo inicial (com efeito shimmer e placeholders)

3. Preconnect e Prefetch 3.1. preconnect a CDN 3.2. prefetch para fontes e imagens visíveis (incluindo background-image)

O Eficiente - 90 - 99

4. Google Fonts API e FontAwesome 4.1 Carregar apenas os charset necessários 4.2 Mapear caracteres utilizados com font-weight e font-style (ideal em páginas estáticas) 4.3 Se possível, evite o uso de FontAwesome 4.4 Caso seja imprescindível, minifique o arquivo para conter apenas os ícones usados

5. Utilize classes CSS utilitárias : 5.1 carregue o CSS crítico (como containers, resets e estilos de tags) de forma inline com a tag <style> no head

Escovando bits - 100

6. Adie o carregamento do JavaScript para quando ele for necessário (após a primeira interação, como click ou scroll)
7. Reduza o HTML inicial e carregue o restante quando necessário 7.1 Para páginas estáticas, divida o HTML em seções e aplique a melhor técnica ou biblioteca (IntersectionObserver e fetch são úteis) 7.2 Para SPAs ou páginas com bibliotecas de construção de interfaces (React, Vue, etc.), a técnica é similar. A arquitetura de ilhas pode ser uma abordagem interessante, e o Astro.js oferece uma solução eficaz para isso.

Esse é o sumário. Na próxima semana, trarei exemplos de código e situações do dia a dia que já encontrei.

OBS : Não esqueça como o JavaScript funciona no navegador :

graph TD
    A[Call Stack] -->|Executa função| B(Event Loop)
    B -->|Verifica se a pilha está vazia| C{Call Stack Empty?}
    C -->|Yes| D[Microtask Queue]
    D -->|Processa Microtasks| B
    C -->|No| A
    D --> E[Task Queue]
    E -->|Processa Tasks| B