Como carregar preguiçosamente imagens e vídeos no WordPress (e substituir os iFrames do YouTube por uma imagem de visualização) para obter melhores resultados no GTmetrix

Qual é o melhor jeito de carregar preguiçosamente imagens e vídeos no WordPress?


Isso depende se você já está usando um plug-in de cache que suporta carregamento lento (WP Rocket, W3 Total Cache, Swift, LiteSpeed ​​Cache). Se o seu plug-in de cache suportar imagens e vídeos de carregamento lento, é melhor usá-lo para evitar a instalação de um plug-in extra. Mas se o plug-in de cache não suportar carregamento lento, recomendo usar um que suporte (especialmente o WP Rocket); caso contrário, listei abaixo os plugins de carregamento lento alternativos abaixo, você pode instalar individualmente.

O que é carregamento lento?
Carregamento lento significa que as imagens e os vídeos são carregados apenas quando os usuários rolam a página e realmente os veem. Isso resulta em menos solicitações de HTTP na página; no entanto, se você tem muitas imagens ou vídeos incorporados, é necessário carregá-los constantemente, você rola a página.

O que significa substituir o iframe do YouTube por uma imagem de visualização?
Se você incorporar vídeos no seu site WordPress, isso só carrega o “player gordo do YouTube” quando as pessoas clicam no botão Reproduzir. Em outras palavras, a única coisa carregada inicialmente é uma imagem de visualização.

Você deve carregar preguiçosamente imagens e vídeos?
Não carrego imagens preguiçosamente porque carregar imagens constantemente enquanto você rola a página pode ser irritante para os usuários. No entanto, todas as minhas imagens são otimizadas para 100% no GTmetrix. Carrego vídeos preguiçosamente e substituo o iframe por uma imagem de visualização. Como cada vídeo incorporado pode levar 2 segundos para carregar (muito mais pesado que uma imagem), o benefício do carregamento lento de vídeos é significativo.

1. WP Rocket

O WP Rocket é minha opção nº 1 para carregamento lento e foi o plugin nº 1 de cache nas pesquisas do Facebook.

Como ele já possui carregamento lento, isso significa que você não precisa instalar um plug-in extra. Esse é todo o benefício do WP Rocket; ele vem com mais recursos do que praticamente qualquer outro plug-in de cache (resultando em melhores tempos de carregamento e pontuações no GTmetrix), e ainda menos plug-ins no seu site. O WP Rocket possui extensa documentação sobre carregamento lento e definir as configurações do WP Rocket.

WP Rocket

Como ativar a carga preguiçosa no WP Rocket
Para ativar o carregamento lento no WP Rocket, vá para Configurações > WP Rocket > meios de comunicação > Carga preguiçosa. Você pode ativá-lo para imagens, iframes e vídeos e substituir iframes do YouTube por uma imagem de visualização.

Imagens de carga preguiçosa WP Rocket

2. SG Optimizer

SiteGround introduziu carregamento lento em sua grande atualização de SG Optimizer.

Obviamente, você precisa ser um cliente do SiteGround para usar este plugin (o que eu faria para hospedagem compartilhada, considerando que eles foram classificados como o host número 1 em mais de 20 pesquisas no Facebook). O SG Optimizer é comparável ao WP Rocket, mas não possui quase tantos recursos. Portanto, se você estiver usando o SiteGround para seu host, eu ainda preferiria o WP Rocket ao invés do SG Optimizer.

Otimizador de SiteGround SG

Como ativar a carga lenta no SG Optimizer
Para ativar o carregamento lento no SG Optimizer, vá para Configurações > SG Optimizer > Padrões por site > Otimização de imagem. Você pode carregar preguiçosamente imagens, gravatares, miniaturas, imagens responsivas e widgets. Se você tiver comentários em seu blog, o carregamento lento dos Gravatars pode ajudar tremendamente.

Carregamento lento do otimizador SG

3. Cache Total W3

Se você já estiver usando o W3 Total Cache, eles também terão um opção de carregamento preguiçoso.

O W3 Total Cache foi considerado abandonado por algum tempo, mas o desenvolvedor começou a manter seu plug-in. Eu tenho um tutorial extenso para definir as configurações de cache total do W3.

Plug-in W3 Total Cache

Como ativar o carregamento lento no cache total do W3
Para ativar o carregamento no cache total do W3, vá para Configurações > Configurações Gerais > Experiência de usuário > Carregamento lento. Ative isso e vá para Experiência do usuário > Carregamento lento. Escolha processar tags de imagem HTML, imagens de plano de fundo, excluir palavras e método de incorporação de script.

Carregamento lento do cache total W3

