Eu tenho usado as informações do Google PageSpeed ​​para tentar melhorar o desempenho do meu site e, até agora, ele se mostrou extremamente bem-sucedido. Coisas como adiar scripts funcionaram lindamente, já que eu já tinha uma versão interna do jQuery .ready()para adiar scripts até que a página fosse carregada completamente, tudo que eu precisava fazer era alinhar essa função específica e mover os scripts completos para o final da página. Isso funcionou muito bem.

Mas agora me vejo olhando o ponto amarelo restante na lista de verificação: "Eliminar CSS de bloqueio de renderização no conteúdo acima da dobra".

A maneira como meu CSS é configurado é ter um _.cssarquivo global que contenha estilos que se apliquem à estrutura da página em geral ou que sejam usados ​​em mais de um ou dois lugares no site. A maioria das páginas possui um arquivo CSS associado (por exemplo, party.phppossui party.css) contendo estilos específicos para essa página específica. Todos os arquivos CSS são armazenados em cache indefinidamente, conforme anexo /t=FILEMTIMEaos nomes dos arquivos (e os removo posteriormente com .htaccess) para garantir que os arquivos sejam atualizados quando forem alterados.

De qualquer forma, o Google recomenda incluir estilos críticos necessários para o conteúdo acima da dobra. O problema é ... bem, dê uma olhada nesta captura de tela: http://prntscr.com/1qt49e

Como você pode ver ... TODO o conteúdo está acima da dobra! As pessoas odeiam a rolagem, especialmente em um jogo que envolve o carregamento de muitas páginas. Por isso, projetei o site para caber em uma tela (assumindo uma resolução suficientemente boa). Isso significa que ... TODOS os estilos se aplicam ao conteúdo acima da dobra! Então ... existe alguma solução? Ou eu estou preso com essa marca amarela em uma pontuação quase perfeita?

Uma pergunta relacionada foi feita antes: o que é "conteúdo acima da dobra" no Google Pagespeed?

Em primeiro lugar, você deve observar que isso é tudo sobre ' páginas para celular '.
Então, quando interpretei sua pergunta e a captura de tela corretamente, isso não é para o seu site!

Pelo contrário, fazer algumas das coisas recomendadas pelo Google em suas diretrizes fará com que as coisas piorem do que sejam melhores para sites 'normais'.
E nem tudo o que vem do Google é o "Santo Graal" apenas porque vem do Google. E eles próprios não são um bom modelo se você der uma olhada na marcação HTML deles.

O melhor conselho que eu poderia lhe dar é:

• Defina largura e altura nos elementos substituídos no seu CSS, para que o navegador possa fazer o layout dos elementos e não precise aguardar o conteúdo substituído!

Além disso, por que você usa arquivos CSS diferentes, em vez de apenas um?
A solicitação adicional é pior que a pequena quantidade de volume de dados. E após a primeira solicitação, o arquivo CSS é armazenado em cache de qualquer maneira.

As coisas que sempre devemos cuidar são:

• reduzir o número de solicitações o máximo possível
• mantenha o peso geral da página o mais baixo possível

E não confunda seu cérebro sobre como obter 100% da ferramenta PageSpeed ​​Insights do Google ...! ;-)

Adição 1: aqui está a página na qual o Google nos mostra o que eles recomendam para Otimizar a entrega de CSS .

Como já foi dito, não acho que isso não seja realista nem faça sentido para um site "normal"! Porque principalmente quando você tem um design web responsivo , é mais certo que você usa consultas de mídia e outros estilos de layout. Portanto, se você não deseja carregar seu CSS primeiro e de maneira bloqueadora, receberá um FOUT ( Flash Of Unstyled Text ). Eu realmente não acredito que isso seja "melhor" do que pelo menos mais alguns milissegundos para renderizar a página!

Imho O Google está iniciando um novo "hype" (quando eu dou uma olhada em todas as perguntas sobre isso aqui no Stackoverflow) ...!

Como obtive uma 99/100 no Google Page Speed ​​(para celular)

TLDR: Comprima e incorpore todo o seu script CSS entre suas <style></style>tags.

Eu tenho perseguido essa pontuação indescritível de 100/100 há cerca de uma semana. Como você, o último item restante foi a eliminação de "CSS bloqueador de renderização para o conteúdo acima da dobra".

Certamente há uma solução fácil? Não. Experimentei a solução loadCSS do grupo Filament . .Js demais para o meu gosto.

E quanto aos asyncatributos para css (como js)? Eles não existem.

Eu estava pronto para desistir. Então me dei conta. Se vincular o script estava bloqueando a renderização, e se eu incorporasse todo o meu CSS na cabeça. Dessa forma, não havia nada para bloquear.

Parecia absolutamente errado incorporar 1263 linhas de CSS na minha tag de estilo. Mas eu dei um giro. Eu o comprimi (e o prefixei) primeiro usando:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Veja o pacote postcss do NPM .

