Com a popularização da internet e do uso de dispositivos móveis nos últimos anos, para acompanhar o monitoramento de sites, lojas virtuais e aplicativos, a gestão de marketing digital e de comércio eletrônico começou a adotar outras métricas além do número de acesso e taxa de conversão, como o Page Speed.

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 com presença web, como Google e Facebook, que é o desenvolvimento de soluções para internet com foco no carregamento mobile e adaptável com dispositivos desktop, alguns anos atrás o desenvolvimento era o inverso.

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, é um serviço criado pelo Google, sendo uma ferramenta que analisa o conteúdo e a velocidade de uma página da web, e gera um relatório com sugestões para tornar o seu site mais otimizado, assim focando numa melhor 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 a serem feitas.

Receber uma pontuação Ruim não é o fim do mundo, grande parte dos ajustes são simples e depende de sua equipe interna ou agência.

Quais são os resultados da auditoria do PSI?

Após a análise do página o PSI gera um relatório com uma lista de práticas recomendadas, e assim melhorando o desempenho de velocidade. 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.

11. Evite DOM de tamanho excessivo

DOM é basicamente a quantidade de códigos que sua página possui, quanto mais elementos sua página possuir mais tempo necessário para carregar. Lembre-se do menos é mais, quanto menor for a quantidade de código mais rápido será o tempo de carregamento.

12. Garanta que o texto continue visível durante o carregamento da webfont

Alguns projetos fazem uso de tipografia de fontes de serviços terceiros com links externos, exigindo que o navegador faça o download do arquivo primeiro para depois exibir o texto.

Para o texto fique visível durante o carregamento da fonte, sua agência ou sua equipe deve usar recursos CSS de exibição de fonte.

Para as demais auditorias é 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.

 

Diago Oliveira 
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