4. Cache Litespeed

Cache Litepseed carregamento lento também fará o trabalho (o Litespeed é um plugin de cache bem revisado).

LiteSpeed ​​Cache Plugin

Como ativar o carregamento lento no cache do LiteSpeed
Para ativar o carregamento no LiteSpeed ​​Cache, acesse LiteSpeed ​​Cache > Definições > meios de comunicação > Configurações de mídia. Aqui você pode ativar imagens de carregamento lento, iframes, excluir imagens, solicitar otimização automaticamente por meio de um trabalho cron, incluir a biblioteca Javascript embutida e alternar outras configurações.

Lazy Load Imagens Vídeos Litespeed Cache

5. Desempenho Rápido

Desempenho rápido é outro plug-in de cache que suporta carregamento lento. Swift recebeu ótimas críticas no WordPress Speed ​​Up Facebook Group, mas as opiniões na página de plug-ins do WordPress são de apenas 4 estrelas. Eu não testei o Swift Performance; Estou perfeitamente feliz com o WP Rocket.

Plugin Swift Performance Lite

Como ativar o carregamento lento no desempenho rápido
Para ativar o carregamento no Swift Performance, vá para Configurações > meios de comunicação > Carga preguiçosa. Aqui você terá a opção de carregar preguiçosamente imagens, excluir determinadas imagens e carregar imagens preguiçosas em linha.

Imagens preguiçosas de carga Desempenho rápido

6. Otimização automática

A otimização automática é frequentemente usada com hosts como GoDaddy e WP Engine, onde eles têm seu próprio sistema de cache interno e plugins de cache da lista negra. Nesse caso (como você deseja cuidar de outras otimizações de velocidade), a otimização automática geralmente é o plug-in adequado para isso. Um dos muitos recursos é carregamento lento, mas também permite otimizar HTML, CSS, JavaScript e fontes do Google.

Plug-in de otimização automática

Como ativar o carregamento preguiçoso na otimização automática
Para ativar o carregamento no Otimização automática, vá para Configurações > Imagens > Imagens de carregamento lento. Você também tem a opção de usar o CDN do ShortPixel para otimização de imagem (este é o plugin que eu uso).

Lazy Load Images Otimização automática

7. Smush

Smush é um plugin de otimização de imagem que suporta carregamento lento. Foi desenvolvido pela WPMU, no entanto, eu pessoalmente uso o ShortPixel para compactação sem perdas, pois é o único que usei que torna minhas imagens 100% no GTmetrix (e testei muitos plugins de otimização de imagem).

Smush plugin

Como ativar a carga preguiçosa no Smush
Para ativar o carregamento no Smush, vá para Smush > painel de controle > Carga preguiçosa. Você pode escolher quais tipos de arquivos deseja carregar preguiçosamente (.jpeg, png, .gif, .svg, iframe) e se deseja habilitá-lo para conteúdo, widgets, miniaturas e Gravatars. Ele ainda possui configurações de animação de carregamento lento.

Smush Lazy Load

8. Carga preguiçosa por WP Rocket

Lazy Load por WP Rocket é bom se você não estiver usando o WP Rocket, mas quiser carregar imagens preguiçosamente.

Lazy Load Plugin

Como ativar o Lazy Load no Lazy Load pelo WP Rocket
Vá para as configurações > Carga preguiçosa. Você tem a opção de carregar preguiçosamente imagens, iframes & vídeos e substitua os vídeos do YouTube por miniaturas. Não há muitas configurações para configurar; Eu pessoalmente gostaria que houvesse mais. Talvez seja por isso que este plug-in de carregamento lento não tenha as melhores críticas.

Lazy Load por WP Rocket

9. Carga Preguiçosa A3

Carga preguiçosa A3 suporta carregamento lento de imagens e vídeos.

a3 Lazy Load Plugin

Como ativar o carregamento lento no A3 Lazy Load
Para ativar o carregamento no A3 Lazy Load, vá para configurações > Carga preguiçosa A3. Você pode definir configurações para carregamento lento de imagens, vídeos, iframes, gravatars e escolher em quais áreas do site você deseja que o carregamento lento seja aplicado (incluindo dispositivos móveis). Há também opções para ativar um efeito de carregamento lento, carregamento da cor de plano de fundo e a opção de excluir URLs e tipos de postagem.

a3 Configurações de carregamento lento

10. BJ Lazy Load

BJ Lazy Load parece não estar bem conservado, então eu provavelmente usaria outro plugin.

BJ Lazy Load plugin

