No último post, conseguimos pontos importantes no Pagespeed comprimindo as imagens a serem utilizadas no site.

Sugestão de otimização do Pagespeed

“Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda” é um item citado pelo Pagespeed quando temos que carregar arquivos que impedem o carregamento de outros elementos da página. Em outras palavras é quando colocamos uma tag “link” ou “script” para carregar um arquivo js ou css no header do documento e o carregamento deste arquivo atrasa a exibição dos demais itens da página. Dependendo do tamanho do arquivo, o usuário pode ficar vários segundos olhando uma página em branco até que tudo seja carregado.

As boas práticas de programação já sugerem que coloquemos os carregamentos dos scripts no final da página, o que já resolveria o problema. Neste projeto, o atraso aconteceu pelo fato de eu usar uma CDN para buscar o CSS do FontAwesome, ou seja, por causa da tag “link” no header da página. Visualmente não apresentava nenhum defeito na renderização do site, mas felizmente o Pagespeed identificou a imperfeição.

Como solucionar

A ideia aqui é permitir que os demais elementos da página sejam exibidos de forma mais rápida, sem ter que aguardar a finalização do carregamento de arquivos de estilo ou de scripts.

Exemplo de carregamento comum de arquivo de estilo:

<link rel="stylesheet" href="css.css">

Agora, a solução:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="css.css"></noscript>

Explicando a lógica:

Conforme vimos acima, os navegadores carregam primeiro os arquivos referenciados pelas tags “link” do “header” e só quando este carregamento for concluído que começa o carregamento dos elementos do body.
Na solução proposta, a ideia é setar um valor inválido para o atributo “media”. Quando isso acontece, o navegador deixa de esperar o carregamento completo do arquivo e passa a renderizar os demais elementos da página.

Feito isso, alcançamos uma pontuação de 99 para mobile e 92 para Desktop:

Encontrou algum erro? Alguma dica interessante? Comente no post. Sua ajuda é muito bem vinda!

Compartilhe este post e ajude um amigo. Obrigado pela sua atenção e forte abraço!

Referência:

https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously



SOURCE

LEAVE A REPLY

Please enter your comment!
Please enter your name here