8

Estava eu otimizando um site de um cliente que insiste em querer ter uma nota alta no PageSpeed Insights, e estou tendo problemas em "eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda".

Mesmo após minificar o CSS, ainda sou cobrado por estar carregando ele anteriormente ao site. Então me perguntei: "o que será que o Google me recomenda? Por o import CSS no final da página? Isso não deixaria ela completamente desestruturada até o carregamento final?"

Entrei nas recomendações e o Google me recomendou um carregamento de folha de estilo inline via <style>!

Não estou desmerecendo a gigante, mas, por que raios o PageSpeed Insights recomenda algo tão tosco, de acordo com os atuais padrões? Praticamente força o uso de um preloader, que por sua vez, atrapalha conexões lentas.

Um detalhe: nem os próprios sites da Google conseguem chegar perto do ideal. Um belo exemplo é o Google Fonts, que recebe uma nota mobile de 67/100.

6
  • Não entendi exatamente o que você quer saber; é se a Google realmente recomenda o uso da tag <style>? Neste caso, a própria pergunta responde a si própria, embora especule que eles devem efetuar algum algoritmo que nem sempre recomenda o uso de estilo inline.
    – Wtrmute
    Commented 21/06/2017 às 18:18
  • 1
    @Wtrmute editei a pergunta. Realmente, não estava muito clara.
    – bonifacio
    Commented 21/06/2017 às 18:21
  • Veja developers.google.com/speed/docs/insights/…. Uma das recomendações é priorizar o conteúdo acima da dobra da página, isto é, carregar os estilos necessários para renderizar cabeçalho e topo da página e deixar estilo do rodapé por exemplo por último. CSS inline só se for pequeno.
    – rodorgas
    Commented 21/06/2017 às 18:21
  • 1
    Ele diz: "incorpore in-line as partes fundamentais" e entenda que partes fundamentais não é o CSS inteiro. E mesmo antes disso ele te recomenda "adiar ou carregar de maneira assíncrona os recursos de bloqueio". Lembre-se que utilizar estilos na página dentro de <style> não é errado, basta saber o que você está fazendo. Segue a página.
    – Woss
    Commented 21/06/2017 às 18:21
  • 1
    @rodorgas: Esse documento fornece informações suficientes para uma resposta, embora a versão em português traduzida automaticamente esteja terrível. Por que você não tenta dar uma?
    – Wtrmute
    Commented 21/06/2017 às 18:29

3 Respostas 3

9

Não é recomendação do Google inserir CSS inline indistintamente, e sim num caso específico: quando a folha de estilos for pequena.

É verdade que a página fica desestruturada se você deixar o CSS pro final, mas se o CSS for muito grande a página pode demorar demais. Por que não um meio termo? Um pouco em cima (parte crítica) e o resto embaixo. O Google diz explicitamente: priorize o conteúdo visível:

No caso de um grande arquivo de CSS, será necessário identificar e inserir in-line o CSS necessário para processar o conteúdo da região acima da dobra e adiar o carregamento dos estilos restantes até depois que o conteúdo acima da dobra for processado.

Mesmo quando o CSS mínimo é demasiado grande para fazer inline, você pode usar essa lógica. Por exemplo:

<html>
  <head>
    <link rel="stylesheet" href="estilos-usados-acima-da-borda.css">
  </head>
  <body>
    conteúdo
    etc

    <link rel="stylesheet" href="outros-estilos.css">
  </body>
</html>

Lembre (a si mesmo ou a seu cliente) que indicadores como o PageSpeed Insights não foram feitos para ser gabaritados. Eles dão ótimas ideias e dicas de otimização, mas não têm como saber das particularidades de cada site.

7

Não é tudo, é somente o que é prioritário, poucas partes fundamentais de carregamento da página.

Segue a o fragmento de tag :

PageSpeed Insights é uma ferramenta disponibilizada pela Google que mede o desempenho de uma página em dispositivos mobile e desktop. Ele busca a URL duas vezes, uma com um user agent de dispositivo móvel e uma vez com um user agent de computador, gerando sugestões para torná-la mais rápida.

Sugestões, ou seja, baseado na opinião da Google, você pode fazer X coisa, para melhorar.

MAS, pode ser que o que a "gigante" esteja dizendo, prejudique o seu site, uma vez que ela não tem conhecimento de como você está desenvolvendo o seu site, mas isso é uma outra questão que você como desenvolvedor deve ver, calcular e fazer as modificações necessárias e não simplesmente fazer X coisa porque a gigante falou...

Citado isso, é importante olhar no próprio site da Google Developers, relacionado ao CSS, e ler com atenção o que dizem(ênfase minha):

A inserção in-line de pequenos CSS permite ao navegador prosseguir com o processamento da página.

Recomenda-se incorporar o CSS crítico in-line. Pequenas partes fundamentais, para carregar os estilos necessários para renderizar as partes necessárias para a sua página.

No caso de um grande arquivo de CSS, será necessário identificar e inserir in-line o CSS necessário para processar o conteúdo da região acima da dobra.

Ou seja novamente reforçando, recomenda-se inserir somente o que for irrefutávelmente necessário para renderizar o seu site e se for um grande arquivo CSS, você como desenvolvedor deverá analisar o que é importante carregar/estar carregado para evitar o bloqueio de renderização no conteúdo acima da borda e fazer as devidas alterações.

Exemplo

Se o documento HTML tiver esta aparência:

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

E o recurso small.css for assim:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

Insira o CSS crítico in-line da seguinte maneira:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Viu? Inseriu somente o que é importante, o conteúdo visível da página. Apesar de ter várias regras CSS no small.css, colocou o prioritário na página, que era a class=blue, o que o usuário vai ver de cara quando entrar na sua página.

Você também pode tentar adiar ou carregar de maneira assíncrona os recursos de bloqueio.

Sobre o seu cliente

Diga a ele que aquela é uma ferramenta, que gera sugestões e recomendações, que geralmente são genéricas para qualquer site, e não específicas para as suas páginas. Diga também que o importante não é a Google aprovar e sim seus clientes aprovarem. Quem quer ter um site que a Google aprova, mas que ninguém acessa?

Este teste verifica se a página usa práticas recomendadas comuns para desempenho. Uma pontuação alta está correlacionada a uma experiência do usuário rápida, mas não garante isso. - Google

É claro não ignore tudo que a Google disser, mas não aceite tudo cegamente procure o equilíbrio, entre a Google e seus clientes.

Nota: Particularmente eu nunca vi um site 100/100.

Somente relembrando, são recomendações, não são regras que sempre devem ser seguidas cegamente, elas são muito genéricas. Aplique-as as com moderação.

Fontes:

2
  • Consegui 100/100, basta remover todo o css e javascript do site :P Commented 23/06/2017 às 17:29
  • 4
    Desse jeito eu também consigo, é so gerar um erro 500 que dá 100/100 @DenisRudneideSouza Commented 23/06/2017 às 17:57
-2

Sem dúvida. De fato, aplicando cegamente as recomendações do Google se chega aos 100/100, mas com prejuízos ao layout do site (css alterado e nota 100) ou à performance de carregamento do site (css inline e nota 100). observei que é uma faca de dois gumes, consegue-se a nota no Pagespeed perdendo-se algo no site de alguma forma. Foi bom vir aqui e ler as considerações, agora posso desencanar dessa obsessão dos 100/100 (a nota do meu site é 97).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .