O que é carregamento lento? Um conceito claro

Um conceito claro sobre o que é carregamento lento. Como melhorar a velocidade de carregamento do site aplicando a técnica de carregamento lento. Quais são os plugins de carregamento lento de imagem recomendados e muito mais?

O carregamento lento é uma técnica na qual as imagens, vídeos e outros arquivos de mídia são carregados somente quando necessário (neste caso, a página é rolada para baixo até a imagem).

O carregamento lento foi popularizado pelo Google. O Google implementou na maioria dos sites de alto tráfego que eles possuem.

Na verdade, é uma ótima maneira de melhorar o desempenho do seu site para seus usuários.

Essa é uma maneira melhor de implementar o carregamento dinâmico de recursos do que o pré-carregamento porque é preguiçoso por natureza e só carrega os ativos quando necessário.

Ao rolar a página para baixo, os arquivos de mídia são carregados e as imagens em particular. Isso reduz significativamente o tempo de carregamento inicial da página, reduzindo o número de solicitações feitas para recursos HTML, CSS e JavaScript.

Imagens de carregamento lento sempre podem ser implementadas usando plugins de terceiros, mas na verdade é bem simples de implementar em seu site existente se você estiver familiarizado com o código HTML/CSS.

Por que devo adicionar carregamento lento ao meu site?

Por muito tempo, carregar todos os elementos da página em paralelo era a melhor prática. Mas hoje é muito comum que os usuários tenham conectividade limitada e redes móveis rápidas.

Por esse motivo, é uma boa ideia carregar apenas o que você precisa no início e, em seguida, carregar recursos adicionais posteriormente, quando forem necessários.

O carregamento lento também pode reduzir a quantidade de trabalho que precisa ser feito pelo navegador no momento do carregamento da página. Em última análise, isso significa que você obterá um carregamento de página mais rápido para o usuário.

Você pode implementar o carregamento lento em seu site de várias maneiras. Como qualquer técnica, existem alguns prós e contras associados a cada método.

Como adicionar carregamento lento no site WordPress?

Você pode adicionar carregamento lento a qualquer site com algumas adições simples de código CSS e JavaScript. Tudo o que você precisa é de um pouco de marcação HTML também.

Mas neste post, falarei apenas sobre os plugins de carregamento lento do WordPress que permitem que você aproveite as vantagens do carregamento lento de imagens em um site WordPress.

Como adicionar carregamento lento usando o plug-in?

Existem muitos plugins do WordPress disponíveis que adicionarão a funcionalidade de carregamento lento automaticamente ao seu site com um clique.

Se você deseja aumentar o tempo geral de carregamento do site, recomendo o plug-in de otimização de velocidade Permatters. Este plugin otimizará seu site para uma melhor experiência e desempenho do usuário. Ele também possui alguns recursos adicionais, como carregamento lento, compactação gzip, etc.

Se você quiser sujar as mãos com o código ou tiver algum requisito avançado, recomendarei outros plugins a seguir.

O WP Rocket é um dos plugins de cache do WordPress mais populares. É também o plugin mais popular para imagens de carregamento lento. Isso ajudará você a reduzir a velocidade de carregamento e aumentar o total de visualizações de página. Você pode ler WP Rocket Review.

Você também pode usar o plugin Light Speed ​​Cache, que é outro plugin popular entre os usuários do WordPress. Ele permite que você use regras de cache avançadas para o seu site, o que ajuda a melhorar o tempo de carregamento da página e reduz o uso da largura de banda.

Além disso, os plugins acima ajudam a carregar iFrames. Eu recomendo esses plugins para isso.

Carregamento lento vs carregamento dinâmico vs pré-carregamento JavaScript vs carregamento lento ansioso

A grande diferença entre os quatro termos é o que acontece quando um usuário visita seu site pela primeira vez.

Carregamento lento: com carregamento lento, os recursos são carregados conforme necessário (como o nome sugere). Isso significa que, dependendo das ações dos usuários, alguns elementos podem não ser carregados.

Carregamento dinâmico : Com o carregamento dinâmico, você terá que pré-carregar tudo – mesmo que não seja necessário. Portanto, dependendo da quantidade de dados que você precisa enviar, isso pode aumentar significativamente o tempo de carregamento da página – mesmo que parte desse conteúdo nunca seja visto por ninguém.

Pré-carregamento de JavaScript:

O pré-carregamento de JavaScript é uma parte importante do processo de carregamento lento da imagem. Ele facilita o cache do navegador fornecendo HTML (e CSS se você estiver usando uma solução baseada em estilo).

Ele usa AJAX para entregar um arquivo separado para cada imagem em sua página. Isso permite que os navegadores iniciem o download de imagens antes de serem totalmente carregadas, aumentando assim o número de imagens que podem ser carregadas em uma conexão de rede lenta ou em um computador cliente lento.

