O Page Speed é um indicador relacionado ao tempo de carregamento das páginas de um site, e atualmente é um dos fatores com maior relevância no ranqueamento dos resultados da busca orgânica do Google.

Esta métrica ganhou destaque e importância após a adesão do conceito mobile first por muitas empresas, como Google e Facebook, que é o desenvolvimento de soluções para internet com foco no carregamento mobile.

A Tray Corp está acompanhando as tendências tecnológicas e de mercado, e disponibiliza uma plataforma completa e atualizada. Neste artigo vamos explicar como atender às exigências e os pontos apresentados no relatório do PageSpeed Insights do Google.

O que é o PageSpeed Insights?

O PageSpeed Insights, sigla PSI, é uma ferramenta criada pelo Google, que analisa a velocidade de uma página da web, e gera um relatório com sugestões para tornar o seu site mais otimizado, com foco em melhorar a experiência do usuário.

Ao analisar a página de seu site o PSI categoriza a pontuação como boa, média ou ruim, sendo boa para páginas com a maioria das práticas recomendadas aplicadas, média para páginas com algumas otimizações comuns a serem feitas e ruim para páginas com muitas otimizações que devem ser realizadas.

O time de especialistas desenvolveu um vídeo com a explicação sobre a ferramenta, confira abaixo:

Quais são os resultados da auditoria do PSI?

Após a análise do página o Page Speed Insights gera um relatório com uma lista de práticas recomendadas. Os pontos relacionados podem ser de responsabilidade do lojista, da agência ou da plataforma.

Alguns resultados são passíveis de melhorias e outros serão mais informativos, que geralmente terão outro parecer conforme os demais pontos forem aplicados.

Seguem as principais auditorias apresentadas pelo PSI que são preferencialmente responsabilidade do lojista ou da agência:

1. Elimine recursos que impedem a renderização

Está relacionado ao carregamento dos arquivos CSS e JS, a recomendação do PSI é que seja feito no final do código da página.

Para os arquivos nativos da plataforma Tray Corp a configuração pode ser feita dentro de Configurações Gerais, opções “Otimizar carregamento de CSS” e “Otimizar carregamento de scripts”.

Para arquivos implantados por agências e de serviços terceiros, como chat e monitoramento, é necessário solicitar para sua agência ou um profissional de sua equipe efetuar as alterações.

Como estas mudanças podem impactar no visual da sua loja é fundamental realizar testes para identificar possíveis problemas.

2. Defina um tamanho adequado para as imagens

Ao publicar as imagens na plataforma tente utilizar os tamanhos pré estabelecidos no layout. Não é recomendado redimensionar as imagens via HTML ou código CSS.

Para redirecionamento de imagens entre dispositivos desktop e móveis, a equipe de desenvolvimento da Tray Corp está constantemente trabalhando para oferecer soluções que atendam às exigências e tendências.

3. Adie imagens fora da tela

A plataforma da Tray Corp possui uma funcionalidade chamada Lazy Loading que adia o carregamento das imagens dos produtos nos spots e banner principal, para exibir somente quando necessário.

Para imagens de outros banners com carrossel é necessário solicitar para sua agência ou um profissional de sua equipe incluir no atributo “configuracaoCarrossel” o valor lazyLoad:'ondemand'.

4. Reduza o CSS

Geralmente os arquivos CSS são criados com uma estrutura que facilita a leitura e análise dos desenvolvedores, utilizando espaços, quebras de linha, comentários e caracteres desnecessários, e que são ignorados pelos navegadores e outros aplicativos.

Para melhorar o desempenho de sua página é recomendado otimizar o seu CSS, removendo estes pontos ignorados pelos navegadores, e assim minificando o seu arquivo.

É necessário solicitar para sua agência ou equipe minificar os arquivos publicados na plataforma, e verificar com os serviços terceiros a disponibilidade dos arquivos otimizados. Os arquivos nativos da plataforma já são publicados minificados.

5. Reduza o JavaScript

Aconselhamos seguir as mesmas orientações do passo “Reduza o CSS”.

6. Remova CSS não utilizado

Para o processo de renderização de uma página o navegador precisa fazer a leitura de todas as folhas de estilo que constam no início do HTML, e geralmente nem todos os estilos serão utilizados na página carregada, fazendo com que o processo seja mais demorado.

É recomendado que no início do HTML seja apresentado somente o CSS crítico, que é o necessário para carregar a página, as demais folhas de estilo podem ser excluídas ou carregadas no final do código da página como descrito no ponto “Elimine recursos que impedem a renderização”.

7. Codifique as imagens com eficiência

A codificação de imagens com eficiência é o processo de comprimir as imagens sem perder qualidade, deixando o carregamento mais rápido e com menor o consumo de dados.

Este procedimento deve ser realizado em todas as imagens publicadas por sua agência ou por sua equipe.

8. Disponibilize imagens em formatos de última geração

Grande parte dos navegadores estão sendo desenvolvidos para aceitar formatos de imagem que possuem, na maioria das vezes, qualidade e compactação superiores em comparação ao JPEG e PNG, como os formatos JPEG 2000, JPEG XR e WebP.

A plataforma dispõe de uma funcionalidade em Configurações Gerais que converte as imagens publicadas para o formato WebP. Mesmo com este recurso ativo é recomendado seguir o passo “Codifique as imagens com eficiência”.

9. Evite redirecionamentos múltiplos de página

Páginas com muitos redirecionamentos reduzem a velocidade de carregamento, porque para cada processo o navegador precisa fazer uma nova requisição ao servidor.

10. Use formatos de vídeo para conteúdo animado

O uso de GIFs animados pode comprometer o desempenho no carregamento de suas páginas, oriente para sua agência ou sua equipe utilizarem formatos de vídeo como MPEG-4 e WebM.

 

Para os demais itens da auditoria é necessário uma análise da equipe de atendimento da Tray Corp para identificar as causas e os responsáveis, e assim indicar os procedimentos a serem tomados. Como:

  1. Reduza os tempos de resposta do servidor (TTFB)
  2. Minimize o trabalho da thread principal
  3. Reduza o tempo de execução de JavaScript
  4. Disponibilize recursos estáticos com uma política de cache eficiente
  5. Evite payloads de rede muito grandes
  6. Pré-conecte às origens necessárias
  7. Pré-carregue as principais solicitações

 

Como vimos o Page Speed Insights é muito importante para verificar o tempo de carregamento da sua loja virtual, e com o relatório você identifica pontos que pode melhorar em suas páginas e assim oferecer uma melhor experiência ao cliente.

Você pode acessar o site oficial do Page Speed Insights para realizar o teste e verificar as oportunidades de melhorias que a ferramenta sugere para seu site.

 

Eduardo Hortencio 
Tem mais dúvidas? Envie uma solicitação

Comentários

    Artigos nessa seção

    Ainda não encontrou o que está procurando?
    fale com um
    especialista pelo chat
    *De segunda a sexta, das 8h30 às 18h
    fale conosco por telefone
    ¹(11) 3136-0076 ou ²(41)98874 4973
    ¹ De segunda a sexta, das 8h30 às 18h.
    ² 24h para problemas que impeçam fechamento de pedidos.
    fale com um
    especialista pelo chat