{"id":27776,"date":"2022-05-30T18:57:19","date_gmt":"2022-05-30T21:57:19","guid":{"rendered":"\/tutoriais\/?p=27776"},"modified":"2025-03-28T12:25:19","modified_gmt":"2025-03-28T15:25:19","slug":"largest-contentful-paint","status":"publish","type":"post","link":"\/br\/tutoriais\/largest-contentful-paint\/","title":{"rendered":"Largest contentful paint (LCP): o que \u00e9 e 11 maneiras de melhor\u00e1-la"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Compreender os <a href=\"\/br\/tutoriais\/core-web-vitals\/\"><strong>Core Web Vitals<\/strong><\/a>&nbsp;ajuda a garantir que seu site possa oferecer a melhor experi&ecirc;ncia ao usu&aacute;rio. Eles consistem em v&aacute;rias m&eacute;tricas que representam como os usu&aacute;rios interagem com seu site, uma das quais &eacute; a Largest Contentful Paint (LCP).<\/p><p><span style=\"font-weight: 400\">        <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                    O Que &eacute; Largest Contentful Paint?                <\/p>\n            <\/div>\n            <p class=\"protip__content\">A Largest Contentful Paint (LCP) representa o tempo de carregamento de um site. Ela se concentra em medir a rapidez com que a p&aacute;gina da web renderiza seus maiores elementos, incluindo imagens e blocos de texto. Uma boa pontua&ccedil;&atilde;o de LCP pode indicar uma melhor experi&ecirc;ncia do usu&aacute;rio e menores taxas de rejei&ccedil;&atilde;o.<\/p>\n                    <\/div>\n         <\/span><\/p><p class=\"wp-block-paragraph\">Neste artigo, vamos mergulhar mais fundo na Largest Contentful Paint, analisando como medi-la e alguns m&eacute;todos &uacute;teis para melhor&aacute;-la.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-30339\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-medir-a-largest-contentful-paint\"><strong>Como Medir a Largest Contentful Paint<\/strong><\/h2><p class=\"wp-block-paragraph\">Medir as m&eacute;tricas do Core Web Vitals, desde a <strong><a href=\"\/br\/tutoriais\/interaction-to-next-paint\/\">Interaction to Next Paint (INP)<\/a><\/strong> at&eacute; a Largest Contentful Paint (LCP), requer certas ferramentas e software. Os dados de campo s&atilde;o coletados de usu&aacute;rios reais e suas experi&ecirc;ncias, enquanto os dados de laborat&oacute;rio coletam informa&ccedil;&otilde;es de um ambiente simulado.<\/p><p class=\"wp-block-paragraph\">Algumas ferramentas tamb&eacute;m combinam os dois tipos de dados para fornecer um relat&oacute;rio mais detalhado para <a href=\"\/br\/tutoriais\/otimizacao-de-sites\/\"><strong>otimizar seu site<\/strong><\/a>.<\/p><p class=\"wp-block-paragraph\">Uma das ferramentas mais populares para medir o LCP &eacute; a <a href=\"https:\/\/pagespeed.web.dev\/?utm_source=psi&amp;utm_medium=redirect\" target=\"_blank\" rel=\"noopener\"><strong>PageSpeed Insights<\/strong><\/a> da Google. &Eacute; uma ferramenta gratuita que ajuda os usu&aacute;rios a analisar e diagnosticar o desempenho da web ao apresentar auditorias relevantes e oportunidades de melhoria.<\/p><p class=\"wp-block-paragraph\">Usar o PageSpeed &#8203;&#8203;Insights &eacute; relativamente f&aacute;cil. Aqui est&aacute; o que voc&ecirc; precisa fazer ao operar esta ferramenta:<\/p><ul class=\"wp-block-list\">\n<li>Digite ou cole a URL do site na barra de pesquisa na parte superior da p&aacute;gina e clique no bot&atilde;o <strong>Analisar<\/strong>. Observe que a conclus&atilde;o da an&aacute;lise de desempenho pode levar alguns minutos.<\/li>\n\n\n\n<li>Quando a an&aacute;lise estiver conclu&iacute;da, verifique a se&ccedil;&atilde;o <strong>Diagnosticar problemas de desempenho<\/strong> para obter m&eacute;tricas e recomenda&ccedil;&otilde;es &uacute;teis para melhorar a performance. Uma pontua&ccedil;&atilde;o representa o resultado geral.<br><\/li>\n\n\n\n<li>Voc&ecirc; pode encontrar mais m&eacute;tricas, incluindo a Largest Contentful Paint, a Interaction to Next Paint e <a href=\"https:\/\/www.hostinger.com\/tutorials\/cumulative-layout-shift-cls\/\"><strong>Mudan&ccedil;a de Layout Cumulativa<\/strong><\/a>. Clique em Expandir visualiza&ccedil;&atilde;o para ler breves explica&ccedil;&otilde;es de cada m&eacute;trica.<\/li>\n\n\n\n<li>O PageSpeed &#8203;&#8203;Insights tamb&eacute;m oferece v&aacute;rias recomenda&ccedil;&otilde;es e diagn&oacute;sticos para melhorar o desempenho do site. Tamb&eacute;m &eacute; poss&iacute;vel filtr&aacute;-las com base em Core Web Vitals relevantes.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Outras ferramentas que voc&ecirc; pode querer considerar s&atilde;o <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noopener\"><strong>Lighthouse<\/strong><\/a>&nbsp;e&nbsp;<a href=\"https:\/\/search.google.com\/search-console\/\" target=\"_blank\" rel=\"noopener\"><strong>SearchConsole<\/strong><\/a>.<\/p><h3 class=\"wp-block-heading\"><strong>O Que &eacute; uma Boa Pontua&ccedil;&atilde;o para a Largest Contentful Paint?<\/strong><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"316\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/public\" alt=\"infogr&aacute;fico indicando faixas do lcp (largest Contentful paint)\" class=\"wp-image-46704\" title=\"largest-contentful-paint\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/w=960,fit=scale-down 960w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/Largest-Contentful-Paint-Benchmarks.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">A pontua&ccedil;&atilde;o de Largest Contentful Paint &eacute; medida em segundos. Como regra geral, uma p&aacute;gina da web deve ser capaz de renderizar seus maiores elementos em menos de 2,5 segundos.<\/p><p class=\"wp-block-paragraph\">Uma p&aacute;gina com uma pontua&ccedil;&atilde;o de LCP de 1,2 segundo ou menos significa que ela &eacute; boa o suficiente e voc&ecirc; n&atilde;o precisa realizar outras a&ccedil;&otilde;es. Uma pontua&ccedil;&atilde;o entre 1,2 e 2,5 segundos ainda &eacute; aceit&aacute;vel. No entanto, voc&ecirc; pode querer ajustar alguns elementos para melhor&aacute;-la.<\/p><p class=\"wp-block-paragraph\">Uma pontua&ccedil;&atilde;o de LCP superior a 2,5 segundos significa que seu site tem um desempenho ruim que pode afetar negativamente a experi&ecirc;ncia do usu&aacute;rio e, em &uacute;ltima an&aacute;lise, atrapalhar o crescimento do seu neg&oacute;cio.<\/p><h3 class=\"wp-block-heading\"><strong>Quais Elementos a Largest Contentful Paint Mede?<\/strong><\/h3><p class=\"wp-block-paragraph\">Cada m&eacute;trica mede diferentes elementos do site. Por exemplo, a Primeira Pintura de Conte&uacute;do (FCP) mede o tempo necess&aacute;rio para uma p&aacute;gina da Web exibir o primeiro conte&uacute;do. Nesse caso, o conte&uacute;do inclui imagens, gr&aacute;ficos e elementos de texto.<\/p><p class=\"wp-block-paragraph\">Enquanto isso, a LCP mede apenas a rapidez com que uma p&aacute;gina pode carregar o maior elemento dentro da janela de visualiza&ccedil;&atilde;o, que &eacute; a &aacute;rea da janela que mostra o conte&uacute;do. Isso ocorre porque o tempo necess&aacute;rio para exibir o maior elemento &eacute; um indicador importante de qu&atilde;o r&aacute;pido a p&aacute;gina pode carregar.<\/p><p class=\"wp-block-paragraph\">Os elementos que acionam as entradas de LCP incluem:<\/p><ul class=\"wp-block-list\">\n<li>Elementos de imagem (incluindo aqueles dentro de um elemento SVG)<\/li>\n\n\n\n<li>Elementos de v&iacute;deo<\/li>\n\n\n\n<li>Elementos com uma imagem de fundo carregada usando a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/web\/css\/url\" target=\"_blank\" rel=\"noopener\"><strong>url() function<\/strong><\/a><\/li>\n\n\n\n<li>N&oacute;s de texto em elementos de n&iacute;vel de bloco<\/li>\n<\/ul><p class=\"wp-block-paragraph\">O que &eacute; considerado o maior elemento depende do tipo. Para elementos de imagem, o tamanho relatado pode ser tanto seu tamanho vis&iacute;vel quanto seu tamanho intr&iacute;nseco. A op&ccedil;&atilde;o escolhida &eacute; sempre a que for menor.<\/p><p class=\"wp-block-paragraph\">Para elementos de texto, o LCP considera apenas o tamanho de seus n&oacute;s de texto.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, a Largest Contentful Paint n&atilde;o considerar&aacute; nenhuma parte de um elemento que se estenda fora da janela de visualiza&ccedil;&atilde;o, ou que seja recortado por ela. Isso significa que o c&aacute;lculo do tamanho n&atilde;o inclui nenhuma margem, preenchimento ou borda.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-melhorar-a-largest-contentful-paint-11-metodos-eficazes\"><strong>Como Melhorar a Largest Contentful Paint: 11 M&eacute;todos Eficazes<\/strong><\/h2><p class=\"wp-block-paragraph\">A Largest Contentful Paint &eacute; um indicador importante da velocidade de carregamento da p&aacute;gina de um site. Portanto, uma pontua&ccedil;&atilde;o baixa de LCP pode resultar em uma experi&ecirc;ncia ruim para o usu&aacute;rio.<\/p><p class=\"wp-block-paragraph\">Existem v&aacute;rias causas comuns de desempenho ruim do site, incluindo:<\/p><ul class=\"wp-block-list\">\n<li>Tempos de resposta do servidor e tempos de carregamento de recursos lentos<\/li>\n\n\n\n<li>Renderiza&ccedil;&atilde;o do lado do cliente<\/li>\n\n\n\n<li>Recursos de bloqueio de renderiza&ccedil;&atilde;o<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Felizmente, existem v&aacute;rias maneiras de resolver esses problemas. Vejamos 11 m&eacute;todos eficazes para melhorar a maior pontua&ccedil;&atilde;o de conte&uacute;do do seu site.<\/p><h3 class=\"wp-block-heading\">1. Utilize uma CDN<\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>m&eacute;dio<\/p><p class=\"wp-block-paragraph\"><strong>Impacto: <\/strong>baixo\/m&eacute;dio\/alto<\/p><p class=\"wp-block-paragraph\">A <a href=\"\/br\/tutoriais\/o-que-e-cdn\/\"><strong>rede de entrega de conte&uacute;do (CDN)<\/strong><\/a> &eacute; uma &oacute;tima ferramenta para melhorar o gerenciamento de tr&aacute;fego do seu site. Uma CDN usa servidores adicionais para auxiliar quando o servidor de origem precisa lidar com tr&aacute;fego intenso.<\/p><p class=\"wp-block-paragraph\">Normalmente, sites maiores usam essa tecnologia para lidar com muitos visitantes regularmente.<\/p><p class=\"wp-block-paragraph\">Por isso, uma CDN pode ajudar a melhorar o LCP equilibrando a carga da rede. Afinal, as solicita&ccedil;&otilde;es dos visitantes n&atilde;o precisam ser enfileiradas no mesmo servidor.<\/p><p class=\"wp-block-paragraph\">Isso pode resultar em uma pontua&ccedil;&atilde;o de LCP mais r&aacute;pida e potencialmente melhorar a experi&ecirc;ncia do usu&aacute;rio.<\/p><p class=\"wp-block-paragraph\">Uma CDN tamb&eacute;m pode ser aprimorada com software adicional, como uma <a href=\"https:\/\/imagekit.io\/blog\/what-is-image-cdn-guide\/\" target=\"_blank\" rel=\"noopener\"><strong>CDN de imagem<\/strong><\/a>, que otimiza e transforma tamanhos de imagem em tempo real. Isso pode melhorar ainda mais a rapidez com que um site rico em m&iacute;dia renderiza seu conte&uacute;do.<\/p><p class=\"wp-block-paragraph\">O processo de <a href=\"\/br\/tutoriais\/melhorando-o-desempenho-do-site-usando-cdn\/\"><strong>configurar uma CDN<\/strong><\/a> varia dependendo do seu provedor de hospedagem. Normalmente, &eacute; relativamente simples.<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; estiver usando uma <a href=\"\/br\/hospedagem-de-sites\">hospedagem Hostinger<\/a>, &eacute; poss&iacute;vel habilitar uma CDN diretamente do <a href=\"\/br\/tutoriais\/como-usar-a-hostinger\/\"><strong>hPanel<\/strong><\/a>.<\/p><p class=\"wp-block-paragraph\">Uma das solu&ccedil;&otilde;es de CDN mais populares &eacute; a do <a href=\"https:\/\/www.cloudflare.com\/pt-br\/cdn\/\" target=\"_blank\" rel=\"noopener\"><strong>Cloudflare<\/strong><\/a>, que oferece mais de 120 centros em todo o mundo. Este servi&ccedil;o oferece um plano gratuito e possui um processo de configura&ccedil;&atilde;o simples, principalmente se voc&ecirc; estiver <a href=\"\/br\/tutoriais\/cdn-cloudflare\/\"><strong>configurando Cloudflare no WordPress<\/strong><\/a>.<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; pode querer considerar outras solu&ccedil;&otilde;es CDN, incluindo <a href=\"https:\/\/www.stackpath.com\/products\/cdn\/\" target=\"_blank\" rel=\"noopener\"><strong>StackPath<\/strong><\/a>, <a href=\"https:\/\/sucuri.net\/website-performance\/\" target=\"_blank\" rel=\"noopener\"><strong>Sucuri<\/strong><\/a>, e <a href=\"https:\/\/cloud.google.com\/cdn\" target=\"_blank\" rel=\"noopener\"><strong>CDN do Google Cloud<\/strong><\/a>.<\/p><h3 class=\"wp-block-heading\"><strong>2. Garanta o Dimensionamento Correto da Imagem<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>f&aacute;cil<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>baixo\/m&eacute;dio\/alto<\/p><p class=\"wp-block-paragraph\">Como mencionado anteriormente, algumas imagens podem constituir um grande elemento de pintura com conte&uacute;do, dependendo de seus tamanhos. Portanto, garantir que suas p&aacute;ginas da Web tenham o tamanho de imagem otimizado &eacute; importante para manter uma boa pontua&ccedil;&atilde;o de LCP.<\/p><p class=\"wp-block-paragraph\">A chave aqui &eacute; entender o dimensionamento correto da imagem com base no dispositivo do usu&aacute;rio. Para garantir uma boa pontua&ccedil;&atilde;o de LCP, as p&aacute;ginas da Web precisam usar imagens responsivas.<\/p><p class=\"wp-block-paragraph\">Por exemplo, se a vers&atilde;o para computador do seu site usa imagens de tamanho grande, a vers&atilde;o para celular deve usar imagens de tamanho m&eacute;dio.<\/p><p class=\"wp-block-paragraph\">Tamb&eacute;m &eacute; importante conhecer os tamanhos de imagem padr&atilde;o da plataforma do seu site. Por exemplo, h&aacute; quatro padr&otilde;es de <a href=\"\/br\/tutoriais\/tamanho-imagens-wordpress\/\"><strong>Tamanhos de imagem do WordPress<\/strong><\/a>, que s&atilde;o:<\/p><ul class=\"wp-block-list\">\n<li><strong>Miniatura <\/strong>&ndash; precisamente 150 pixels quadrados.<\/li>\n\n\n\n<li><strong>M&eacute;dio <\/strong>&ndash; at&eacute; 300 pixels quadrados.<\/li>\n\n\n\n<li><strong>Grande <\/strong>&ndash; m&aacute;ximo de 1024 pixels quadrados.<\/li>\n\n\n\n<li><strong>Tamanho completo <\/strong>&ndash; refere-se ao tamanho da imagem original.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Tenha em mente que as imagens relatam seu menor tamanho de elemento. Isso significa que uma imagem compactada relatar&aacute; seu tamanho vis&iacute;vel, enquanto uma imagem ampliada informar&aacute; seu tamanho original.<\/p><h3 class=\"wp-block-heading\"><strong>3. Otimize as Imagens<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>f&aacute;cil<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>baixo\/m&eacute;dio\/alto<\/p><p class=\"wp-block-paragraph\">Al&eacute;m de garantir o dimensionamento correto, existem outras formas de otimizar imagens em seu site e melhorar o tempo de carregamento.<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; estiver <a href=\"\/br\/tutoriais\/otimizar-imagens-wordpress\/\"><strong>otimizando imagens no WordPress<\/strong><\/a>, o m&eacute;todo &eacute; relativamente f&aacute;cil, pois voc&ecirc; s&oacute; precisa escolher o formato de arquivo correto ou usar um plug-in.<\/p><p class=\"wp-block-paragraph\">Algumas das ferramentas mais populares para otimizar imagens para sites incluem <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\"><strong>TinyPNG<\/strong><\/a>, <a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noopener\"><strong>Imagify<\/strong><\/a> e <a href=\"https:\/\/kraken.io\/\" target=\"_blank\" rel=\"noopener\"><strong>Kraken<\/strong><\/a>. Plugins como <a href=\"https:\/\/br.wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noopener\"><strong>Optimole<\/strong><\/a>, <a href=\"https:\/\/br.wordpress.org\/plugins\/ewww-image-optimizer\/\" target=\"_blank\" rel=\"noopener\"><strong>Otimizador de imagem EWWW<\/strong><\/a> e <a href=\"https:\/\/br.wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noopener\"><strong>ShortPixel<\/strong><\/a> tamb&eacute;m s&atilde;o &oacute;timas op&ccedil;&otilde;es para usu&aacute;rios do WordPress.<\/p><p class=\"wp-block-paragraph\">A otimiza&ccedil;&atilde;o de imagens n&atilde;o &eacute; &uacute;til apenas para melhorar a pontua&ccedil;&atilde;o do LCP. Ela permite que voc&ecirc; economize espa&ccedil;o de armazenamento e melhore potencialmente a qualidade do seu <a href=\"\/br\/tutoriais\/o-que-e-seo\/\"><strong>SEO<\/strong><\/a> do seu site. Se voc&ecirc; &eacute; um usu&aacute;rio do WordPress, confira mais maneiras de <a href=\"\/br\/tutoriais\/30-tecnicas-de-seo-para-wordpress\/\"><strong>melhorar seu SEO<\/strong><\/a>.<\/p><p><span style=\"font-weight: 400\">        <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                    Leitura Sugerida                <\/p>\n            <\/div>\n            <p class=\"protip__content\">As imagens n&atilde;o s&atilde;o o &uacute;nico elemento que voc&ecirc; precisa otimizar para melhorar o desempenho do seu site WordPress. Leia nosso artigo sobre <a href=\"\/br\/tutoriais\/acelerar-seu-site-wordpress-em-9-passos-faceis\/\"><strong>como acelerar o WordPress<\/strong><\/a> para descobrir mais.<\/p>\n                    <\/div>\n        <\/span><\/p><h3 class=\"wp-block-heading\"><strong>4. Melhore o Tempo de Resposta do Servidor<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>m&eacute;dio<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>baixo\/m&eacute;dio\/alto<\/p><p class=\"wp-block-paragraph\">O tempo de carregamento da sua p&aacute;gina est&aacute; intimamente relacionado aos tempos de resposta do servidor web. O processo de ida e volta entre a solicita&ccedil;&atilde;o do navegador de um usu&aacute;rio e a solicita&ccedil;&atilde;o do servidor &eacute; um dos principais fatores que afetam a velocidade de carregamento.<\/p><p class=\"wp-block-paragraph\">Esse processo tamb&eacute;m &eacute; conhecido como <strong>tempo de ida e volta (RTT)<\/strong>.<\/p><p class=\"wp-block-paragraph\">Existem v&aacute;rias maneiras de melhorar o tempo de resposta do servidor, incluindo:<\/p><ul class=\"wp-block-list\">\n<li><strong>Implementar o cache do lado do servidor <\/strong>&ndash; os propriet&aacute;rios do site podem aproveitar o cache do navegador e do lado do servidor. O recurso de armazenamento em cache do lado do servidor geralmente est&aacute; dispon&iacute;vel em sua configura&ccedil;&atilde;o de hospedagem.<\/li>\n\n\n\n<li><strong>Atualizar especifica&ccedil;&otilde;es do servidor <\/strong>&ndash; as especifica&ccedil;&otilde;es de hardware de um servidor afetam significativamente seu desempenho. Portanto, considere atualizar para um servidor com melhores recursos de CPU e maior capacidade de armazenamento.<\/li>\n\n\n\n<li><strong>Otimizar c&oacute;digos de aplicativos<\/strong>&ndash; simplificar c&oacute;digos usados &#8203;&#8203;em fun&ccedil;&otilde;es como uma consulta de banco de dados pode ajudar a melhorar uma pontua&ccedil;&atilde;o de LCP. Por exemplo, remover CSS n&atilde;o cr&iacute;tico pode ajudar a acelerar a renderiza&ccedil;&atilde;o inicial. N&atilde;o hesite em pedir ajuda de desenvolvedores web, pois essa etapa pode ser muito t&eacute;cnica.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Para sites WordPress, plugins como <a href=\"https:\/\/br.wordpress.org\/plugins\/wp-dbmanager\" target=\"_blank\" rel=\"noopener\"><strong>WP-DBManager<\/strong><\/a> podem ajudar a otimizar seu banco de dados, reduzindo bloqueios e agendando limpezas autom&aacute;ticas.<\/p><h3 class=\"wp-block-heading\"><strong>5. Use um Provedor de Hospedagem Confi&aacute;vel<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>f&aacute;cil<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>Alto<\/p><p class=\"wp-block-paragraph\">A qualidade da hospedagem &eacute; um fator importante que afeta o desempenho geral da web. Uma boa hospedagem geralmente &eacute; configurada para aprimorar a experi&ecirc;ncia do usu&aacute;rio e vem com v&aacute;rios recursos para facilitar o gerenciamento da web.<\/p><p class=\"wp-block-paragraph\">Portanto, <a href=\"\/br\/tutoriais\/como-escolher-plano-de-hospedagem\/\"><strong>escolher um plano de hospedagem<\/strong><\/a> que atende &agrave;s especifica&ccedil;&otilde;es do seu site pode melhorar a velocidade de carregamento percebida. A Hostinger possui uma ampla gama de op&ccedil;&otilde;es de hospedagem que atendem a v&aacute;rias necessidades e prefer&ecirc;ncias.<\/p><p class=\"wp-block-paragraph\">Por exemplo, nosso <a href=\"\/br\/hospedagem-wordpress\"><strong>plano de hospedagem WordPress<\/strong><\/a> &eacute; ajustado especificamente para otimizar os recursos do CMS e garantir um tempo de carregamento mais r&aacute;pido. O provedor tamb&eacute;m usa um painel de controle intuitivo que torna sua experi&ecirc;ncia de gerenciamento da web menos complicada.<\/p><h3 class=\"wp-block-heading\"><strong>6. Implemente o Cache<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>f&aacute;cil\/m&eacute;dio\/dif&iacute;cil<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>baixo\/m&eacute;dio\/alto<\/p><p class=\"wp-block-paragraph\">Cache refere-se ao armazenamento de ativos est&aacute;ticos de uma p&aacute;gina em armazenamento tempor&aacute;rio. Isso permite um tempo de carregamento de p&aacute;gina mais r&aacute;pido, reduzindo a quantidade de dados transferidos durante o processo de renderiza&ccedil;&atilde;o inicial.<\/p><p class=\"wp-block-paragraph\">Existem dois m&eacute;todos principais de armazenamento em cache &mdash; do lado do servidor e do lado do navegador.<\/p><p class=\"wp-block-paragraph\">Ao <a href=\"\/br\/tutoriais\/como-limpar-o-cache-do-navegador\/\"><strong>habilitar o cache do navegador<\/strong><\/a>, os visitantes podem salvar o cache em seu armazenamento local. Como resultado, eles n&atilde;o precisam baixar os mesmos dados ao revisitar seu site. Voc&ecirc; pode aproveitar o cache do navegador manualmente ou usar plugins.<\/p><p class=\"wp-block-paragraph\">Por outro lado, o cache do lado do servidor &eacute; um m&eacute;todo de armazenamento de uma vers&atilde;o pr&eacute;-criada de uma p&aacute;gina da web no servidor de origem. Com esse m&eacute;todo, o servidor n&atilde;o precisa reconstruir ou carregar o conte&uacute;do da p&aacute;gina do banco de dados quando um usu&aacute;rio revisita o site.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"332\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/LiteSpeed-Cache.png\/public\" alt=\"plugin litespeed cache para wordpress\" class=\"wp-image-32212\" title=\"litespeed-cache\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/LiteSpeed-Cache.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/LiteSpeed-Cache.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/LiteSpeed-Cache.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/LiteSpeed-Cache.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Uma das ferramentas mais populares para habilitar o cache de sites &eacute; o <a href=\"\/br\/tutoriais\/litespeed\/\"><strong>LiteSpeed<\/strong><\/a>. Ele vem com funcionalidade avan&ccedil;ada de cache e outros recursos &uacute;teis, como otimiza&ccedil;&atilde;o de conte&uacute;do din&acirc;mico e balanceador de carga HTTP.<\/p><h3 class=\"wp-block-heading\"><strong>7. Corrija Problemas de Carregamento Lento<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>m&eacute;dio<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>baixo\/m&eacute;dio\/alto<\/p><p class=\"wp-block-paragraph\">O carregamento lento &eacute; uma t&eacute;cnica em que uma p&aacute;gina adia o CSS n&atilde;o cr&iacute;tico e outros recursos durante a renderiza&ccedil;&atilde;o inicial. Em vez disso, ela se concentrar&aacute; no carregamento de conte&uacute;do acima da dobra e renderizar&aacute; recursos n&atilde;o cr&iacute;ticos somente quando necess&aacute;rio.<\/p><p class=\"wp-block-paragraph\">O objetivo &eacute; tornar o processo de carregamento da p&aacute;gina mais r&aacute;pido.<\/p><p class=\"wp-block-paragraph\">Com esse m&eacute;todo, seu site pode carregar arquivos de forma ass&iacute;ncrona, dependendo da dist&acirc;ncia at&eacute; a janela de visualiza&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">Por exemplo, o conte&uacute;do renderizado acima da dobra como uma imagem em destaque aparecer&aacute; imediatamente durante o carregamento inicial. No entanto, elementos como miniaturas de v&iacute;deo fora da janela de visualiza&ccedil;&atilde;o s&atilde;o substitu&iacute;dos por imagens de espa&ccedil;o reservado at&eacute; que os usu&aacute;rios rolem por eles.<\/p><p class=\"wp-block-paragraph\">Contudo, o carregamento lento &agrave;s vezes pode piorar a pontua&ccedil;&atilde;o do LCP devido a v&aacute;rios problemas. Por exemplo, sites que implementam carregamento lento nativo e t&ecirc;m todas as suas imagens seguindo o comportamento de carregamento lento podem obter uma pontua&ccedil;&atilde;o LCP mais baixa.<\/p><p class=\"wp-block-paragraph\">Para corrigir esse problema, basta marcar com o atributo <a href=\"https:\/\/web.dev\/browser-level-image-lazy-loading\/\" target=\"_blank\" rel=\"noopener\"><strong>loading=&rdquo;eager&rdquo;<\/strong><\/a> a imagem em destaque que potencialmente ser&aacute; selecionada como o maior elemento de pintura de conte&uacute;do.<\/p><p class=\"wp-block-paragraph\">Esta fun&ccedil;&atilde;o permite que o elemento de imagem seja renderizado imediatamente, independente de sua dist&acirc;ncia da viewport.<\/p><p class=\"wp-block-paragraph\">Isso tamb&eacute;m pode acontecer com m&eacute;todos de carregamento lento usando JavaScript. Como o navegador precisa executar o JavaScript antes de renderizar um elemento, isso pode prolongar o tempo de carregamento e piorar a pontua&ccedil;&atilde;o de LCP.<\/p><p class=\"wp-block-paragraph\">A solu&ccedil;&atilde;o mais eficaz para esse problema &eacute; desabilitar o carregamento lento em imagens renderizadas acima da dobra. Como resultado, os navegadores ir&atilde;o carreg&aacute;-las sem ter que executar JavaScript previamente.<\/p><h3 class=\"wp-block-heading\"><strong>8. Reduza os Arquivos JS, CSS e HTML<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>f&aacute;cil<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>baixo<\/p><p class=\"wp-block-paragraph\">A minimiza&ccedil;&atilde;o &eacute; um m&eacute;todo para diminuir o tamanho do arquivo, principalmente ao reduzir as linhas de c&oacute;digo dentro dele. Esse &eacute; um dos m&eacute;todos de otimiza&ccedil;&atilde;o de arquivo mais comuns que podem ajudar a melhorar sua m&eacute;trica de LCP.<\/p><p class=\"wp-block-paragraph\">Alguns dos arquivos principais, como CSS, JavaScript e HTML, podem conter muitos espa&ccedil;os em branco desnecess&aacute;rios no c&oacute;digo, o que aumenta seu tamanho. Mesmo que eles n&atilde;o pare&ccedil;am significativos individualmente, eles podem piorar o desempenho do site quando acumulados.<\/p><p class=\"wp-block-paragraph\">Os donos de sites podem <a href=\"\/br\/tutoriais\/melhorando-a-performace-minifying-css-html-e-javascript\/\"><strong>minificar arquivos CSS, HTML e JS<\/strong><\/a> manualmente ou usando plugins do WordPress. Alguns dos plugins de minimiza&ccedil;&atilde;o mais populares incluem <a href=\"https:\/\/br.wordpress.org\/plugins\/fast-velocity-minify\/\" target=\"_blank\" rel=\"noopener\"><strong>Fast Velocity Minify<\/strong><\/a>&nbsp;e&nbsp;<a href=\"https:\/\/br.wordpress.org\/plugins\/wp-super-minify\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Super Minify<\/strong><\/a>.<\/p><p class=\"wp-block-paragraph\">Depois de fazer isso, n&atilde;o se esque&ccedil;a de verificar o relat&oacute;rio das Core Web Vitals. Ferramentas como o PageSpeed &#8203;&#8203;Insights podem oferecer outras oportunidades de minifica&ccedil;&atilde;o caso voc&ecirc; tenha perdido algumas.<\/p><h3 class=\"wp-block-heading\"><strong>9. Elimine JavaScript e CSS ao Bloquear a Renderiza&ccedil;&atilde;o<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>f&aacute;cil<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>baixo\/m&eacute;dio\/alto<\/p><p class=\"wp-block-paragraph\">Os recursos de bloqueio de renderiza&ccedil;&atilde;o s&atilde;o partes de arquivos que podem retardar o processo de carregamento da p&aacute;gina. Isso geralmente pode ser encontrado em arquivos CSS e JS.<\/p><p class=\"wp-block-paragraph\">Esses recursos podem fazer com que os elementos da p&aacute;gina sejam carregados de maneira mais lenta e ao mesmo tempo. O resultado &eacute; a impress&atilde;o de um desempenho insatisfat&oacute;rio do site.<\/p><p class=\"wp-block-paragraph\">Por causa disso, eliminar CSS e JavaScript que bloqueiam a renderiza&ccedil;&atilde;o deve ser uma de suas prioridades para obter um relat&oacute;rio melhor do Core Web Vitals. Isso permite que voc&ecirc; implemente <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Progressive_web_apps\/Loading\" target=\"_blank\" rel=\"noopener\"><strong>carregamento progressivo<\/strong><\/a>, o que pode ajudar a reduzir a taxa de rejei&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">Alguns plugins do WordPress podem ajudar voc&ecirc; a <a href=\"\/br\/tutoriais\/bloqueios-de-renderizacao-no-wordpress\/\"><strong>eliminar recursos de bloqueio de renderiza&ccedil;&atilde;o<\/strong><\/a> de modo mais eficiente. Esses incluem <a href=\"https:\/\/br.wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener\"><strong>W3 Total Cache<\/strong><\/a>,&nbsp;<a href=\"https:\/\/br.wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener\"><strong>Autoptimize<\/strong><\/a>, e&nbsp;<a href=\"https:\/\/br.wordpress.org\/plugins\/speed-booster-pack\/\" target=\"_blank\" rel=\"noopener\"><strong>Speed Booster Pack<\/strong><\/a>.<\/p><p class=\"wp-block-paragraph\">Lembre-se tamb&eacute;m de verificar as sugest&otilde;es de suas ferramentas de laborat&oacute;rio sobre quais arquivos CSS ou JS n&atilde;o cr&iacute;ticos voc&ecirc; deve eliminar.<\/p><h3 class=\"wp-block-heading\"><strong>10. Compacte Recursos de Texto<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>f&aacute;cil\/m&eacute;dio\/dif&iacute;cil<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>Alto<\/p><p class=\"wp-block-paragraph\">Al&eacute;m da minifica&ccedil;&atilde;o, a compacta&ccedil;&atilde;o pode ser um bom m&eacute;todo para otimizar recursos de texto como CSS, HTML e JavaScript. Isso pode tornar o processo de transfer&ecirc;ncia mais r&aacute;pido devido ao tamanho menor do arquivo, resultando em uma melhor pontua&ccedil;&atilde;o de LCP.<\/p><p class=\"wp-block-paragraph\">Um dos m&eacute;todos mais comuns de compacta&ccedil;&atilde;o de recursos de texto &eacute; o GZIP, que se enquadra na categoria de compacta&ccedil;&atilde;o sem perdas. Isso significa que ele manter&aacute; todas as informa&ccedil;&otilde;es dentro do arquivo durante o processo de compacta&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">Os propriet&aacute;rios da Web podem <a href=\"\/br\/tutoriais\/melhorando-o-desempenho-do-site-compressao-gzip\/\"><strong>ativar o GZIP<\/strong><\/a> usando plugins do WordPress como WP Rocket ou servi&ccedil;os de compress&atilde;o online gratuitos como <a href=\"https:\/\/gzip.swimburger.net\/\" target=\"_blank\" rel=\"noopener\"><strong>gzip.swimburger.net<\/strong><\/a>. Lembre-se de que algumas empresas de hospedagem tamb&eacute;m habilitam o GZIP por padr&atilde;o.<\/p><h3 class=\"wp-block-heading\"><strong>11. Adie a An&aacute;lise de JavaScript<\/strong><\/h3><p class=\"wp-block-paragraph\"><strong>N&iacute;vel de dificuldade: <\/strong>f&aacute;cil\/m&eacute;dio\/dif&iacute;cil<\/p><p class=\"wp-block-paragraph\"><strong>Efici&ecirc;ncia: <\/strong>Alto<\/p><p class=\"wp-block-paragraph\">Um navegador normalmente carrega c&oacute;digos de cima para baixo, mas priorizar&aacute; qualquer JavaScript antes de continuar. Isso pode diminuir a velocidade de carregamento da p&aacute;gina e piorar a experi&ecirc;ncia do usu&aacute;rio.<\/p><p class=\"wp-block-paragraph\"><a href=\"\/br\/tutoriais\/como-adiar-a-analise-do-javascript-no-wordpress\/\"><strong>Adiar an&aacute;lise de JavaScript<\/strong><\/a> significa ajustar a p&aacute;gina para atrasar o processamento de qualquer c&oacute;digo JavaScript n&atilde;o cr&iacute;tico. Com esse m&eacute;todo, o navegador pode priorizar o carregamento do conte&uacute;do real da p&aacute;gina mais rapidamente e manter a aten&ccedil;&atilde;o dos visitantes.<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; pode adiar a an&aacute;lise de JavaScript em sua p&aacute;gina manualmente modificando o arquivo function.php ou usando ferramentas como Speed &#8203;&#8203;Booster Pack ou WP Rocket.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">A Largest Contentful Paint (LCP) &eacute; uma das m&eacute;tricas das Core Web Vitals que representa a rapidez com que uma p&aacute;gina da web pode carregar seu maior conte&uacute;do. Essa &eacute; uma importante m&eacute;trica centrada no usu&aacute;rio que afeta a velocidade de carregamento e a experi&ecirc;ncia geral do usu&aacute;rio.<\/p><p class=\"wp-block-paragraph\">Neste artigo, aprendemos como medir a pontua&ccedil;&atilde;o de LCP e 11 maneiras de melhor&aacute;-la, a saber:<\/p><ul class=\"wp-block-list\">\n<li>Utilize uma rede de entrega de conte&uacute;do<\/li>\n\n\n\n<li>Garanta o dimensionamento correto da imagem<\/li>\n\n\n\n<li>Otimize imagens<\/li>\n\n\n\n<li>Melhore o tempo de resposta do servidor<\/li>\n\n\n\n<li>Escolha um provedor de hospedagem confi&aacute;vel<\/li>\n\n\n\n<li>Implemente cache<\/li>\n\n\n\n<li>Corrija problemas de carregamento lento<\/li>\n\n\n\n<li>Minifique CSS, HTML e JavaScript<\/li>\n\n\n\n<li>Elimine recursos de bloqueio de renderiza&ccedil;&atilde;o<\/li>\n\n\n\n<li>Compacte recursos de texto<\/li>\n\n\n\n<li>Adie an&aacute;lise de JavaScript<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Espero que este artigo tenha ajudado voc&ecirc; a melhorar sua pontua&ccedil;&atilde;o de Largest Contentful Paint. Se voc&ecirc; tiver alguma dica ou d&uacute;vida adicional sobre este t&oacute;pico, deixe um coment&aacute;rio abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Compreender os Core Web Vitals&nbsp;ajuda a garantir que seu site possa oferecer a melhor experi&ecirc;ncia ao usu&aacute;rio. Eles consistem em v&aacute;rias m&eacute;tricas que representam como os usu&aacute;rios interagem com seu site, uma das quais &eacute; a Largest Contentful Paint (LCP). Neste artigo, vamos mergulhar mais fundo na Largest Contentful Paint, analisando como medi-la e alguns [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/largest-contentful-paint\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"A Largest Contentful Paint (LCP) \u00e9 uma m\u00e9trica que mostra quanto tempo leva para renderizar o maior elemento da p\u00e1gina. Aprenda sobre ela!","rank_math_focus_keyword":"largest contentful paint","footnotes":""},"categories":[8017,8067],"tags":[7394],"class_list":["post-27776","post","type-post","status-publish","format-standard","hentry","category-marketing-digital","category-seo","tag-largest-contentful-paint"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/largest-contentful-paint\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/largest-contentful-paint\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/largest-contentful-paint\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/largest-contentful-paint\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/largest-contentful-paint\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/largest-contentful-paint\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/largest-contentful-paint\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/largest-contentful-paint\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/largest-contentful-paint\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/largest-contentful-paint\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/largest-contentful-paint\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/largest-contentful-paint\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/largest-contentful-paint\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/largest-contentful-paint\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/largest-contentful-paint\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/largest-contentful-paint\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/27776","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\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=27776"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/27776\/revisions"}],"predecessor-version":[{"id":49432,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/27776\/revisions\/49432"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=27776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=27776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=27776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}