Pergunta de otimização automática do WordPress: adiamento de CSS

Um usuário perguntou ?

Olá

Eu uso o plugin CriticalCSS para Autoptimize e o configurei para usá-lo.

Continuo vendo um problema com “Defer Unused CSS” no Google Page Speed ​​​​Insights e o principal culpado é o arquivo autooptimize_4f5035da460555b39c0083be68e69392.css.

Eu tenho alguns pontos aqui.

1. Você poderia colocar o link CSS normal na caveira, mas dentro das tags

Isso deixaria o carregamento CSS lento e não crítico após a página, levando a um desempenho muito melhor para os visitantes móveis.

(@optimizingmatters)

Faz 2 anos

1. Você poderia colocar o link CSS normal na caveira, mas dentro das tags

que é _quase_ exatamente o que AO faz; * CSS noscript é adicionado no cabeçalho * snippet JS está no rodapé para carregar o CSS para navegadores não suportados rel="preload"

Uma diferença; todo o CSS é carregado antes do carregamento, sem bloquear a renderização. Estou vendo isso com as pessoas por trás do loadCSS (é o que a AO usa e o Google recomenda), então podemos mudar isso.

Mas, coloque as coisas em contexto; O Google está mudando o nome de “Defer Unused CSS” para… “Remove Unused CSS” no Lighthouse, que é baseado em GPSI, o que sugere que o foco não é tanto na seção preguiçosa, mas no recurso “CSS não utilizado”.

Espero que isso esclareça, honestamente

lançador de tópicos

(@hades200082)

Faz 2 anos

Obrigado pela resposta rápida… Percebi a sutil diferença no nome no GPSI logo após postar.

Uma coisa a notar sobre sua abordagem …

usando o atributo onload da tag faz com que a ação queime uma carga quando a tag carregado… não quando a página está carregando. Isso pode fazer com que ele seja liberado antes que o carregamento da página seja concluído e ainda haverá capacidade de bloqueio, especialmente em uma conexão mais lenta, como dispositivos móveis.

Poderia ser melhor fazer da seguinte forma…?

1. Continue a fornecer a pré-carga e o número, mas sem nenhuma carga. 2. Anexe uma pequena tag de script assíncrona ao rodapé, logo antes da tag final do corpo que você está procurando. link[rel="preload"] e trocar com eles por rel="stylesheet"

(@optimizingmatters)

Faz 2 anos

Se não me engano, o descarregamento de CSS é considerado para bloquear a renderização, não a análise, portanto, o CSS inline (crítico) também não bloqueia a renderização.

Mas de forma mais geral; Quero acompanhar o padrão da indústria e (levemente) endossado pelo Google loadCSS-solution em vez de seguir meu próprio caminho 🙂



Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *