Abordamos nas postagens anteriores a velocidade da página para celular e os esforços do Google para impulsionar a indexação do celular. Depois de criar e aconselhar muitos sites de comércio eletrônico para dispositivos móveis, descobri centenas de táticas de otimização. Nesta postagem, vou compartilhar os cinco principais problemas que afetam a velocidade da página para celular em minha experiência. Também vou oferecer dicas para avaliar e corrigir rapidamente.
5. Tags de rastreamento
Uma explosão de serviços de anúncios levou os sites a instalar dezenas de pixels, diminuindo o desempenho. Muitos sites confiam no Google Tag Manager por direito, mas não conseguem otimizar as tags nessa plataforma. Como resultado, o Google Lighthouse frequentemente sinaliza o Gerenciador de tags como um problema de velocidade da página para celular.
Para resolver, avalie quando você precisa de tags para disparar. Para a maioria dos sites, as tags não precisam ser acionadas imediatamente. Em vez disso, ajuste o gatilho no Gerenciador de tags para disparar após o carregamento de uma página.
4. Plugins do WordPress
Aproximadamente 20% de todos os sites do mundo usam o WordPress . Muitos desses sites têm uma dúzia ou mais de plugins para gerenciar várias partes da funcionalidade. Poucos desses plugins são otimizados para velocidade.
É difícil sugerir como otimizar cada plug-in. Trabalhe com seu desenvolvedor para identificar um ou dois que estão diminuindo a velocidade do site. Geralmente, são plugins para dar suporte a formulários ou comentários públicos na página. Concentre-se em alguns plug-ins que prejudicam seu desempenho e tente carregá-los após o carregamento completo de uma página, um processo chamado “DOM concluído”.
3. JavaScript
O JavaScript é onipresente na internet. Geralmente, ele gerencia várias interações de um site e geralmente é gravado em um único bloco grande. Porém, ela tributa os dispositivos móveis, que devem baixar e processar o grande bloco de código quando uma página é carregada pela primeira vez – antes que um usuário possa interagir com ela.
Na minha experiência, na esmagadora maioria dos sites, apenas 5% do código JavaScript baixado é necessário para preparar a página para o usuário. No entanto, a maioria dos usuários móveis é forçada a esperar de cinco a 10 segundos para que todo o JavaScript seja processado antes de poder avançar.
A correção mais fácil é dividir o JavaScript em partes menores. Faça com que seu desenvolvedor alimente no navegador móvel apenas a quantidade de JavaScript necessária para processar a página. Em seguida, adie o restante do JavaScript para carregar depois que uma página estiver disponível para o usuário.
2. Imagens não otimizadas
Grandes e pequenas empresas são culpadas do mais óbvio problema de velocidade móvel: grandes arquivos de imagem.
A correção aqui é simples. Converta todas as suas imagens para o novo formato WebP. Ele gera imagens de qualidade com metade do tamanho do arquivo dos formatos mais antigos.
No mínimo, substitua os tipos de arquivo PNG e SVG por JPEGs. Você pode se surpreender com quantos arquivos JPEG de 10 MB estão sobrecarregando seus usuários, sem uma boa razão. Digitalize todo o diretório do arquivo de imagem em busca de arquivos que não sejam JPEGs. Depois substitua-os. O culpado mais provável? Seu logotipo!
1. Componentes não armazenados em cache
A maioria dos proprietários de sites acredita que o armazenamento em cache em uma rede de entrega de conteúdo acelerará suas páginas. Portanto, eles ativam uma opção de “cache” no servidor de hospedagem ou pagam uma CDN de terceiros. Mas grandes componentes de seus sites provavelmente não permanecem em cache. O resultado são as velocidades da página que mal melhoram.
Determinar quais arquivos em seu site não são armazenados em cache exige bastante investigação. Prefiro uma ferramenta gratuita da Pingdom, que analisa seu site e avalia a velocidade de download de cada arquivo para cada URL. Pingdom comunica visualmente não apenas os arquivos lentos, mas também qual parte do download demorou mais tempo.
Existem quatro componentes para baixar um arquivo: (i) chamando o servidor, (ii) desenvolvendo uma resposta segura, (iii) aguardando uma resposta e (iv) recebendo o arquivo. A maioria dos webmasters acredita que o quarto item, recebendo o arquivo, é a causa de downloads lentos. Na minha experiência, no entanto, os outros três geralmente são os componentes mais lentos, e geralmente porque os arquivos não são armazenados em cache em um servidor geograficamente próximo da pessoa que está baixando o arquivo.
A página inicial do Walmart.com é um bom exemplo. O download de um dos arquivos HTM básicos em um dispositivo móvel é muito rápido, apenas 7,6 milissegundos. Mas demorou 21 vezes para uma resposta do servidor do Walmart reconhecer que eu havia solicitado o arquivo.
O download de um arquivo HTM básico em um dispositivo móvel no Walmart.com é muito rápido, apenas 7,6 milissegundos. Mas demorou 21 vezes para esperar o servidor do Walmart reconhecer a solicitação. Clique na imagem para ampliar. Fonte: Pingdom.
Indo um pouco mais fundo, vejo que o arquivo foi realmente armazenado em cache. No entanto, o cookie foi definido incorretamente para não armazenar o arquivo. Veja a linha abaixo para ‘cache-control’ definido como “no-store”.
Quando eu rapidamente apontei isso para o Walmart (meu ex-empregador), a equipe percebeu o erro e prontamente ativou o cache para muitos arquivos que foram configurados incorretamente. Você pode fazer as mesmas alterações nas configurações da sua CDN ou entrando em contato com o host do seu domínio. No WordPress, um plug-in pode configurar rapidamente seu cache.
O reparo do cache na página inicial do Walmart melhorou bastante a velocidade da página. Clique na imagem para ampliar. Fonte: Pingdom.