Agora era apenas uma longa linha de CSS sem espaço. Coloquei o css em <style>your;great-wall-of-china-long;css;here</style>tags na minha página inicial. Em seguida, re-analisei com informações de velocidade da página.

Eu fui de 90/100 para 99/100 no celular !!!

Isso vai contra tudo em mim (e provavelmente você). Mas isso resolveu o problema. Eu estou apenas usando-o na minha home page por enquanto e incluindo o css compactado programaticamente através de um PHP include.

YMMV (sua milhagem pode variar) pendente na duração do seu css. O Google pode exigir muito do conteúdo acima da dobra. Mas não assuma; teste!

Notas

1. Por enquanto, só estou fazendo isso na minha página inicial para que as pessoas obtenham uma renderização RÁPIDA na minha página mais importante.

2. Seu CSS não será armazenado em cache. Eu não estou muito preocupado embora. No segundo em que eles acessarem outra página no meu site, o .css será armazenado em cache (consulte a Nota 1).

Algumas dicas que podem ajudar:

• Ontem, deparei-me com este artigo sobre otimização de CSS: perfil de CSS para ... otimização
  Muitas informações úteis sobre CSS e o que o CSS causa mais perda de desempenho.

• Vi a seguinte apresentação no jQueryUK sobre "segredos ocultos" no Googe Chrome (Canary) Dev Tools: DevTools Can do that . Confira as seções sobre Time to First Paint , repain e CSS caro.

• Além disso, se você estiver usando um carregador como o requireJS, poderá ver um dos plug-ins do carregador CSS, chamado require-CSS , que usa o CSSO - um otimizador que também otimiza a estrutura, por exemplo. mesclando blocos com propriedades idênticas. Usei-o algumas vezes e ele pode economizar bastante CSS de caso para caso.

Fora da pergunta: eu segundo o @Enzino na criação de um sprite para todos os pequenos ícones que você está carregando. Os tamanhos dos arquivos são tão pequenos que realmente não garantem uma ida e volta do servidor para cada ícone. Lembre-se também do número total de solicitações http simultâneas que o navegador pode fazer. Portanto, os pedidos de um número maior de ícones pequenos também são "bloqueadores de renderização". Embora uma página vazia seja comparada à sua, eu gosto de como o duckduckgo é carregado, por exemplo.

Consulte a página seguinte https://varvy.com/pagespeed/render-blocking-css.html . Isso me ajudou a me livrar do "Render Blocking CSS" . Usei o seguinte código para remover " Render Blocking CSS ". Agora, no insight de velocidade da página do google, não estou recebendo um problema relacionado ao CSS de bloqueio de renderização.

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

Eu também lutei com essa nova métrica de velocidade da página.

Embora eu não tenha encontrado uma maneira prática de obter minha pontuação de volta a% 100, há algumas coisas que achei úteis.

Combinar todos os css em um arquivo ajudou muito. Todos os meus sites estão de volta a% 95 -% 98.

A única outra coisa em que pude pensar foi alinhar todo o CSS necessário (o que parece ser a maior parte - pelo menos para minhas páginas) na primeira página para obter a pontuação mais alta possível. Embora possa ajudar na sua pontuação de velocidade, isso provavelmente tornará a página mais lenta.

A solução ideal para 2019 é o HTTP / 2 Server Push .

Você não precisa de nenhuma solução javascript hacky ou de estilos embutidos. No entanto, você precisa de um servidor que suporte HTTP 2.0 (qualquer versão moderna do servidor), o que exige que o servidor execute SSL. No entanto, com o Let's Encrypt, não há razão para não usar SSL de qualquer maneira.

Meu site https://r.je/ tem uma pontuação de 100/100 para dispositivos móveis e computadores.

O motivo desses erros é que o navegador obtém o HTML e precisa aguardar o download do CSS antes que a página seja renderizada. Usando HTTP2, você pode enviar o HTML e o CSS ao mesmo tempo.

Você pode usar o HTTP / 2 push configurando o cabeçalho do Link.

Exemplo do Apache (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

Para o NGINX, você pode adicionar o cabeçalho à sua etiqueta de localização na configuração do servidor:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

Com esse cabeçalho definido, o navegador recebe o HTML e o CSS ao mesmo tempo, o que impede o CSS de bloquear a renderização.

Você deseja ajustá-lo para que o CSS seja enviado apenas na primeira solicitação, mas o cabeçalho do Link é a solução mais completa e menos hacky para "Eliminar Javascript e CSS de Bloqueio de Renderização"

Para uma discussão detalhada, dê uma olhada no meu post aqui: Eliminar CSS de bloqueio de renderização usando HTTP / 2 Push

Considere usar um pacote para gerar automaticamente estilos embutidos a partir dos arquivos css. Um bom é o Grunt Critical ou Critical css para o Laravel .

Oi Para jQuery Você só pode usar assim

Use async e digite apenas "text / javascript"