penthouse
2.3.3
Gerador CSS de caminho crítico
Penthouse é o gerador CSS de caminho crítico original, ajudando você a acelerar a renderização de páginas de seus sites. Forneça o CSS completo do seu site e a página para a qual deseja criar o CSS crítico, e a Penthouse retornará o CSS crítico necessário para renderizar perfeitamente o conteúdo acima da dobra da página. Leia mais sobre CSS de caminho crítico aqui.
O processo é automático e o CSS gerado está pronto para produção como está. Nos bastidores, a Penthouse está usando o Puppeteer para gerar o CSS crítico por meio do chromium:headless.
(Se não quiser escrever código, você pode usar a versão hospedada online.)
yarn add --dev penthouse
(ou npm install , se não estiver usando fio)
penthouse ( {
url : 'http://google.com' ,
cssString : 'body { color: red }'
} )
. then ( criticalCss => {
// use the critical css
fs . writeFileSync ( 'outfile.css' , criticalCss ) ;
} )https://github.com/pocketjoso/penthouse/tree/master/examples
Penthouse é otimizado para executar muitos trabalhos em paralelo. Uma instância de navegador compartilhada é reutilizada e cada tarefa é executada em sua própria guia do navegador. Existem tantos trabalhos que você pode executar em paralelo antes que sua máquina comece a ficar sem recursos. Para executar muitos trabalhos de forma eficaz, veja o exemplo de muitos URLs.
Somente url e cssString são obrigatórios – todas as outras opções são opcionais. Observe que espera-se que o arquivo html encontrado via url seja estilizado; penthouse não injeta nenhum estilo, apenas usa cssString (ou css ) para remover o css crítico.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| url | string | URL acessível. Use o protocolo file:/// para arquivos HTML locais. | |
| cssString | string | CSS original para extrair CSS crítico de | |
| CSS | string | Caminho para o arquivo css original no disco (se estiver usando em vez de cssString ) | |
| largura | integer | 1300 | Largura da janela de visualização crítica |
| altura | integer | 900 | Altura para viewport crítica |
| capturas de tela | object | Configuração para capturas de tela (não usada por padrão). Veja exemplo de captura de tela | |
| keepLargerMediaQueries | boolean | false | Mantenha as consultas de mídia mesmo para valores de largura/altura maiores que a janela de visualização crítica. |
| forçarIncluir | array | [] | Matriz de seletores de CSS para manter em CSS crítico, mesmo que não apareça na janela de visualização crítica. Strings ou regex (fe ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| forçarExcluir | array | [] | Matriz de seletores de CSS para remover em CSS crítico, mesmo que apareça na janela de visualização crítica. Strings ou regex (fe ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| propriedadesToRemove | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | Propriedades CSS para filtrar de CSS crítico |
| tempo esgotado | integer | 30000 | EM; abortar a geração crítica de CSS após esse período |
| marionetista | object | Configurações para marionetista. Veja exemplo de navegador de marionetes personalizado | |
| pageLoadSkipTimeout | integer | 0 | EM; pare de esperar pelo carregamento da página após esse período (para sites quando o evento de carregamento da página não for confiável) |
| renderWaitTime | integer | 100 | EM; tempo de espera após o carregamento da página antes do início da extração crítica de CSS (também antes da captura de tela "antes", se usada) |
| bloquearJSRequests | boolean | true | definido como false para carregar JS (não recomendado) |
| maxEmbeddedBase64Length | integer | 1000 | personagens; elimine recursos codificados em base64 in-line maiores que isso |
| maxElementsToCheckPerSelector | integer | undefined | Pode ser especificado para limitar o número de elementos a serem inspecionados por seletor css, reduzindo o tempo de execução. |
| agente do usuário | string | 'Penthouse Critical Path CSS Generator' | especifique qual string do agente do usuário ao carregar a página |
| cabeçalhos de página personalizados | object | Defina cabeçalhos http extras a serem enviados com a solicitação do URL. | |
| biscoitos | array | [] | Para formatação de cada cookie, consulte a documentação do Puppeteer setCookie |
| estrito | boolean | false | Faça a Penthouse lançar erros ao analisar o CSS original. Opção legada, não recomendada. |
| permitidoResponseCode | number|regex|function | Deixe a Penthouse parar se o código de resposta do servidor não corresponder a esse valor. Os tipos number e regex são testados em relação a response.status(). Uma function também é permitida e recebe Response como argumento. A função deve retornar um boolean . |
O registro é feito por meio do módulo debug no namespace penthouse . Você pode ver mais sobre o log em sua documentação.
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.jsInstale as dependências ausentes para que o Chrome headless seja executado:
sudo apt-get install libnss3
Você pode precisar de uma lista ainda mais longa de dependências, dependendo da sua dist, veja esta resposta
Um bom primeiro passo pode ser testar sua url + css no gerador de css de caminho crítico hospedado, para determinar se o problema está na entrada que você passa (css + url) ou na configuração local: https://jonassebastianohlsson.com /criticalpathcssgerador
Se você vir flashes de conteúdo sem estilo após aplicar seu CSS crítico, algo está errado. Abaixo estão as causas mais comuns e alguns conselhos gerais relacionados:
Geralmente você deve garantir que todos os elementos que deseja estilizar no CSS crítico apareçam (visíveis) no HTML da sua página (com Javascript desabilitado). A primeira renderização da sua página, aquela que o CSS crítico ajuda a tornar muito mais rápida, acontece antes do carregamento do JS, e é por isso que o Penthouse é executado com o JavaScript desativado. Portanto, se o seu HTML estiver essencialmente vazio ou se o seu conteúdo real estiver oculto antes de um botão giratório de carregamento ou similar, você precisará resolver isso antes de obter os benefícios de desempenho do uso de CSS crítico.
Se o seu HTML estiver bom, mas variar com base em coisas como o usuário logado, publicidade de terceiros, etc., você poderá usar o parâmetro forceInclude para forçar estilos extras específicos a permanecerem no CSS crítico, mesmo que a Penthouse não os veja. na página durante a geração crítica de CSS.
Esse problema pode acontecer se você tiver um elemento aparecendo no início do DOM, mas com estilos aplicados para mover para fora da janela de visualização crítica (usando posição absoluta ou transformações). A Penthouse não olha para a posição absoluta e transforma os valores e apenas verá o elemento como não fazendo parte da janela de visualização crítica e, portanto, a Penthouse não considerará seus estilos críticos (portanto, o elemento sem estilo será exibido quando o CSS crítico for usado). Solução: considere se ele realmente deveria aparecer tão cedo no DOM ou use a propriedade forceInclude para garantir que os estilos para "ocultar"/movê-lo sejam deixados no CSS crítico.
Problemas com caracteres especiais como → após a conversão? Certifique-se de usar o formato hexadecimal correto em seu CSS. Você sempre pode obter esse formato no console do navegador, digitando '→' .charCodeAt(0).toString(16) (a resposta para este glifo de seta é 2192 ). Ao usar o formato hexadecimal em CSS, ele precisa ser precedido por uma barra invertida, como: 2192 (fe content: '2192'; )
