Imagens, infográficos e efeitos extravagantes são excelentes ajudas para promover qualquer tipo de conteúdo em um site. Eles são captadores de atenção infalíveis e podem transmitir a essência do conteúdo em um quadro. Não é à toa que dependemos de imagens para chamar a atenção do leitor e aumentar o engajamento do usuário na internet.
Por outro lado, as imagens geralmente demoram para carregar em uma página da web. E se você estiver em uma conexão lenta, pode parecer que demora uma eternidade para carregar. Isso pode ser uma grande desmotivação para os usuários, que provavelmente se afastarão da página.
Isenção de responsabilidade: WPExplorer é um afiliado de um ou mais produtos listados abaixo. Se você clicar em um link e concluir uma compra, podemos fazer uma comissão.
Como podemos fazer com que as páginas com imagens pesadas sejam carregadas mais rapidamente?
Por que as imagens demoram para carregar? Bem, podemos explicar assim – uma página da web é composta de muitos elementos – texto, imagens, mídia, script e muito mais. Para carregar cada elemento, seu navegador faz uma solicitação ao site (chamada de solicitação HTTP). Muitos dos elementos, especialmente imagens, são pesados
A coisa lógica a fazer é fazer com que o conteúdo de carregamento rápido apareça primeiro no navegador e prenda a atenção do espectador. Ao mesmo tempo, atrase o carregamento das imagens pesadas de dados. Essa abordagem provavelmente persuadirá os usuários a esperar, pois há algo na tela para prender sua atenção.
O que é carregamento lento?
Podemos atrasar as imagens usando a técnica de carregamento lento – carregue apenas o texto ou o conteúdo selecionado primeiro e permita que as imagens ou os elementos de carregamento lento fiquem atrasados. O carregamento de imagens é escalonado, então o tempo para o primeiro byte da página melhora. À medida que um usuário rola para baixo, as imagens são buscadas uma de cada vez. Consequentemente, o número de solicitações HTTP que chegam ao servidor ao mesmo tempo é reduzido.
As imagens são colocadas em um espaço reservado, para serem carregadas posteriormente. À medida que as imagens chegam à área de visualização, elas são buscadas no servidor. Eles aparecem na tela à medida que se movem para a área “acima da dobra”. No caso de rolagem infinita, o ajax é usado para carregar mais quando o usuário atinge a parte inferior da tela.
Como o carregamento lento pode ajudar
O carregamento lento reduz os tempos de carregamento. Um site mais rápido é bom para a experiência do usuário e para os mecanismos de pesquisa. Também reduz a largura de banda do servidor ao carregar imagens apenas quando elas são realmente necessárias. Isso economiza largura de banda, tanto no servidor quanto no usuário. Você pode aplicar carregamento lento em páginas selecionadas ou em todo o site.
Uma desvantagem do carregamento lento é que o conteúdo que vem após a dobra pode não ser encontrado pelos mecanismos de pesquisa. Os mecanismos de pesquisa podem não reconhecer o conteúdo de rolagem infinita . Para superar essa desvantagem, pelo menos em parte, precisamos estruturar as URLs para que possam ser processadas pelos mecanismos de pesquisa. Isso pode tornar os espaços reservados mais visíveis para os mecanismos de pesquisa até que a imagem seja carregada.
Existem vários plugins que podem fazer com que o carregamento lento funcione no seu site WordPress. Vejamos alguns dos plugins populares,
BJ Carga Preguiçosa
Para substituir todas ou qualquer uma de suas imagens de postagem, miniaturas de postagem, imagens gravatar e iframes de conteúdo por um espaço reservado, use BJ Lazy Load . Ele também pode substituir os iframes, e isso significa que você pode carregar vídeos incorporados do YouTube e do Vimeo com preguiça. Funciona para widgets de texto também. Usando um filtro simples, as imagens e iframes em seu tema podem ser atrasadas.
Para que o plugin funcione em seu site, basta baixar, instalar e ativar. Você pode então visitar as configurações e descobrir quais elementos devem ser atrasados
Este plug-in usa JavaScript. Como resultado, um visitante sem JavaScript verá os elementos originais sem nenhum atraso no carregamento.
Carga preguiçosa
Um plug-in comumente usado para adicionar carregamento lento a sites WordPress, o Lazy Load é um plug-in simples de instalação e ativação. Você pode experimentá-lo com confiança, sabendo que ele é desenvolvido usando uma combinação de código da equipe VIP do WordPress.com na Automattic, a equipe TechCrunch 2011 Redesign e Jake Goldman (10up LLC).
Além disso, você não precisa fazer mais nada após a ativação. No entanto, se você deseja fazer algumas alterações, pode fazê-lo editando o arquivo php. Os autores forneceram alguns trechos de código úteis que você pode consultar para alterar a imagem de espaço reservado, para carregar imagens lentamente em seu tema ou para carregar todas as suas imagens por buffer de saída.
Ajax Load More – Rolagem infinita
O Ajax Load More está apto para carregamento atrasado em páginas da Web longas que são visualizadas rolando para baixo. Use-o para postagens de carregamento lento, tipos de postagem personalizados, postagens únicas, páginas e comentários.
Além disso, você pode usar o Shortcode Builder para enquadrar consultas personalizadas do WordPress. Adicione o código de acesso gerado às páginas selecionadas por meio do editor de conteúdo ou diretamente aos arquivos de modelo. Visualize a página a partir do front-end e verifique Ajax Load More carregando o conteúdo mesmo enquanto você rola para baixo.
Além disso, o Ajax Load More funciona bem com WooCommerce e Easy Digital Downloads, por isso é adequado para páginas de produtos longas.
Carregamento lento para vídeos
Se você estiver executando um site com vários vídeos incorporados, este é para você. O Lazy Load for Videos substitui seus vídeos incorporados por uma imagem clicável. A página da web não carrega vídeos assim que um visitante chama a página. Os vídeos são carregados apenas quando a imagem é clicada.
O plug-in inspeciona vídeos incorporados e substitui todos os arquivos externos por uma imagem estática e um botão de reprodução. Os vídeos são carregados apenas quando um visitante clica no botão. Isso pode ter um impacto real na velocidade de carregamento da página, especialmente se ela tiver muitos vídeos. E para o usuário, é uma experiência tranquila.
a3 Carga lenta
Com os sites sendo cada vez mais visualizados em dispositivos portáteis, eles também precisam ser otimizados para uma experiência móvel. o a3 Lazy Load foi projetado para melhorar a velocidade do site em celulares, atrasando o carregamento de elementos de página selecionados. Os elementos podem ser selecionados nas configurações de administração.
O plug-in oferece suporte para conteúdo em iframes colocados em qualquer lugar do conteúdo ou widgets. Mídia incorporada do WordPress, caixas de Curtir do Facebook com perfis, botões Curtir, botões Recomendar, Perfis do Google+, Google Maps e outros conteúdos de mídia semelhantes podem ser selecionados para carregamento lento.
Além disso, não há conflito com as Accelerated Mobile Pages (AMP) – a carga lenta não é aplicada ao terminal /amp . É somente quando o navegador exibe uma URL sem /amp que o carregamento lento entra em ação.
WP YouTube Lyte
Se o seu site atrai muito o YouTube, o WP YouTube Lyte pode beneficiá-lo bastante. Ele insere “Lite YouTube Embeds” que parecem semelhantes às incorporações do YouTube. Mas os vídeos são chamados apenas quando clicados.
Para que este plugin funcione em seu site, é necessário um registro no YouTube como novo candidato. O plug-in usa a API do YouTube de cada vídeo para buscá-lo no repositório do YouTube. Para usar essa API em seu site, a chave de API fornecida a você pelo YouTube deve estar ativada. A chave do servidor que você recebe do YouTube precisa ser preenchida.
Depois de ativar as chaves de API do YouTube, ajuste as configurações para obter as dimensões e a posição do player ao seu gosto.
Carregando página com tela de carregamento
Com a página de carregamento com tela de carregamento , os usuários podem ter uma ideia do tempo de espera antes que a página seja carregada. O plug-in exibe uma tela mostrando o progresso do carregamento como uma porcentagem de conclusão.
Escolha exibir o progresso apenas na página inicial ou em todas as páginas. Com a versão gratuita, apenas uma barra de progresso é usada para exibição. Para mais opções, você precisará atualizar para a versão premium . Além disso, a versão premium aplica carregamento lento às imagens.
Mais alguns plugins,
- Carregar mais é um recurso útil em páginas de produtos longas. Estes são comumente encontrados em sites WooCommerce. O WooCommerce Infinite Scroll e Ajax Pagination converte a paginação padrão do produto em rolagem infinita ou paginação Ajax. Para o usuário, isso significa que ele não precisa clicar repetidamente em ‘Próxima página’. Quando um usuário chega ao final da página, o próximo conjunto de produtos é recuperado e carregado automaticamente. Diferentes opções de paginação estão disponíveis para dispositivos móveis.
- Carregar mais produtos para WooCommerce pode ser adicionado para carregar mais produtos da próxima página usando Ajax com rolagem infinita ou um botão Carregar mais. Para efeitos de animação e personalização, está disponível uma versão pro .
- Imagens Lazyload e Slideshow – Com este plugin, você pode optar por adicionar um efeito lightbox ou um efeito de galeria personalizado a qualquer imagem, além de atrasar o carregamento. Ele vem com 3 efeitos, e você pode adicionar o seu próprio também.
- Rocket Lazy Load – É extremamente leve (menos de 2kb). Ele injeta um pouco de Javascript no cabeçalho do seu site que funciona em miniaturas, todas as imagens em um post, em um texto de widget ou avatares. Ele atrasa imagens em todo o site sem usar nenhuma biblioteca JavaScript, como jQuery.
- Crazy Lazy – Faz o mesmo trabalho sendo leve, fácil de instalar e usar e não precisa de configuração. Qualquer imagem pode ser excluída simplesmente adicionando um atributo à imagem.
- Lazy Load XT – É um plugin rápido que funciona para imagens, frames, vídeos do YouTube e Vimeo. É totalmente personalizável.
Muitos Sliders como o Royal Slider e o WP Electric Carousel também incorporam o princípio de carregamento lento para carregar imagens. O Event Booking Pro suporta um calendário de carregamento lento.
Para concluir
O carregamento lento é uma maneira eficaz de melhorar a velocidade do site, especialmente em sites que exibem várias imagens e vídeos. Existem muitos outros métodos, como otimização de imagens e armazenamento em cache, que também podem ajudar a melhorar a velocidade do site. Escolha o plug-in mais adequado ao seu site e otimize o desempenho para torná-lo uma experiência melhor para o usuário.
Uncategorized