Buscando pontuação 100% no PageSpeed Insight

resultado PageSpeed Insights

Já faz algum tempo que criei uma página de portfólio no GitHub pages: https://pedrosancao.github.io/. Não usei nenhuma biblioteca CSS ou JS então desde o início ela sempre teve bom desempenho no PageSpeed. Mas meu foco sempre foi desktop e otimizações para celular foram negligenciadas.

A algumas semanas fui conferir a pontuação e para minha surpresa me deparei com um placar amarelo e a pontuação na faixa dos 80%. Mas agora o PageSpeed mostra a avaliação para celular primeiro, a avaliação de desktop continuava verde, em 95%.

Após algumas horas de trabalho consegui levar a pontuação para 97% no mobile e 99% no desktop e hoje quero compartilhar as alterações feitas para alcançar esse resultado, começando pelas que geraram maior impacto.

O processo não é muito difícil porque a pagina de resultados dá dicas para melhorar a pontuação e tudo o que você precisa fazer é segui-las.

Converter imagens para WebP

WebP (pronunciado weppy) é um formato não tão popular mas que tem o melhor dos 3 mundos do JPG, PNG e GIF, suportando compactação, transparência e animação.

Apesar da expansão de internet móvel de alta velocidade a análise de desempenho para celular considera cada kb carregado. Na sessão “portfólio” tenho diversas imagens PNG, usei o site https://webp-converter.com/ para fazer a conversão, gerando uma redução de 75%.

Entretanto recomendo atenção, pois a conversão das fotos de JPG para WebP aumentaram o tamanho do arquivo e nesses casos não fiz a substituição.

Reduzir arquivos CSS

O único arquivo CSS externo do site era do Font Awesome, mas eu carregava o arquivo inteiro para usar apenas 6 ícones. Para unificar copiei o @font-face e apenas as regras utilizadas para o arquivo CSS principal.

A redução de apenas uma requisição ganhou mais alguns pontos. Em cenários mais complexos o Webpack pode ser a ferramenta ideal te auxiliar.

Adicionar imagens de fundo responsivas

O site tem um efeito de paralaxe usando as propriedades background-attachment: fixed e background-size: cover. Como usei a estratégia desktop first a mesma imagem era usada em todos os dispositivos, mas na visão mobile cerca de 60% da imagem não era vista. Fiz um corte da imagem com orientação vertical e utilizei media queries max-width e orientation: portrait para carregar a imagem de forma responsiva.

Essa última etapa levou o placar do PageSpeed para o patamar verde (90+). A partir daí foi apenas ajustar a resolução e qualidade da imagem até atingir a pontuação alvo.

Etapas futuras

Eu fiquei muito satisfeito com o resultado alcançado e parei por aqui.

Os últimos pontos para chegar a 100 estão relacionadas ao uso de webfonts e controle de cache. Por usar a infraestrutura do GitHub pages não tenho controle para mudar a política de cache então me resta abordar as fontes.

A estratégia que pensei envolve não utilizar fontes externas na porção do site vista assim que a página carrega e atrasar o carregamento da webfont usada no restante do site. Não sei se isso será suficiente para chegar nos 100 pontos. Se der certo volto nesse assunto aqui.

Obrigado pela atenção e até a próxima.

Um comentário sobre “Buscando pontuação 100% no PageSpeed Insight”

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s