Gerador de CSS crítico

Um widget de navegador gratuito para um gerador CSS crítico avançado e um otimizador acima da dobra .

Otimizador acima da dobra

Gerador de CSS crítico e otimizador acima da dobra

Introdução

O gerador de CSS crítico permite resolver os Core Web Vitals do Google e remover a penalidade de CSS não utilizado , puramente com base no CSS mínimo. Permite obter um resultado perfeito em pixels .

O melhor resultado crítico de CSS é obtido em um navegador real.

O widget do navegador é executado na página na qual o CSS crítico deve ser extraído e, portanto, tem acesso nativo total ao ambiente CSS original.

Você pode selecionar as folhas de estilo ou elementos de folha de estilo embutidos dos quais extrair CSS crítico. Isso é útil para criar CSS crítico que pode ser compartilhado entre as páginas.

O widget do navegador também possui um recurso para remover CSS crítico das folhas de estilo.

A ferramenta é livre de espionagem. Sem Google Analytics ou rastreamento. Seguro de usar e pode ser usado localmente por meio de um cache do Service Worker.

O widget do navegador fornece um exemplo de software CSS crítico mais avançado que pode ser usado por meio de um navegador Chrome no Google Cloud. Veja para mais informações nosso plugin de otimização profissional .

Instalar

Para instalar o widget, arraste este link🗔 CSS crítico para a barra de favoritos ou copie e cole o código abaixo.

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="CSS cr&iacute;tico widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

Características

1. Gerador de CSS crítico avançado

   1. Custom desenvolvido com base em PostCSS , um dos melhores parsers CSS.
   2. Suporta várias janelas de visualização (desktop + mobile) para CSS crítico responsivo .
   3. O marionetista gosta de controle do navegador, incluindo clique, eventos do mouse (passar o mouse, mover etc.), rolagem, execução de código javascript personalizado e muito mais.
   4. Saída CSS crítica pura não otimizada bruta.

2. Otimizador acima da dobra

   1. Compare o CSS crítico com o CSS original.
   2. Réguas de medida de pixel personalizáveis.

3. Ferramentas avançadas de otimização

   1. Removedor de CSS não utilizado para remover CSS crítico das folhas de estilo.
   2. Software profissional de compactação CSS (minify) e otimização.
   3. Reparo de CSS quebrado. Uma ferramenta para corrigir CSS malformado.
   4. Prefixador automático. Uma ferramenta para aplicar prefixos de navegador a CSS.
   5. Estatísticas e análises de CSS.
   6. CSS embelezar.
   7. Lint CSS avançado.
   8. Removedor de CSS duplicado.
   9. Editor CSS avançado conectado ao lint CSS com dicas de otimização.

Como usar

Etapa 1: iniciar o widget do navegador em uma página

Navegue até a página da qual deseja extrair CSS crítico e inicie o widget do navegador. Clique aqui para instruções de instalação.

Etapa 2: gerar CSS crítico

O gerador de CSS crítico pode ser acessado por meio da guia Ferramentas no cabeçalho.

Configure o JSON usando as opções da documentação .

Passo 3: otimize o resultado

A saída do gerador de CSS crítico é bruta e requer otimização adicional, como compactação.

O botão Otimizar no menu do editor permite aplicar otimização e compactação de código avançadas.

Documentação

Gerador de CSS crítico

O gerador de CSS crítico aceita as seguintes opções.

Mostrar exemplo de configuração

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [
    "/\#C/",
    "/\.chattxt/"
  ],
  "propertiesToKeep": [],
  "propertiesToRemove": [
    "/(.*)transition(.*)/i",
    "cursor",
    "pointer-events",
    "/(-webkit-)?tap-highlight-color/i",
    "/(.*)user-select/i"
  ],
  "pseudoSelectorsToKeep": [
    "::before",
    "::after",
    "::first-letter",
    "::first-line",
    ":before",
    ":after",
    ":first-letter",
    ":first-line",
    ":visited",
    "/:nth-child.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "maxEmbeddedBase64Length": 1000,
  "strictParser": false,
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Defina a janela de visualização para descoberta de CSS acima da dobra."
    },
    {
      "wait": 1000,
      "notes": "Aguarde 1000ms para permitir que a viewport seja renderizada."
    },
    {
      "run": true,
      "notes": "Execute o gerador de CSS crítico (cálculo de CSS acima da dobra)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Acione o novo MouseEvent em um elemento DOM de menu de navegação."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Execute um script, neste caso, feche o menu antes de continuar com a próxima viewport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Ações de interface do usuário do gerador de CSS crítico

O gerador de CSS crítico fornece controle de navegador semelhante ao Puppeteer. O parâmetro ui_actions aceita uma matriz com objetos de ação da interface do usuário que definem as alterações de estado da interface do usuário em ordem cronológica.

{
  "run": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "script": "add_to_cart();",
  "notes": "descrição da ação da interface do usuário para uso pessoal"
}

Mostrar exemplo de configuração

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Defina a janela de visualização para descoberta de CSS acima da dobra."
    },
    {
      "wait": 1000,
      "notes": "Aguarde 1000ms para permitir que a viewport seja renderizada."
    },
    {
      "run": true,
      "notes": "Execute o gerador de CSS crítico (cálculo de CSS acima da dobra)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Acione o novo MouseEvent em um elemento DOM de menu de navegação."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Execute um script, neste caso, feche o menu antes de continuar com a próxima viewport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Removedor de CSS não utilizado

O removedor de CSS não usado usa o mesmo software que o extrator de CSS crítico e aceita quase as mesmas opções de configuração, incluindo controle de navegador semelhante ao Puppeteer por meio de ações de interface do usuário. A ferramenta também permite extrair CSS não utilizado.

Mostrar exemplo de configuração

{
  "atRulesToKeep": [
    "charset",
    "keyframes",
    "import",
    "namespace",
    "page"
  ],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "pseudoSelectorsToKeep": [
    "/:.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "strictParser": false,
  "ui_actions": [
    {
      run: true
    }
  ]
}

Removedor de CSS duplicado

O removedor de CSS duplicado permite comparar duas folhas de estilo e remover ou extrair o CSS duplicado.

Mostrar exemplo de configuração

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

O segundo campo de entrada aceita o número do índice da folha de estilo. Você pode encontrar o índice de uma folha de estilo na visão geral da folha de estilo na guia de configurações.

Visão geral do índice da folha de estilo

Você pode fazer upload de uma folha de estilo ou comparar folhas de estilo de URL(s) externo(s) criando uma nova folha de estilo. Você pode importar URLs ou fazer upload das folhas de estilo e usar o índice da nova folha de estilo no removedor de CSS duplicado.

Importar ou fazer upload de folhas de estilo

Uma vez configurado, pressione o botão para iniciar o removedor de CSS duplicado. Um comentário CSS exibirá estatísticas básicas do CSS reduzido resultante.

Resultado do removedor de CSS duplicado