{"id":29976,"date":"2022-11-10T17:40:25","date_gmt":"2022-11-10T20:40:25","guid":{"rendered":"\/tutoriais\/?p=29976"},"modified":"2025-04-16T04:45:23","modified_gmt":"2025-04-16T07:45:23","slug":"wordpress-lazy-loading","status":"publish","type":"post","link":"\/br\/tutoriais\/wordpress-lazy-loading\/","title":{"rendered":"WordPress lazy loading: como implement\u00e1-lo em seu site"},"content":{"rendered":"<p>Se o seu site WordPress depende muito de conte&uacute;do visual, voc&ecirc; pode adicionar a funcionalidade de <em>lazy loading<\/em> a ele. Esse recurso do WordPress ajuda a melhorar a velocidade e o desempenho das suas p&aacute;ginas, o que o torna essencial para seus esfor&ccedil;os de SEO.<\/p><p>Este artigo ir&aacute; explorar como o <em>lazy loading<\/em> funciona no WordPress, junto dos seus pr&oacute;s e contras. Voc&ecirc; tamb&eacute;m aprender&aacute; como implement&aacute;-lo em seu site e as formas de otimizar seu uso para obter melhores resultados.<\/p><p>\n\n\n\n\n\n\n\n<div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   O Que &eacute; Lazy Loading?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">&Eacute; uma funcionalidade que permite que um site carregue apenas as imagens que est&atilde;o vis&iacute;veis para o usu&aacute;rio. Ele ajuda o site a manter uma velocidade de carregamento r&aacute;pida, n&atilde;o baixando imagens que est&atilde;o fora da janela de visualiza&ccedil;&atilde;o.<\/p><\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-como-funciona-o-lazy-loading-no-wordpress\">Como Funciona o Lazy Loading no WordPress?<\/h2><p>Quando um usu&aacute;rio visita um site do WordPress, seu navegador baixa todas as imagens da p&aacute;gina de uma s&oacute; vez. Para p&aacute;ginas com muitas imagens de alta resolu&ccedil;&atilde;o, esse processo pode aumentar significativamente o tempo de carregamento, prejudicando o desempenho do seu site.<\/p><p>Adicionar <em>lazy loading <\/em>ao seu site solicita que ele baixe apenas as imagens vis&iacute;veis na tela do usu&aacute;rio. O restante dos arquivos de m&iacute;dia s&atilde;o substitu&iacute;dos por um espa&ccedil;o reservado para as imagens e s&atilde;o carregados apenas quando o usu&aacute;rio rola mais para baixo na p&aacute;gina.<\/p><h2 class=\"wp-block-heading\" id=\"h-pros-e-contras-do-lazy-loading-no-wordpress\">Pr&oacute;s e Contras do Lazy Loading no WordPress<\/h2><p>Se voc&ecirc; ainda est&aacute; se perguntando se deve implementar <em>lazy loading<\/em> de imagens no WordPress, aqui est&atilde;o os pr&oacute;s e contras do recurso:<\/p><p><strong>Pr&oacute;s:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Reduz o uso de largura de banda, diminuindo os custos de hospedagem.<\/li>\n\n\n\n<li>Aumenta a velocidade do site, tornando a experi&ecirc;ncia de navega&ccedil;&atilde;o dos visitantes melhor.<\/li>\n\n\n\n<li>Refina a experi&ecirc;ncia em dispositivos m&oacute;veis.<\/li>\n\n\n\n<li>Otimiza a maior pontua&ccedil;&atilde;o de <em>Largest Contentful Paint<\/em>.<\/li>\n\n\n\n<li>Melhora os esfor&ccedil;os de <a href=\"\/br\/tutoriais\/o-que-e-seo\/\">SEO<\/a>, aumentando o ranqueamento do seu site em motores de busca.<\/li>\n<\/ul><p><strong>Contras:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Causa buffer de conte&uacute;do, prejudicando a velocidade de carregamento.<\/li>\n\n\n\n<li>Retarda a rolagem r&aacute;pida.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-como-adicionar-o-lazy-loading-ao-seu-site-wordpress-3-metodos\">Como Adicionar o Lazy Loading ao seu Site WordPress: 3 M&eacute;todos<\/h2><p>Existem tr&ecirc;s maneiras de implementar o lazy loading em seu site WordPress. Recomendamos escolher a que melhor se adapte &agrave; sua situa&ccedil;&atilde;o.<\/p><h3 class=\"wp-block-heading\"><strong>1. Atualize para o WordPress 5.4 ou Superior<\/strong><\/h3><p>As vers&otilde;es do WordPress 5.4 e superiores incluem por padr&atilde;o o <em>lazy loading<\/em> para imagens. <a href=\"\/br\/tutoriais\/como-atualizar-o-wordpress\/\">Atualizar seu WordPress<\/a> para a vers&atilde;o mais recente ativar&aacute; automaticamente a funcionalidade.<\/p><p>Apesar de ser o m&eacute;todo mais f&aacute;cil, ele n&atilde;o permite configurar quais imagens carregam lentamente. Consequentemente, seu site pode abusar do recurso, manifestando os pontos negativos mencionados acima.<\/p><p>Outro fator a ser considerado &eacute; a natureza diferente do recurso de lazy loading em cada vers&atilde;o do WordPress. Recentemente, o WordPress postou que a vers&atilde;o 5.9 implementa refinamentos para resolver os problemas com pontua&ccedil;&otilde;es ruins de <em>Large Contentful Paint<\/em> de vers&otilde;es mais antigas.<\/p><p>Isso significa que sites executados em vers&otilde;es mais antigas do WordPress n&atilde;o obt&ecirc;m os mesmos benef&iacute;cios que aqueles que usam o WordPress 5.9.<\/p><h3 class=\"wp-block-heading\"><strong>2. Ative o Lazy Loading Nativo pelo Navegador<\/strong><\/h3><p>Navegadores populares como Chrome, Firefox e Opera suportam <em>lazy loading<\/em> de imagem nativa. Voc&ecirc; s&oacute; precisa adicionar o atributo de carregamento &lt;img loading= &ldquo;lazy&rdquo;&gt; &agrave;s imagens e v&iacute;deos desejados para ativ&aacute;-lo automaticamente.<\/p><p>No <em>lazy loading<\/em> nativo, o atributo de carregamento suporta estes tr&ecirc;s valores:<\/p><ul class=\"wp-block-list\">\n<li><strong>Auto<\/strong> &#8210; aciona o <em>lazy loading<\/em> padr&atilde;o, que &eacute; o mesmo que n&atilde;o incluir um atributo de carregamento.<\/li>\n\n\n\n<li><strong>Lazy<\/strong> &#8210; distribui o carregamento dos ativos at&eacute; que cada um atinja a dist&acirc;ncia especificada da janela de visualiza&ccedil;&atilde;o.<\/li>\n\n\n\n<li><strong>Eager<\/strong> &#8210; carrega todos os ativos assim que a p&aacute;gina &eacute; carregada, independentemente de sua localiza&ccedil;&atilde;o.<\/li>\n<\/ul><p>Aqui est&aacute; um exemplo de como us&aacute;-lo:<\/p><pre class=\"wp-block-code\"><code>&lt;img src=&rdquo;image-name.png&rdquo; loading=&rdquo;lazy&rdquo; alt=&rdquo;alt attribute&rdquo; width=&rdquo;200&Prime; height=&rdquo;200&Prime;&gt;<\/code><\/pre><p>Esse m&eacute;todo &eacute; ideal para o <em>lazy loading<\/em> de certas imagens, dando a cada uma um atributo de carregamento que determina seu tempo de apari&ccedil;&atilde;o na janela de visualiza&ccedil;&atilde;o. No entanto, pode levar algum tempo para carregar imagens individuais com a funcionalidade, especialmente se o seu site tiver muitos arquivos de m&iacute;dia.<\/p><h3 class=\"wp-block-heading\"><strong>3. Instale um Plugin<\/strong><\/h3><p>Como nem todos os navegadores suportam <em>lazy loading <\/em>para imagens e v&iacute;deos, o segundo m&eacute;todo pode n&atilde;o funcionar o tempo todo. Voc&ecirc; pode mitigar esse problema <a href=\"\/br\/tutoriais\/como-instalar-plugins-wordpress\/\">instalando um plugin de <em>lazy loading<\/em> no seu WordPress<\/a>. Esse m&eacute;todo oferece mais controle sobre quais imagens carregar lentamente, mas sem precisar mexer com c&oacute;digos.<\/p><p>A seguir, est&atilde;o os <a href=\"\/br\/tutoriais\/melhores-plugins-wordpress\/\">melhores plugins <\/a>de lazy loading do WordPress para voc&ecirc; escolher. Todos podem ser encontrados atrav&eacute;s do diret&oacute;rio de plugins da plataforma.<\/p><p><a href=\"https:\/\/br.wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noopener\"><strong>Otimiza&ccedil;&atilde;o de imagem e lazy loading da Optimole<\/strong><\/a><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Optimole-WordPress-plugin.png\"><img decoding=\"async\" width=\"772\" height=\"250\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Optimole-WordPress-plugin.png\/public\" alt=\"Banner do Optimole WordPress plugin\" class=\"wp-image-29977\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Optimole-WordPress-plugin.png\/w=772,fit=scale-down 772w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Optimole-WordPress-plugin.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Optimole-WordPress-plugin.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Optimole-WordPress-plugin.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><\/a><\/figure>\n<\/div><p>Um dos pontos positivos do Optimole &eacute; que ele suporta todos os tipos de imagem, incluindo AVIF. Este plugin freemium de <em>lazy loading<\/em> fornece <a href=\"\/br\/tutoriais\/otimizar-imagens-wordpress\/\">otimiza&ccedil;&atilde;o<\/a> e dimensionamento de imagens do WordPress para ajust&aacute;-las aos dispositivos dos visitantes, garantindo uma &oacute;tima experi&ecirc;ncia do usu&aacute;rio.<\/p><p>Quando detecta uma rede mais lenta, o Optimole oferece a op&ccedil;&atilde;o de reduzir a qualidade da imagem. Al&eacute;m disso, voc&ecirc; pode economizar espa&ccedil;o de armazenamento ao salvar imagens na biblioteca em nuvem do Optimole.<\/p><p>O plugin gratuito permite otimizar imagens para at&eacute; 5 mil visitas mensais. A compra do plano Pro permite que voc&ecirc; carregue imagens lentamente para 25 mil visitantes ativos mensais e muito mais. As imagens em ambos os planos s&atilde;o veiculadas por meio do AWS Cloudfront CDN.<\/p><p><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener\"><strong>Smush<\/strong><\/a><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Smush-WordPress-plugin.png\"><img decoding=\"async\" width=\"940\" height=\"304\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Smush-WordPress-plugin.png\/public\" alt=\"Banner do Smush WordPress plugin\" class=\"wp-image-29978\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Smush-WordPress-plugin.png\/w=940,fit=scale-down 940w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Smush-WordPress-plugin.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Smush-WordPress-plugin.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-Smush-WordPress-plugin.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n<\/div><p>Smush &eacute; um popular plugin de otimiza&ccedil;&atilde;o de imagem que suporta <em>lazy loading<\/em>. &Eacute; compat&iacute;vel com temas populares, construtores de p&aacute;ginas e plugins de biblioteca de m&iacute;dia. Al&eacute;m disso, permite salvar as configura&ccedil;&otilde;es do plugin de maneira ilimitada e aplic&aacute;-las em apenas alguns cliques.<\/p><p>Outros recursos &uacute;teis incluem detec&ccedil;&atilde;o de tamanho de imagem incorreto, suporte a v&aacute;rios sites e ferramentas de compacta&ccedil;&atilde;o de imagem. A atualiza&ccedil;&atilde;o para o Smush Pro permite otimizar imagens grandes sem limita&ccedil;&otilde;es de tamanho, fazer backup de imagens originais e acessar outros plugins WPMU Pro. Os pre&ccedil;os partem de <strong>US$ 5\/m&ecirc;s<\/strong>.<\/p><p><a href=\"https:\/\/wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noopener\"><strong>a3 Lazy Load<\/strong><\/a><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-a3-Lazy-Load-WordPress-plugin.png\"><img decoding=\"async\" width=\"772\" height=\"250\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-a3-Lazy-Load-WordPress-plugin.png\/public\" alt=\"Banner do a3 Lazy Load WordPress plugin \" class=\"wp-image-29980\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-a3-Lazy-Load-WordPress-plugin.png\/w=772,fit=scale-down 772w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-a3-Lazy-Load-WordPress-plugin.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-a3-Lazy-Load-WordPress-plugin.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/11\/Banner-do-a3-Lazy-Load-WordPress-plugin.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><\/a><\/figure>\n<\/div><p>a3 Lazy Load &eacute; um plugin WordPress gratuito de <em>lazy loading<\/em> orientado para dispositivos m&oacute;veis. &Eacute; totalmente compat&iacute;vel com o WordPress 5.9 e v&aacute;rias ferramentas populares, incluindo plugins WebP e AMP.<\/p><p>Al&eacute;m de oferecer recursos b&aacute;sicos de <em>lazy loading<\/em> de imagem, o a3 Lazy Load tamb&eacute;m permite carregar v&iacute;deos lentamente &mdash; incluindo v&iacute;deos incorporados em p&aacute;ginas, postagens, tipos de postagem personalizadas e widgets. Efeitos de lazy loading e a op&ccedil;&atilde;o de carregar scripts do cabe&ccedil;alho ou rodap&eacute; tamb&eacute;m est&atilde;o dispon&iacute;veis.<\/p><p>Outros recursos not&aacute;veis &#8203;&#8203;incluem suporte multisite, suporte a imagens WebP e <em>lazy loading<\/em> de iframe &ndash; ele se aplica a iframes que o n&uacute;cleo do WordPress n&atilde;o carrega, como Google Maps e m&iacute;dia incorporada.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/br\/hospedagem-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-dicas-de-lazy-loading-do-wordpress\">Dicas de Lazy Loading do WordPress<\/h2><p>A chave para tirar o m&aacute;ximo proveito do <em>lazy loading<\/em> &eacute; us&aacute;-lo corretamente. Aqui est&atilde;o algumas dicas na hora de implementar a funcionalidade em seu site WordPress:<\/p><ul class=\"wp-block-list\">\n<li><strong>N&atilde;o carregue imagens com <\/strong><strong><em>lazy loading<\/em><\/strong><strong> acima da dobra<\/strong>. Como as imagens colocadas no topo da p&aacute;gina ficam vis&iacute;veis ao carregar, o <em>lazy loading<\/em> n&atilde;o traz nenhum benef&iacute;cio.<\/li>\n\n\n\n<li><strong>Escolha espa&ccedil;os reservados apropriados. <\/strong>Recomendamos usar uma cor s&oacute;lida e dominante ou uma imagem de baixa qualidade como espa&ccedil;o reservado para suas imagens.<\/li>\n\n\n\n<li><strong>Adicione tempo de <\/strong><strong><em>buffer<\/em><\/strong><strong> para carregamento de imagem. <\/strong>Dessa forma, suas imagens ficam prontas logo antes de entrar na janela de visualiza&ccedil;&atilde;o dos visitantes, eliminando qualquer tempo de espera.<\/li>\n\n\n\n<li><strong>Defina as dimens&otilde;es para cont&ecirc;ineres de imagem. <\/strong>Isso ajudar&aacute; a evitar mudan&ccedil;as repentinas de layout, fazendo com que sua p&aacute;gina da Web pare&ccedil;a organizada ao ser carregada.<\/li>\n\n\n\n<li><strong>Implemente o <\/strong><strong><em>lazy loading <\/em><\/strong><strong>apenas em p&aacute;ginas longas. <\/strong>As p&aacute;ginas longas incluem aquelas que levam mais de duas rolagens para chegar ao final e t&ecirc;m mais de cinco imagens abaixo da dobra.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-conclusao\">Conclus&atilde;o<\/h2><p>O <em>lazy loading<\/em> de imagens no WordPress permite que voc&ecirc; ofere&ccedil;a uma melhor experi&ecirc;ncia de navega&ccedil;&atilde;o aos seus visitantes. Al&eacute;m de melhorar a velocidade do site, esse recurso tamb&eacute;m reduz o uso de largura de banda. No geral, contribui para seus esfor&ccedil;os de SEO em busca de ranqueamentos melhores em buscadores.<\/p><p>Esperamos que este artigo tenha ajudado voc&ecirc; a entender como aproveitar ao m&aacute;ximo o recurso de <em>lazy loading<\/em> no WordPress. Certifique-se de usar um <a href=\"\/br\/hospedagem-wordpress\">servidor WordPress<\/a> de alta qualidade para melhorar ainda mais o desempenho do seu site. Boa sorte!<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Aprenda outras t&eacute;cnicas avan&ccedil;adas do WordPress                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/br\/tutoriais\/banco-de-dados-wordpress\/\">Tudo o que voc&ecirc; precisa saber: Guia Sobre banco de dados<\/a><br>\n<a href=\"\/br\/tutoriais\/lei-de-protecao-de-dados-pessoais-no-wordpress-gdpr-guia-completo\/\">WordPress: Guia do WordPress GDPR<\/a><br>\n<a href=\"\/br\/tutoriais\/campos-personalizados-wordpress\/\">Como adicionar campos personalizados do WordPress <\/a><br>\n<a href=\"\/br\/tutoriais\/criar-shortcode-wordpress\/\">Como criar um c&oacute;digo de acesso no WordPress<\/a><br>\n<a href=\"\/br\/tutoriais\/acelerar-seu-site-wordpress-em-9-passos-faceis\/\">Como acelerar um site WordPress<\/a><\/p>\n                    <\/div>\n        \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se o seu site WordPress depende muito de conte&uacute;do visual, voc&ecirc; pode adicionar a funcionalidade de lazy loading a ele. Esse recurso do WordPress ajuda a melhorar a velocidade e o desempenho das suas p&aacute;ginas, o que o torna essencial para seus esfor&ccedil;os de SEO. Este artigo ir&aacute; explorar como o lazy loading funciona no [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/wordpress-lazy-loading\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"O lazy loading do WordPress deve ser prioridade para sites com uso de m\u00eddias, pois \u00e9 uma \u00f3tima forma de aumentar o desempenho. Aprenda como habilit\u00e1-lo!","rank_math_focus_keyword":"wordpress lazy loading","footnotes":""},"categories":[4911],"tags":[7449],"class_list":["post-29976","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-wordpress-lazy-loading"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-lazy-load","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wordpress-lazy-loading","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/lazy-load-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/lazy-load-en-wordpress","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-lazy-load","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-lazy-loading-how-to-implement-it-on-your-site","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-lazy-loading-how-to-implement-it-on-your-site","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/lazy-load-en-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/lazy-load-en-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/lazy-load-en-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wordpress-lazy-loading-como-implementa-lo-em-seu-site","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-lazy-load","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-lazy-load","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-lazy-load","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-lazy-load","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/29976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=29976"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/29976\/revisions"}],"predecessor-version":[{"id":37369,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/29976\/revisions\/37369"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=29976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=29976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=29976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}