Como usar o carregamento lento para obter resultados de velocidade móvel perfeitos

Seu site passa no teste de velocidade do site móvel do Google? Não? Você pode querer olhar para imagens de carregamento lento.

O desempenho do site é crítico. Se o seu blog ou site está lento para carregar, é péssimo para a experiência do usuário.

Ninguém vai esperar cinco ou dez segundos para o seu site carregar. A velocidade da Internet ou velocidade de download precisa ser rápida. Um site lento aumentará sua taxa de rejeição e diminuirá sua taxa de conversão.

Quando você faz um teste de velocidade do site para o seu site, a velocidade da área de trabalho geralmente está boa. Mas qual é o desempenho de suas páginas em um teste de velocidade móvel?

Prepare-se para usuários móveis

A maioria dos programas de blogs e sites são razoavelmente bem construídos para visualização em desktop.

Eles usam design responsivo para entregar uma versão móvel.

Embora esta seja uma solução prática, ela tem uma desvantagem significativa.

Se o seu site for responsivo, funcionará em dispositivos móveis.

Mas os tamanhos de arquivo de suas imagens são para desktop, então a velocidade do seu site móvel é muito mais lenta.

Se você fizer um teste do Google Pagespeed Insights, seu resultado pode ser razoável e verde para desktop, mas parece assim para sua versão móvel.

Quando você considera que metade, ou até mais, dos visitantes do seu site estão usando dispositivos móveis, você realmente precisa melhorar o tempo de carregamento da página e a velocidade móvel.

O Google está se movendo para usar seu primeiro índice móvel como um fator de classificação.

Existem muitos serviços gratuitos de teste de velocidade de sites que você pode usar para monitorar o desempenho.

No entanto, nem todos os aplicativos de teste de velocidade medem as velocidades do site móvel. Portanto, não fique tranqüilo com bons resultados para a velocidade da página do seu site para computador.

O WebpageTest permite selecionar diferentes versões móveis, por isso é uma alternativa ao Google.

Certifique-se sempre de verificar sua versão móvel, pois os dispositivos se conectam com uma velocidade de conexão à Internet muito mais lenta.

Se seus resultados são insatisfatórios, você tem trabalho a fazer.

Como você melhora seu desempenho móvel?

Muitos fatores contribuem para diminuir a velocidade do site em computadores e dispositivos móveis.

Arquivos Javascript e CSS podem carregar muito cedo e bloquear a renderização. Se você estiver usando o WordPress, poderá corrigir isso facilmente usando um plug-in de cache.

Você pode ter um problema com seu host da Web que faz com que seu TTFB (Tempo para o primeiro byte) seja um pouco maior que meio segundo.

No entanto, a maioria dos hosts está, no máximo, apenas 10 a 20 por cento acima desse tempo, o que não é um grande problema.

O maior problema é quase sempre imagens e iframes. Quando você adiciona uma imagem a uma postagem, ela não é compactada, dimensionada ou formatada para dispositivos móveis.

Você pode usar um plugin para ajudar. Smush é um plugin popular para compactar imagens quando você carrega. O resultado vai melhorar um pouco a sua versão desktop, mas não a sua versão mobile.

Para melhorar o tempo de carregamento da página no celular, você precisa veicular imagens bem menores. Mas isso envolve muito trabalho.

Até recentemente, a melhor solução era ter uma versão móvel separada do seu site ou usar páginas AMP. De qualquer forma, todas as imagens no site existente tiveram que ser substituídas por imagens Next-Gen.

O trabalho envolvido em qualquer solução pode levar semanas ou meses, dependendo do tamanho do seu site.

Para a maioria dos proprietários de sites, se você não conhece uma API de observador de interseção ou img src, atributo data src, class lazy, img tags ou img class, então você não estará construindo um novo site móvel.

Vamos encarar. É tudo muito difícil e demorado.

Mais leitura: Como parar o formulário de contato e o spam de comentários

Aplicando o comportamento de carregamento lento

Felizmente, existe uma maneira fácil de corrigir o tempo de carregamento da página móvel. A resposta é fazer com que todas as suas imagens sejam carregadas lentamente.

O carregamento lento atrasa a entrega das imagens até que o leitor precise delas. À medida que um leitor rola uma página da Web, as imagens abaixo do que é visível são retidas.

Ao fazer isso, o tempo de carregamento inicial de uma página é reduzido enormemente em relação ao tempo de carregamento antecipado. Existem muitos plug-ins e soluções para adicionar carregamento lento ao seu blog ou site.

Executando testes de carga preguiçosa

Nas últimas semanas, tenho testado beta uma nova maneira de fazer um site móvel zing.

Você pode ter ouvido falar de redes de entrega de conteúdo, carregamento lento e imagens fora da tela adiadas.

