"Eliminar CSS de bloqueio de renderização no conteúdo acima da dobra"

153

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?

Niet, o Escuro Absol
fonte
seu irônico que essa acima da dobra conteúdo para a imagem está tomando tempo para carregar :) Na verdade, para mim, a imagem nunca foi carregado finalmente
Anupam
@ Anupam Provavelmente foi excluído. Prntscr não é exatamente destinado a permanência, e eu não esperava essa pergunta a ser bastante tão popular.
Niet the Dark Absol
Sim, tudo bem, foi apenas um comentário luz
Anupam

Respostas:

182

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) ...!

Netsurfer
fonte
9
Ótima resposta. o problema é que o google parece penalizá-lo se você tiver uma página mais lenta. Por isso, eles o obrigam a aderir às idéias deles, sejam grandes ou totalmente estúpidas. :(
Steve Horvath
10
@Netsurfer, nem tudo o que vem do Google é o LOL do "Santo Graal". Eu estava coçando a cabeça para alcançar 100, mas parei aos 92 depois de ler este comentário.
kiranking
44
Você deve enfatizar mais, o fato de que o Google não segue suas próprias sugestões .
Sr. Smith
2
Solicitações adicionais tornar-se-ão menos problemáticas com HTTP / 2 e SPDY, da Wikipedia , "Melhorias de desempenho adicionais no primeiro rascunho de HTTP / 2 (que era uma cópia do SPDY) vêm da multiplexação de solicitações e respostas para evitar o problema. problema de bloqueio de linha no HTTP 1 (mesmo quando o pipelining HTTP é usado), compactação de cabeçalho e priorização de solicitações ".
RationalDev gosta de GoFundMonica
3
estava tentando obter minha página de 72 dispositivos móveis e 80 computadores, mas tinha o mesmo problema. Recuso-me a colocar meu css em algum lugar mais baixo e possivelmente degradar a experiência do usuário, mostrando FOUT!
Publicicknowledge
14

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).

elbowlobstercowstand
fonte
4
Obrigado por sua dedicação e pesquisa, no entanto eu pessoalmente não vai sonhar de fazer isso: D
Niet the Dark Absol
2
Então, qual é o objetivo, exceto tentar alcançar uma pontuação que realmente não ajude nada?
LarryBud
É lógico que você obteve sua pontuação mais alta, mas agora cada página do seu site terá mais peso. Ainda assim, boa descoberta.
EdwardM
@EdwardM Thanks! Veja minha nota 2 no post. Quando atingem uma segunda página, o css é armazenado em cache e o problema de peso desaparece.
Elbowlobstercowstand
1
@LarryBud O ponto de maior pontuação? Mais dinheiro para mim. Quanto maior o meu site no Google, maior a probabilidade de alguém clicar nele e se tornar um cliente. Como o Google usa a velocidade da página para determinar a classificação , decidi melhorar minha pontuação.
Elbowlobstercowstand
9

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.

freqüente
fonte
Parece DuckDuckGo também não se preocupa com a sua pontuação de página, verifique aqui
Chetabahana
6

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>
Amuk Saxena
fonte
1
Quando uso a função mencionada, ela reduz a pontuação da velocidade da página. A função que escrevi é: jsfiddle.net/kvfzbxxo Você pode me ajudar?
arsho
Eu implementei essa mesma função no URL a seguir e dê uma olhada na velocidade aqui " whitecashback.in ". Você pode olhar para o URL de origem e encontrar a função "loadCSS" no rodapé. Isso o ajudará a entender como eu implementei o código. A velocidade da página deve aumentar à medida que o css é carregado após a página.
Amuk Saxena
Eu usei este código: jsfiddle.net/sbpa1hun. Agora, o CSS não está sendo carregado no site.
Arsho #
Mencionei que depois de adicionar este código: jsfiddle.net/sbpa1hun que está sendo usado em seu site, meu site perdeu todos os estilos. Aumenta a velocidade da página, mas o CSS não está mais funcionando! Você pode me ajudar como? Estou chegando a cerca de 40 na velocidade da página. Mas, adicionando seu código, chego a cerca de 70. Mas não foi possível obter o CSS funcionando.
Arsho #
1
Se você estiver tentando fazer isso no jsfiddle, isso não funcionará. Tente este código no seu site, o jsfiddle bloqueará o carregamento de css para sites externos. Porque você está carregando css de fontes externas usando javascript. Então, tente fazer isso no seu site. Tente também incluir arquivos jquery, pois eles estão ausentes no seu script. Após incluir os arquivos js, isso pode funcionar. Observe também que sites https podem funcionar em jsfiddle. Você está recebendo este erro: "Bloqueado ao carregar conteúdo ativo misto". Você precisa resolver isso primeiro.
Amuk Saxena
4

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.

Glipt
fonte
2
Revista esmagamento tem pontuação de 100% no teste PageSpeed developers.google.com/speed/pagespeed/insights/...
Mo.
1

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

Tom B
fonte
Eu poderia estar entendendo errado, mas o Server Push não causaria o envio do CSS toda vez que você carregasse a página, em vez de apenas uma vez antes de ser armazenada em cache?
Niet the Dark Absol
Sim, existem algumas técnicas, como cookies, que podem ajudar a evitar isso. Dê uma olhada na seção em empurrar seletivamente aqui: nginx.com/blog/nginx-1-13-9-http2-server-push
Tom B
-1

Oi Para jQuery Você só pode usar assim

Use async e digite apenas "text / javascript"

Rajeev
fonte