Eager lazy loading : é semelhante ao carregamento lento e você carregará recursos conforme necessário. A diferença é que, com o método ansioso, você não precisa se preocupar se algo está visível ou não agora. Se já estiver carregado, muito bem – caso contrário, carregue-o quando for necessário.

Entendendo o carregamento lento para SEO

Algumas pessoas se preocupam com o fato de que o carregamento lento de imagens afetará negativamente a capacidade de um SEO de acessar seu conteúdo.

O Google faz um ótimo trabalho ao armazenar em cache os recursos em seu site sempre que o rastreia, portanto, se você carregar elementos de uma maneira que permaneça rápida ao longo do tempo e não mude com muita frequência, acho que ninguém deve se preocupar em afetar sua pesquisa classificação do motor.

Lazy Loading e CDN

Existem algumas CDN úteis na indústria que podem ajudá-lo a distribuir seus arquivos de imagem e mídia. A maioria desses serviços oferece uma ótima experiência ao usuário, implementando a funcionalidade de carregamento lento para você.

O Cloudflare CDN é um que gostaria de destacar entre outros serviços de CDN.

Cloudflare é uma rede de entrega de conteúdo que oferece CDN grátis e pago para todos os usuários de suas contas. Ele também otimiza seu site e melhora a segurança implementando algumas estratégias avançadas, como otimização de velocidade de página, HTTP/2 e muito mais. Também ajuda você a carregar com preguiça a imagem do site e os arquivos de mídia.

Carregamento preguiçoso no desktop ou no celular: como isso afeta o SEO do Google?

O carregamento lento existe nos desktops há muito tempo. É um recurso disponível na maioria dos principais navegadores, mas há alguns recursos – como pré-carregamento e carregamento parcial – que não estão disponíveis para todos os navegadores.

No entanto, com dispositivos móveis, o carregamento lento é algo que você precisa prestar atenção.

É importante que você pense nisso como um fator de classificação de SEO porque o Google agora está prestando atenção ao carregamento lento de imagens em dispositivos móveis.

A chave aqui não é apenas implementar o carregamento lento, mas também garantir que ele carregue recursos de maneira rápida e eficiente. Se isso não acontecer, há uma chance de sua classificação no mecanismo de pesquisa ser afetada negativamente.

Lazy loading imagem em tamanho diferente

Outra razão pela qual você deve se concentrar no carregamento lento de imagens é devido ao aumento do uso de dispositivos móveis.

As pessoas gostam de navegar e pesquisar com seus telefones, mas não são tão rápidos ou precisos quando se trata de clicar em links, portanto, ter imagens maiores significa que as pessoas provavelmente clicarão antes que a imagem completa seja carregada.

Portanto, ter imagens menores obviamente será melhor para dispositivos móveis, mesmo que isso signifique que mais dados precisam ser carregados, vale a pena a longo prazo, porque as pessoas clicarão em vez de sair do seu site.

Quais frameworks são usados ​​no carregamento lento?

Existem algumas opções disponíveis para você:

1. Preenchimento de imagem (por uso padrão)

Picturefill é um script que fornece funcionalidade de carregamento lento para suas imagens. Essa biblioteca JavaScript leve funcionará com quase todos os principais navegadores e também é responsiva. Portanto, ele mudará seu comportamento dependendo do tipo de dispositivo que você estiver usando.

2. LazyLoadJS (por uso padrão)

LazyLoadJS é um script que fornece funcionalidade de carregamento lento para suas imagens e é muito leve e funciona com todos os principais navegadores. Assim, você não precisa se preocupar com nenhum problema ao usá-lo.

Ele também possui várias filas para melhorar o desempenho geral do seu site e é muito fácil de usar - desenvolvedores de todos os níveis de habilidade não devem ter problemas em usá-lo.

3. LoadCSS (por uso padrão)

LoadCSS é um script que fornece funcionalidade de carregamento lento para suas folhas de estilo, ao contrário de outras bibliotecas que só funcionam com imagens ou arquivos de vídeo. Isso também irá pré-carregar HTML e JavaScript.

4. SlimerJS (não disponível)

O SlimerJS é um script que fornece a funcionalidade de carregamento lento para suas imagens e não usa nenhuma biblioteca JavaScript, mas possui sua própria API que você pode usar para configurar a maneira como o carregamento lento da imagem funciona.

Também é muito leve e rápido, por isso não afetará o desempenho do seu site de forma alguma.

O carregamento lento funciona em imagens de fundo?

Sim, funcionaria em imagens de fundo.

Conclusão

O carregamento lento é uma das técnicas de otimização de desempenho mais subutilizadas quando se trata de WordPress e sites em geral.

É muito fácil de implementar quando você sabe como, mas muitas pessoas nem sabem disso. Se você deseja melhorar a velocidade de carregamento da sua página, recomendo que você implemente o carregamento lento para arquivos de imagem e mídia.