A resposta curta: antes de mostrar a página, o navegador tem de descarregar o CSS e descobrir quais as imagens e os tipos de letra de que precisa. Duas dicas no código da página podem poupar-lhe esse tempo: o preload («vai buscar já este ficheiro, que vais precisar») e o preconnect («abre já a ligação a este servidor»). Usadas com moderação ajudam; em excesso, atrapalham.
O que cada uma faz
| Dica |
Quando usar |
Exemplo |
| preconnect |
Quando a página vai buscar coisas a outro servidor (tipos de letra, estatísticas) e precisa delas logo. |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| preload de uma imagem |
Para a imagem grande do topo da página, que o navegador só descobriria tarde (por exemplo, se vem de uma regra CSS). |
<link rel="preload" as="image" href="/imagens/topo.webp" fetchpriority="high"> |
| preload de um tipo de letra |
Para o tipo de letra do texto principal, para não aparecer um texto sem estilo e depois a trocar. |
<link rel="preload" as="font" type="font/woff2" href="/fontes/texto.woff2" crossorigin> |
O crossorigin é obrigatório nos tipos de letra, mesmo do seu próprio site: sem ele, o navegador carrega o ficheiro duas vezes. Estas linhas vão dentro de <head>.
CSS que bloqueia a página
O navegador não mostra nada até ter descarregado o CSS que está no <head>. Se o ficheiro for grande, a página fica em branco durante esse tempo. O que ajuda:
| 1 |
Carregue menos CSS. Muitos temas e plugins trazem folhas de estilo para coisas que o seu site não usa. Tire os plugins de que não precisa.
|
|
| 2 |
Ponha o CSS crítico na própria página (só o necessário para o que se vê primeiro) e carregue o resto depois. Fazer isto à mão dá trabalho; alguns plugins de cache fazem-no por si. No LiteSpeed Cache há opções de CSS na página de otimização: veja LiteSpeed Cache para WordPress.
|
|
| 3 |
Teste de cada vez. Uma otimização de CSS mal feita pode mostrar a página sem estilo durante um instante. Mude uma coisa, veja o site no telemóvel e meça.
|
|
Os enganos habituais
| Engano |
Consequência |
| Pôr preload em muitos ficheiros |
Todos disputam a mesma ligação e o que realmente importa chega mais tarde. |
| Pôr lazy loading na imagem do topo |
Atrasa a maior coisa visível. Veja Lazy loading de imagens e vídeos. |
| Fazer preload de um ficheiro que a página afinal não usa |
O navegador avisa na consola e o pedido foi desperdiçado. |
|
O seu site demora a mostrar o topo da página e não sabe porquê? Abra um pedido com o endereço.
Abrir pedido de suporte
|
PRODUTO RECOMENDADO Alojamento de sites com cPanel Domínio e SSL incluídos, cópias diárias e o painel que já conhece. desde 321,75 MT/mês (plano de 3 anos, com cupão) Ver planos |
Português
English
