Não é tudo, é somente o que é prioritário, poucas partes fundamentais de carregamento da página.
Segue a o fragmento de tag pagespeed-insights:
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:
<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.<style>
não é errado, basta saber o que você está fazendo. Segue a página.