Avaliações do editor: Avaliações do usuário:.ilfs_responsive_below_title_1 { largura: 300px; } @media(min-width: 500px) {.ilfs_responsive_below_title_1 { width: 300px; } } @media(min-width: 800px) {.ilfs_responsive_below_title_1 { largura: 336px; } }
Critical Path CSS Generator é uma ferramenta online gratuita que gera automaticamente o Critical Path CSS para sites e cria um arquivo CSS minificado solitário analisando todos os arquivos CSS usados pelo seu site.
Um dos motivos mais comuns para o carregamento lento de sites é o problema de Recursos de bloqueio de renderização ou Código como Scripts, Importações HTML, Folhas de estilo e muito mais.
Esses recursos impedem o navegador de iniciar o processo de renderização da página, atrasando sua Primeira Pintura, que é o tempo de duração entre a navegação e quando o navegador mostra os primeiros pixels na tela.
Remover esses recursos de bloqueio de renderização pode fazer com que sua página carregue significativamente mais rápido, melhorando assim a experiência do site e, eventualmente, a classificação do mecanismo de pesquisa.
Isso pode ser alcançado otimizando o Caminho de Renderização Crítico para que a exibição do conteúdo possa ser priorizada acima de cada outra coisa. No caso do CSS, o processo envolve a identificação do CSS do Caminho Crítico, que é o CSS real usado para renderização da página. O CSS não crítico restante pode ser carregado em um estágio posterior, pois não está relacionado à exibição da página na tela. Assim, você pode acelerar o seu site colocando o CSS não crítico no final da página e carregá-lo usando algum JavaScript adicional.
É exatamente aqui que o Critical Path CSS Generator é útil. Ele não apenas identifica o CSS do Caminho Crítico para seu site, mas também o coloca em um arquivo separado que você pode baixar em formato reduzido ou não reduzido.
Como funciona:
1. Navegue até o Critical Path CSS Generator usando o link fornecido no final deste artigo.
2. Digite o URL do site no campo obrigatório e clique em”Gerar CSS de caminho crítico”.
3. A ferramenta rastreará todo o seu site, analisará os arquivos CSS e identificará aqueles que são necessários para a parte da dobra do seu site (renderização da página). Esse processo pode demorar um pouco dependendo do seu site.
4. Quando o processo terminar, o CSS do Caminho Crítico é colocado em um arquivo separado que você pode baixar clicando em’Arquivo CSS Crítico Minificado’ou’Arquivo CSS Crítico Não Minificado’, dependendo do caso.
5. Além disso, todos os arquivos CSS também são combinados em um único arquivo que está novamente disponível para download clicando em”Arquivo CSS combinado reduzido ou Arquivo CSS combinado não reduzido”, conforme o caso.
6. Baixe ou copie o arquivo CSS do caminho crítico e cole seu conteúdo na tag’Head’da sua página da web. Você também deve mover todas as referências aos seus arquivos CSS/JavaScript (JS) para um local antes de fechar a tag Body. Em algumas páginas da Web, o JS pode ser necessário para renderizar o conteúdo da dobra. Se este for o caso, você deve garantir que apenas as referências aos arquivos CSS sejam movidas, enquanto as referências JS são deixadas no lugar.
7. As etapas acima garantirão que o CSS do caminho crítico tenha prioridade para acelerar a renderização e o carregamento do seu site, enquanto qualquer CSS não crítico é enviado e carregado no final. Assim, a questão dos recursos de bloqueio de renderização foi resolvida de maneira fácil e rápida.
Veredicto:
Minimizar recursos de bloqueio de renderização é extremamente importante para facilitar o carregamento rápido de páginas da web para agradar seus espectadores e melhorar os rankings do Search Engine dos sites. O Critical Path CSS Generator é uma ferramenta muito boa para isso e ajuda bastante a separar o CSS Crítico do CSS não crítico para que ele possa ser priorizado para renderização mais rápida de suas páginas.
Clique aqui para navegar até o Critical Path CSS Generator e fixar seus sites.
