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
-
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 -
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) -
Preconnect e Prefetch
3.1.preconnect
a CDN
3.2.prefetch
para fontes e imagens visíveis (incluindobackground-image
)
O Eficiente - 90 - 99
-
Google Fonts API e FontAwesome
4.1 Carregar apenas os charset necessários
4.2 Mapear caracteres utilizados comfont-weight
efont-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 -
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
- Adie o carregamento do JavaScript para quando ele for necessário (após a primeira interação, como
click
ouscroll
) - 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
efetch
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