Como ativar o carregamento lento no BJ Lazy Load
Para ativar o carregamento no BJ Lazy Load, vá para Configurações > Carga preguiçosa de BJ. As configurações são relativamente simples e oferecem a opção de carregar preguiçosamente imagens, iframes, gravatares e excluir o carregamento lento do conteúdo, widgets de texto e postar miniaturas. Também há uma opção para incluir uma imagem de espaço reservado, limite de porta de visualização e usar uma imagem de visualização em baixa resolução ao carregar lentamente.

Configurações de carregamento lento do BJ

11. Carga lenta para imagens

Carga preguiçosa para imagens é bom se você quiser apenas fazer imagens.

Lazy Load for plugin de imagens

Como ativar o carregamento lento para imagens
Não há configurações para configurar no plug-in Lazy Load for Images (é automático).

12. Carga preguiçosa para vídeos

Lazy Load For Videos substitui vídeos incorporados por imagens de visualização clicáveis.

Carregamento lento para plug-in de vídeos

Como ativar o Lazy Load no Lazy Load for Videos
Para ativar o carregamento no Lazy Load for Videos, vá para Configurações > Carga preguiçosa para vídeos. Escolha carregar apenas CSS / JS quando necessário, personalize o botão de reprodução e aplique CSS personalizado.

Carga preguiçosa para plug-in de vídeos

13. Lazy Load para comentários

Você pode carregar comentários preguiçosamente usando o Lazy Load para comentários plugar.

Isso pode ajudar a fazer menos solicitações de HTTPs se você tiver muitos comentários em seu blog, principalmente porque os Gravatars podem demorar muito para carregar entre todas as solicitações de terceiros.

Carregamento lento para plug-in de comentários

Como ativar o carregamento lento no carregamento lento para comentários
Para ativar o carregamento no Lazy Load for Comments, vá para Configurações > Discussão > Lazy Load Comentários. Essa é a única configuração deste plugin, mas possui boas críticas.

Lazy Load Comentários

14. WP YouTube Lyte

WP YouTube Lyte é um dos meus plugins favoritos (e mais bem revisados) para vídeos com carregamento lento. Foi criado pela equipe da Autoptimize, que tende a ter boas análises de plugins em todo o mundo.

WP YouTube Lyte plugin

Como ativar o carregamento lento no WP YouTube Lyte
Para ativar o carregamento no WP YouTube Lyte, vá para Configurações > WP YouTube Lyte. Pegue seu Chave da API do YouTube e insira-o em Otimização automática. Selecione o tamanho do seu player, incluindo links, posição do jogador, forçar HD, atuar como link / iframes normais do YouTube e adicionar microdados. O cache de miniaturas localmente geralmente pode corrigir erros do GTmetrix ao incorporar vídeos do YouTube.

Miniaturas do YouTube GTmetrix

Configurações Wp YouTube Lyte

Ainda precisa de ajuda?

Eu tenho um ótimo vídeo sobre otimização de velocidade do WordPress:

Também tenho tutoriais para otimizar imagens, configurar o WP Rocket, reduzir o tempo de resposta do servidor e muito mais. Consigo obter pontuações de 100% (ou quase) do GTmetrix em quase todas as minhas postagens usando essas dicas. Se você tiver dúvidas, sinta-se à vontade para me enviar um comentário – prazer em ajudar!

perguntas frequentes

&# x2705; Qual plugin é melhor para carregar imagens preguiçosamente?

Se você já está usando um plug-in de cache que suporta carga lenta (por exemplo, WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), é melhor tentar primeiro. Caso contrário, o Autoptimize ou o plug-in Lazy Load do WP Rocket são bons plugins de carregamento lento.

&# x2705; E quanto ao carregamento lento de vídeos?

O WP Rocket e alguns outros plugins de cache permitem carregar vídeos preguiçosamente e substituir o iframe do YouTube por uma imagem de visualização. Caso contrário, o WP YouTube Lyte funcionará.

&# x2705; O carregamento lento prejudicará a experiência do usuário?

Não carrego preguiçosamente imagens neste site, mas carrego vídeos preguiçosamente porque eles levam muito mais tempo para carregar. O carregamento lento de imagens pode ser irritante para os usuários e diminuiu as vendas de meus afiliados, então desativei.

&# x2705; O que o carregamento lento faz?

O carregamento lento agiliza o tempo de carregamento inicial, aguardando o carregamento de imagens e vídeos até os usuários rolarem a página e realmente os verem.

&# x2705; Como desativar o carregamento lento em páginas específicas?

A maioria dos plugins permite fazer isso. Por exemplo, se você estiver usando o WP Rocket e editar uma página ou postagem, verá uma opção no painel para desativar (ou ativar) o carregamento lento nesse conteúdo específico.

Felicidades,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map