Se você não tiver, eles são elementos que servem apenas para imagens quando uma página é carregada e quando um usuário rola a página. Você pode ter visto isso em ação em sites como o Medium.

Quando você visita um site pela primeira vez, uma imagem aparece borrada por uma fração de segundo. Eles são chamados de imagens de espaço reservado.

Então a imagem aparece claramente em um instante.

Isso é carregamento lento em ação. À medida que o usuário rola a página, as imagens não são carregadas até que sejam necessárias.

Faz uma página funcionar super rápido, especialmente em dispositivos móveis. Um carregador lento pode ser aplicado a qualquer número de imagens em páginas da web.

Mas ainda falta um elemento nesta solução. As imagens não estão nos formatos Next-Gen.

Felizmente, agora existe uma solução, para que você não precise substituir todas as suas imagens. Optimole é um plugin do WordPress que faz muito trabalho pesado.

Ele não apenas carrega imagens lentamente, mas também substitui suas imagens por um novo URL de imagem que fornece imagens de última geração.

Além disso, ele redimensiona as imagens na hora.

Testando o Optimole

Fiz muitos testes e, sempre que verificava uma página, ela tinha uma pontuação muito alta em um teste de velocidade móvel do Google.

Um dos meus testes foi com uma página da Web de largura total contendo dez imagens grandes descompactadas e sem tamanho.

Em outras palavras, apenas coloquei uma pilha de imagens grandes em uma página e a publiquei. (As imagens foram cortesia da Pixabay, então não precisavam de atribuição Creative Commons.)

A página era tão grande que não consegui mostrar uma imagem. Então, vou mostrar para vocês em um vídeo.

Quando testei a página no Google, esse foi o resultado.

Não é surpreendente, considerando o tamanho de todas as imagens.

Então eu ativei o Optimole. Você pode ver as configurações que usei abaixo. Isso é tudo que você tem que fazer.

Então, qual foi o resultado?

Para desktop, uma pontuação perfeita.

Para dispositivos móveis, uma pontuação quase perfeita.

No GTmetrix, a pontuação está próxima da perfeição novamente.

Lembre-se de que esses são resultados do mundo real para uma página cheia de imagens enormes em alta resolução.

Instalar o plug-in e obter uma chave de API levou apenas alguns minutos e apenas alguns segundos para ativar as configurações.

Assim, em menos de cinco minutos, eu tinha uma página e um site para celular quase perfeitos.

Saiba mais sobre Optimole

Para ver o plug-in em ação no mundo real, visite o site CodeinWP. Ele está rodando no Optimole, então você pode fazer testes na velocidade do site.

Você pode verificar seu site acessando o site da Optimole.

Clique no botão Check my Site e insira a URL do seu site. Você verá uma lista de todas as suas imagens e as economias que podem ser feitas em seu site.

Se você tem um site pequeno, há uma versão gratuita do plug-in disponível. Mas se você tiver um site grande, considere uma opção premium.

Você levou mais tempo para ler este artigo do que para fazer seu site funcionar super rápido para seus visitantes móveis. Então, o que você está esperando?

Mais alternativas de carregamento lento

Se você não deseja configurar a entrega CDN de imagens Nextgen, há muitas opções gratuitas que você pode usar.

O WordPress agora incorpora carregamento lento por padrão. No entanto, você tem pouco controle sobre como ele funciona. Geralmente é melhor usar um plugin para que você possa ajustar o desempenho.

Smush é um plugin popular e gratuito do WordPress para reduzir imagens quando você as carrega em sua biblioteca de mídia.

Mas tem a opção de ativar o carregamento lento. Eu tentei em alguns em meus sites, e funciona perfeitamente. Basta ativar a opção e pronto.

A3 Lazy Load é outro plugin gratuito. Eu o uso há muito tempo em muitos dos meus sites, incluindo este.

O que eu gosto é que posso refinar muitas opções. Tem a opção de excluir widgets, o que resolve alguns problemas de salto com alguns temas.

BJ Lazy Load existe há muito tempo. Tem mais de 90.000 usuários. No entanto, ele não é atualizado há algum tempo.

Lazy Load é um plugin gratuito com 60.000 instalações. É um componente gratuito do WP Rocket, que é uma solução completa para otimização de velocidade do site.

Um último plugin é o Lazy Load for Videos. É uma boa ferramenta para usar se você tiver muitos vídeos do Youtube em seu site.

Que escolha! Agora você não tem nenhum motivo para ter um site móvel lento.

Nota: Não tenho nenhuma afiliação com este produto. Minha análise do Optimole é baseada em minhas experiências como usuário.

Mais leitura: Verificadores de sites gratuitos e ferramentas de SEO