Como OTIMIZAR SITE WORDPRESS Para Carregar RÁPIDO [LiteSpeed Cache, Otimização de Imagens, e Mais]

Neste vídeo eu vou te ensinar como otimizar o seu site WordPress usando o Lite Speed Cache. Fala pessoal, tudo bem? Aqui é a Micaela do Descomplicando Sites e antes de começar o nosso tutorial eu quero pedir para você deixar um like nesse vídeo que ajuda demais o canal a crescer e para você se inscrever no canal esse site aqui que você está vendo é o site que nós vamos usar para otimizar Hoje ele é um projeto que eu ensinei vocês a criar aqui no canal é um site nocional multi páginas foi feito com elementor pro

e tem um tutorial aqui passo a passo eu vou deixar o link para você ir lá ver e se você quiser comprar o template desse projeto também está à venda porque quem não sabe a gente tem uma loja de templates agora que é essa daqui ó templates pd descomplicados sites.com.br o link também fica na descrição que aí todos os projetos que a gente ensina aqui no canal e alguns outros ficam disponíveis para você comprar e só modificar ok pessoal a primeira coisa que a gente tem que fazer antes de começar a nossa otimização é fazer

um backup eu coloquei isso daqui bem grande para que vocês não pem Esse passo porque assim nos últimos vídeos de otimização que eu fiz que vocês inclusive adoraram e muita gente conseguiu otimizar o site perfeitamente Teve muita gente também que negligenciou os meus avisos E aí o site bugou E aí a pessoa Ficou desesperada e não sabia como é que fazia para voltar o site mas se você fizer um backup todos os problemas são solucionados leva poucos minutos é só você dar um clique eu vou te ensinar inclusive nesse vídeo como fazer o backup então

não deixe de fazer o backup do seu site antes de começar o otimizar Ok então para fazer o backup a gente vai usar o plugin WP vived que é o que eu estou gostando de usar mais agora então você vai vir aqui em plugins adicionar plugin pesquisar por WP vivid É Este plugin aqui vamos clicar em instalar depois em ativar Pronto ele já te leva pra página de backup se você não tiver parado aqui tá vendo que ele abre um abinha aqui escrito WP vived é só você clicar aqui em backup e restore que você

já vem para cá Aí você vai clicar aqui ó em backup no ele vai gerar um arquivo de backup para você o tempo de espera vai depender do tamanho do seu site na hora que essa Barrinha aqui terminar de carregar e também terminar aqui ó em 100% ele vai ficar disponível para você baixar pronto o bab já ficou pronto ele fica aqui ó nessa parte de baixo se você quiser você pode baixar inclusive pro seu computador é só clicar aqui em download que ele vai fazer o download do arquivo Ok e se der algum problema

você quiser restaurar o site para como ele estava antes você vem aqui em backup restore clica aqui em restore que ele vai fazer a restauração e o site vai voltar exatamente Por que estava antes tá beleza agora sim a gente vai começar a otimização do nosso site separei aqui em alguns passos para explicar para vocês e o primeiro passo sempre vai ser escolher uma boa hospedagem e um plano adequado pro seu projeto que às vezes não adianta a gente fazer vários recursos aqui de otimização pode até deixar o site melhor do que ele está mas

às vezes não vai ficar tão bom e tão rápido quanto ele poderia porque a hospedagem contribui demais tá pessoal e a hospedagem que a gente indica vocês já sabem que é a rosinger que é uma hospedagem multinacional tem servidor no Brasil e deem outros países também tem suporte em português e o melhor de tudo nós somos parceiros e afiliados da rosinger e temos o nosso link aqui na descrição do vídeo então se você comprar usando o nosso link você ajuda o canal a trazer mais conteúdo relevante para você e aqui na descrição também fica o

nosso cupom de desconto tá Então pessoal aqui na na página inicial da rosinger eles mostram geralmente esses quatro planos Né desde o plano mais básico que é o single só que eu sempre recomendo que vocês peguem a partir do plano Premium ou se possível o plano Business Porque quanto maior for o plano mais recursos ele vai tendo inclusive recursos de otimização então aqui ó no plano Premium você pode clicar aqui em ver todos os recursos que ele vai mostrar o restante aqui na parte de hospedagem de WordPress ele tem recursos de aceleração avançada do WordPress

é o mesmo recurso que tem aqui nesse plano C inclusive mas no plano Business ó a partir desse plano Business que é inclusive onde tá instalado o meu meu projeto aqui além da aceleração avançada aqui do Servidor Lite Speed ele ainda tem Cache de objeto não tá mostrando aqui mas se você vier aqui em WordPress hospedagem WordPress ó ele vai mostrar os planos aqui que ele indica para WordPress inclusive tá vendo que aqui ele nem mostra o single ele mostra parte do Premium aí aqui dá pra gente ver ó olha aceleração avançada mais C de

objeto e aqui no no caso ele tem só a aceleração avançada então aqui ele tem mais recursos tem o CDN grátis que é um recurso de otimização também que deixa o site bem rápido então esse plano aqui ó a parte desse Seria o ideal mas os outros também são muito bons tá Principalmente se o seu site for um site institucional um site menor esse plano aqui ele vai suprir super a sua demanda Ok mas claro conforme o seu site for maior tiver mais páginas mais imagens mais recursos mais pesado ele é então aí você precisa

de um plano mais ó se você tiver começando você pode pegar um plano menor e depois fazer o upgrade aqui é bem dinâmico tá então você escolhe o seu plano de hospedagem se você tiver em outro hospedagem quiser migrar para hostinger tem vídeo também ensinando como migrar site de servidor uma outra coisa muito importante também além dos recursos aqui que a gente vai configurar é ter boas práticas no desenvolvimento do seu site e eu até determinei algumas coisas aqui para mostrar para vocês o que são essas boas práticas então por exemplo não usar plugins desnecessários

Às vezes a gente a gente precisa usar algum plugin adom para alguma coisa aí a gente vai Testa ele vê que não é aquilo acha outro e aí a gente deixa aquele plugin lá instalado que a gente não precisa e ele só vai pesando o site fazendo conflito com outros plugins então plugins e temas desnecessários você pode excluir evitar muitos Addons desnecessários que foi exatamente o que eu falei né Às vezes você por exemplo vai criar um site com elemento free que super dá para criar inclusive este site aqui ó que é um site de

advogado ele foi criado com elemento free e o plugin Royal adons que a gente criou a parte do menu e rodapé com ele inclusive tem vídeo no canal ensinando e a parte de blog então se você encontrar um bom plugin Adon como Royale por exemplo que já tem todos os recursos que você quer você não precisa instalar vários plugins para poder ficar pesando e dando conflito escolha um plugin que tem aqueles bons recursos ou dois que for que tem aqueles recursos ali que você precisa e não fica instalando vários não fica inventando muita coisa para

ter no site também para precisar de vários plugins outra coisa tem gente que tem assinatura de plugins como por exemplo plugins da Croc bok e outros plugins e ele não vai usar no site deixa ativo lá da mesma forma Isso só vai atrapalhar o funcionamento do seu site se você não vai usar o plugin no site não precisa ativar ele deixe para usar num projeto que você vai realmente utilizar em alguma coisa tá então isso pessoal é muito importante Às vezes o site tá cheio de bug você fica o tempo todo correndo contra o tempo

por conta de plugin temas desnecessário que você deixa ativo para dando conflito outra coisa use os recursos do elementor da forma certa porque por exemplo você pode usar um widget que já tem os recursos você procura em vez de criar coisa do zero por exemplo aqui ó nesse site tá vendo que de cada Card aqui em cada caixinha eu precisei de um ícone de um título da descrição e de um botão em vez de colocar um contêiner um contêiner principal e aqui vários contêiners dentro e vários ó um ícone um título um texto e um

botão dentro eu peguei um ID que chama CTA ou chamada para ação que já tem todos esses recursos Então é bom você ir testando os widgets do elemento Porque quanto mais você conhecer mas você vai poder fazer soluções assim em vez de ficar enchendo o seu site de código e de sessões e contêiners desnecessários né Outra coisa usar HTML CSS a seu favor por exemplo antes no elementor pro não tinha essa função aqui ó de Carrossel de colocar um fundo nessa setinha agora já até tem né nativo mas antes não tinha E aí tinha gente

que ia lá instalava um plugin só para isso só para ter essa função de colocar essa setinha não precisa se você souber um pouquinho de CSS isso daqui com umas duas ou três linhas de código você faz isso daqui Se você souber um pouquinho de CSS Já te ajuda você não precisa instalar um plugin a mais para isso tem vídeo no canal te ensinando o básico e essencial de CSS HTML que você precisa tá nem sempre você vai precisar mas se precisar é melhor que você use um pouquinho do que instalar outro plugin e por

último otimizar as imagens as imagens Pessoal vocês vão ver as imagens são as que mais contribuem pra lentidão do site pra nota ruim do site Então se as imagens elas T que estar no tamanho adequado não pode usar imagens gigantes para uma coisa que é pequena por exemplo aqui você está vendo no site que a logo ela está sendo usada pequena no site você não precisa colocar uma logo aqui que seja 3.000 por 5000 do tamanho que o seu designer mandou para você sendo que você vai usar ela tão pequeninha por quando você faz isso

você obriga o Word expressa gerar um código para diminuir via código o tamanho dessa imagem sendo que você poderia colocar ela já no tamanho adequado quanto mais código tiver no site mais lento ele fica então a gente sempre tem que tentar Diminuir a quantidade de código e a mesma coisa por exemplo num banner aqui você tem que colocar a imagem do tamanho que ela comporta a sessão inteira se você colocar uma imagem menor tem que ser gerado um código para esticar essa imagem mais para frente no tutorial eu vou ensinar vocês como adequar o tamanho

das imagens tá outra coisa muito importante manter plugins e temas e a versão do PHP atualizados sempre que os plugins e os temas vão criando atualizações eles vão atualizando paraa nova tecnologia do PHP também e as empresas os desenvolvedores se preocupa com a experiência do usuário então eles estão sempre tentando melhorar a velocidade a compatibilidade das coisas a segurança né avaliando o código para ver se não tem nenhuma falha de segurança então é importante a gente manter atualizado só que claro por conta que são coisas diferentes feitos por programadores diferentes pode dar conflito então Toda

vez que você for atualizar faz o backup antes porque aí se Você atualizou o plugin deu algum problema Você volta a ver seu anterior do site tá mas é importante você vir aqui atualizar os plugins ir lá e testar porque às vezes por exemplo você atualiza todos os plugins de uma vez e aí você entra no site o site tá bugado você não sabe qual plugin que foi cupado daquilo Porque Você atualizou todos de uma vez ó atualizei o elementor vem aqui e Testa o site para ver se essa nova versão do elementor não bugou

nada tá acessa o site acesso todas as páginas aí você vem atualiza outro plugin Eu já atualizei testei todos os plugins aqui e aí Entrando lá naquela premissa de não usar plugins e temas desnecessários eu vou excluir Este plugin aqui ó e-mail Market que eu não estou usando no site então vou clicar aqui em desativar e clicar em excluir o restante eu estou usando eu posso deixar agora a gente vai vir em aparência temas olha aqui no meu tem apenas um tema se o seu tiver outros temas eu vou até adicionar outros aqui para você

ver como é que fica ó se o seu tiver assim você vai clicar em cima dele dos que não estão sendo usados vai clicar em excluir e vai ficar em Ok tem que restar apenas um tema aqui no site beleza e a versão do PHP também para atualizar a versão do PHP você vai acessar a sua conta aqui na rosinger vai vir aqui em sites se você tiver apenas um site de vai aparecer aqui apenas um para você se você tiver vários como eu você pesquisa aqui na lupinha aí você clica em painel de controle

aí aqui você vai entrar pesquisa aqui por PHP aí vai ter aqui configurações PHP e aqui vai ter as versões do PHP E aí você pode vir e atualizar a versão mais estável até agora é a 8.2 então se a sua tiver muito antiga por exemplo você pode vir mudar para 8.2 e clicar em atualizar Tá novamente se você vier aqui e atualizar o site der algum problema não é o fim do mundo é só você retornar pra versão anterior e testar porque também pessoal não adianta você atualizar o PHP e não atualizar os plugins

e temas tá porque plugins e temas antigos não são compatíveis com versões novas do PHP e a mesma coisa o contrário versão antiga do PHP não é compatível com atualização do Plugin então se você tiver uma versão muito antiga de menos do que set você atualizar o seu plugin Às vezes o site para de funcionar por conta disso porque ele é compatível só com as versões novas do PHP e você está com antiga tá então tem que manter Resumindo Mantenha sempre tudo atualizado e faça backup Beleza agora vamos pro passo número dois que é otimizar

as imagens efetivamente primeira coisa que a gente vai fazer é redimensionar as imagens e colocá-las no tamanho certo para isso a gente vai usar o plugin chamado Smash você vai vir aqui em plugins Adicionar novo vai digitar aqui Smash É Este plugin aqui aqui você vai clicar em instalar depois em ativar e agora vai começar primeiro a gente vai acessar o site do page Speed que é um site do Google onde a gente consegue medir a velocidade e desempenho do nosso site Então você acessa aqui vai colar o link do seu site ó pegar aqui

vou colar e vai clicar em analisar enquanto Analisa você também vai acessar na guia anônima eí você pode pressionar contrl shift n para acessar uma guia anônima ou clicar nessas três pontinhos e clicar em nova janela anônima aí você vai acessar o seu site pela guia anônima para você ver o tempo que ele tá levando para carregar e também sempre que você for testar alguma coisa no site você vai lá configura alguma coisa e vem testar é bom você testar na guia anônima porque na guia anônima eu Você está acessando como usuário né como qualquer

pessoa acessando seu site E como você está logado aqui às vezes o site pode estar carregando mais devagar por conta do WordPress que está aberto entendeu então se você acessa na guia anônimo você vê ele deslogado beleza ó aqui a gente nem tá tão ruim assim né porque eu fiz usando boas práticas a hospedagem minha é muito boa então nem tá tão ruim assim no computador tá 75 e no celular tá 68 Ok Então essa é a métrica que a gente tem até agora vamos fazer as configurações aqui do Smash quando a gente ativa ele

ele já abre um abinha aqui aí você vai clicar em cima da palavra Smash vai clicar aqui em configurações pode clicar aqui em pular e e configurar depois e aqui nós vamos só ativar essa parte ó detectar e mostrar imagens do tamanho correto e vamos clicar em salvar mudanças vamos recarregar a página E aí ele vai abrir essa caixinha essa caixinha vai nos dizer o tamanho correto das imagens ela vai dizer aqui pra gente qual que é o tamanho real da imagem agora que é o que tá em amarelo e qual o tamanho ela deveria

estar aqui ó você clica em cima e Ele pisca a imagem tá vendo que eu cliquei aqui ele tá piscando a logo para poder mostrar pra gente qual imagem é E se for em outra parte do site ele nos leva lá pra parte do site então Ó aqui a logo ela está 397 Mas ela está sendo representada 262 Então a gente tem que deixar ela 262 para que o site não precise gerar um código para transformar ela nesse tamanho Por que pessoal que a gente precisa fazer isso essa diminuição de código se você observar aqui

no Lite Speed Cache ó uma das coisas que mais consomem tempo aqui de carregamento é o tamanho do Dom ó Evite o tamanho do Dom excessivo e o que que é dom o dom é isso aqui ó é esse wireframe Onde fica todo o código do site cada coisinha que a gente cria no site gera um código E aí se a gente vai usando mais coisas desnecessárias ou quanto mais coisas a gente for usando maior fica o tamanho do código e quando a gente carrega o site o nosso navegador como Google Chrome por exemplo ele

lê todo esse código aqui renderiza ou seja carrega e transforma nessa representação visual que a gente tá vendo Então você concorda comigo que quanto maior for esse daqui mais tempo ele vai levar para ler tudo e mostrar o site na tela pra gente entendeu Por isso que a gente sempre tem que tentar economizar código para diminuir esse tempo aqui de renderização de carregamento desse código Ok então se a gente coloca a imagem no tamanho adequado não precisa ser gerado um código para diminuir o tamanho da imagem tá então vamos lá se você assim como eu

tiver apenas uma imagem de logo aqui no site você pode vir aqui em mídias biblioteca pegar aqui a sua logo e redimensionar se você tiver várias Logos se você tiver pegando aqui uma imagem que você entra aqui em mídia tem várias delas você não sabe qual que realmente você usou no site é legal você vir aqui pelo elemento e pegar o nome da da imagem por exemplo esse daqui foi feito no menu passei o mouse em cima de um elementor cliquei no menu principal vou clicar aqui em cima do Idiot de l clicar em t

logo clico aqui em cima da imagem e aqui ela me mostra ó título da imagem aí eu posso copiar esse título vir aqui na biblioteca jogar o título aqui que eu acho exatamente a imagem tá lembrando Só se você tiver várias imagens da mesma porque as vezes a gente vai fazendo testando né os tamanhos e deixa aqui sem excluir mas se você tiver apenas um vai ser fácil de achar aqui você já redimensiona ó clica em cima dela editar a imagem redimensionar E aí aqui você vai mudar para 262 de largura a altura ela já

configura automaticamente aí você clica em redimensionar recarrega a página não tem mais a ligação da logo aqui aí eu vou clicar aqui agora está me levando para essa imagem ela tá 1080 pediu para redimensionar para 550 então a mesma coisa eu vou vir aqui nessa editar redimensionar e vou mudar para 550 pronto aí vai ter algumas imagens que a a gente não vai poder redimensionar do jeito que está pedindo aqui olha agora eu vou clicar nessa e perceba que o que tá piscando aqui é a logo do Google Então esse é um plugin de comentários

do Google como ele puxa recursos lá do próprio Google não tem como a gente mexer nisso daqui então a gente vai ter que ignorar essa parte ó todos esses aqui que tiver pegando as imagens do Google a gente vai ter que deixar E aí agora tá começando a mostrar as outras imagens do site aqui está mostrando as imagens do blog as imagens do blog a gente tem que tomar cuidado porque aqui tá pedindo pra gente redimensionar para 369 que é o tamanho que aparece aqui no card do do blog né mas aqui dentro da página

a imagem ela é mostrada um tamanho um pouco maior Então se a gente redimensionar para ela ficar muito pequena ela vai ficar muito pequeno aqui na página tá então assim nessas do tamanho do blog O legal é você colocar pelo menos uns 550 de largura que aí fica um tamanho legal a imagem não fica tão grande e aqui na página individual do post ela também não vai ficar tão grande tá porque se a gente colocar do tamanho adequado que eles pedem aqui também fica muito embaçado Então pelo menos essas aqui a gente vai ter que

sacrificar Então vamos vir aqui nas imagens ó e vamos redimensionar até porque pessoal tem muita gente que vai lá pega imagem do freep que a imagem tá gigante como por exemplo esse daqui mesmo da menopausa vou aqui a especialidade que eu peguei a imagem dela estava bem grande então a gente precisa redimensionar as imagens para elas não ficarem pesando muito poar um tamanho muito grande é só clicar editar a imagem vem aqui e redimensiona eu vou redimensionar só essas três que estão aparecendo ali mesmo na página home elas até pararam de serem mostradas aqui vou

recarregar mais uma vez às vezes pessoal como o site tem por exemplo que nem a gente configurou efeito de movimento e a gente recarrega a página as imagens não aparecem a gente tem que carregar assim o site para cima e para baixo para ela aparecer pro Smash conseguir puxar tá então Ó essas aqui são as do Google a gente não pode fazer nada então a questão das imagens aqui a gente já já fez o Legal seria se você tiver várias páginas no site tiver usando imagens diferentes das que estão aqui na home você ir lá

nessas páginas e colocar elas no tamanho adequado também tá eu como tenho só essa página aqui e as outras páginas como por exemplo essa de sobre mim tá puxando as mesmas imagens eu não preciso redimensionar porque essa daqui já tá puxando aquela lá pronto o SM não pega as imagens que são definidas como plano de fundo como por exemplo essa imagem de banner Então essa daqui você mesmo tem que fazer manual você tem que saber o tamanho certo e o tamanho certo de uma imagem que pega a extensão da tela toda no computador é 1920

de largura e de altura 650 A não ser que você vai fazer uma sessão dupla Por exemplo essa parte essa parte aqui que vai usar a mesma imagem aí você duplica o valor aqui do tamanho de de altura Tá mas geralmente 650 fica ótimo Então nesse caso aqui se a imagem não tiver com uma proporção legal se na hora que você vier aqui para redimensionar ela nessa daqui por exemplo ó se eu for redimensionar ela para 1920 não vai dar então o que que você tem que fazer você tem que vir aqui no canva por

exemplo e redimensionar ela por aqui clica aqui em criar um novo design tamanho personalizado aí você escolhe 1920 por 650 você pode digitar lá os tamanhos Tá eu já tinha predefinido por isso que ficou aí você arrasta sua imagem para cá e baixa ó por exemplo se fosse essa imagem aqui né você clica na imagem definir imagem com plano de fundo pode clicar duas vezes nela para você ajustar E aí você vem clica em compartilhar e clica em baixar Ok a mesma coisa com essas imagens aqui ó que são as imagens do Carrossel elas eu

configurei para elas ficarem por 400 de largura e 500 de altura só que elas não TM esse tamanho cada uma tem um tamanho diferente olha só ó essa aqui é maior Essa é mais estreita então eu configurei aqui no próprio Carrossel para elas ficarem com o mesmo tamanho mas aí ele precisou gerar um código para isso olha eu tô aqui no editor do elementor E aí você vai ver ó tá configurado para 400 por 500 Então para que isso não precisa acontecer você pode vir aqui no canva e já configurar as imagens nesse tamanho de

400 por 500 Criar novo design tamanho personalizado 400 de largura por 500 de altura Criar novo design e aí você baixa todas as imagens que você tá usando ó você clica clica em salvar clica na outra clica em salvar aí você vem no canva arrasta a imagem para cá duplica a página arrasta a outra imagem para cá duplica a página arrasta outra imagem para cá E aí você vai fazer assim Clica com o botão direito clica em definir imagem como plan de fundo aí se você quiser arrastar para um lado para outro aqui aumentar diminuir

você consegue organizar dessa forma depois você clica em compartilhar baixar e baixar aí quando você baixar você vai baixar uma pasta zipada quando a gente baixa várias de uma vez baixa uma pasta zipada e aí você clica em cima dela clica em extrair tudo extrair e as imagens estão todas aqui aí é bom que você renome pra imagem não ficar desse jeito só escrito 1 2 3 4 5 que é ruim pro so você pode selecionar todos de uma vez Clica com o botão direito renomear Aí você coloca o nome do seu site por exemplo

aqui no caso colocar clínica drout Antônio Carvalho e dá enter que ele já renomeia todos aí beleza né você vem fez isso aí você pode vir aqui no site e excluir essas que você não vai usar mais para não ficar dando conflito ó clica em seleção em massa seleciona todas elas clica em excluir permanentemente Ok vem aqui no elementor clica aqui em excluir a galeria clica em limpar clica no mais e aí Aqui você faz o upload dessas imagens dessas novas imagens que estão com tamanho correto ó clica aqui em criar nova galeria inserir galeria

aí você percebe que se você tiver configurado um tamanho aqui que nem eu elas vão ficar embaçadas aí você não precisa mais disso aqui como elas já estão no tamanho certo você muda aqui de personalizado para completo que aí elas vão pegar o tamanho certinho aqui da imagem aí você pode clicar em atualizar Prontinho outra coisa que eu coloquei aqui também evitar requisições externas como mapas e vídeos o que que são requisições externas são coisas que precisam ser buscadas fora do site por exemplo esses comentários do Google eles não são de dentro do site a

gente configura um plugin que vai lá no Google no Google Maps e traz essas informações para cá Isso é uma requisição externa a mesma coisa com o mapa tá aqui no caso dos comentários não tem o que a gente fazer mas no caso do mapa dá pra gente contornar porque ele está buscando o mapa Lá no Google Maps então o que que a gente pode fazer a gente pode tirar um print do mapa em vez de deixar o o widget mesmo de mapa do elementor ó que nem eu coloquei aqui em vez de deixar o

idet de mapa a gente deixa uma imagem só então você vem aqui tira um print ó se você tiver o Windows por exemplo você pode vir aqui pesquisar pela ferramenta de captura clica aqui em novo aí você tira um print só dessa partezinha salva no seu computador já salvei ele aqui e aí você vem aqui na biblioteca arrasta o edit de imagem para cá clica aqui exclui o mapa e coloca a imagem que você fez pronto aí você pega o endereço vai lá no Google Maps ó seleciona aqui o endereço aí você copia aqui no

navegador o link aí aqui eu vou colocar nesse lugarzinho aqui também que está clica aqui na engrenagem ó abrir uma nova janela adicionar no flow e coloca na imagem também link URL personalizado Cola clica na engrenagem abre uma nova janela adicionar no flow e aqui em resolução da imagem deixa completo e clique em atualizar pronto você não vai ter mais o mapa fazendo requisição externa e da mesma forma vai ter um mapinha aqui e se a pessoa clicar ela ainda é redirecionada pro aplicativo do Maps né então ficou perfeito aqui a funcionalidade se for vídeo

no caso de vídeo que que a gente faz ó que aqui no caso de vídeo ele vai puxar a foto de capa ou ou então frame do YouTube para isso não acontecer você vem aqui em sobreposição de imagem clica em sobreposição e coloca uma imagem de capa porque aí ele vai carregar o site com a imagem que é dentro do site ele não precisa pesquisar al uma coisa fora e aí ele vai precisar buscar isso daqui buscar o vídeo só quando você clicar Mas aí o site já vai ter carregado não vai interferir no carregamento

dele tá então faça isso também quando você tiver um vídeo no seu site fizemos tudo isso vamos recarregar aqui no Lite Speed pra gente ver se já alterou a nossa nota ó aqui no mobile ainda continua basicamente do mesmo jeito e no desktop está 81 OK agora nós vamos para o terceiro passo que é ativar os recursos de otimização do elementor com as novas versões do elementor já vem Praticamente tudo ativa Mas se você tiver desativado as suas você vem em confere vem aqui em mentor configurações recursos e aqui sempre vai ter ó quando for

de desempenho tem escrito desempenho então por exemplo qu dos elementos que é muito importante você deixa n ativo aí você ativa salva as alterações vem aqui no seu site e acessa para ver se não deu nenhum bug tá se não entrou em conflito com alguma coisa se tiver OK aí você ativa outros também que ainda não estejam ó sempre que tá verdinho assim está ativo Então se já tiver tudo verdinho aqui nos desempenhos você pode deixar aí se não tiver você ativa aqui também em desempenho Já tem alguns recursos aqui em avançado também tem ó

carregamento de fonte inclusive uma dica boa se você tiver com algum ícone do seu site que tá quebrado que tá só um quadradinho você vem aqui em avançado no elementor de configurações e ativa aqui ó carregar supor ao fonte Alem Aí você coloca em sim e clica em alterar que aí ele vai carregar o suporte aos ícones e vai parar de dar esse bug tá então beleza você ativa os recursos do elemento se o seu não tiver ativo e vamos voltar aqui pro passo dois que é pra gente configurar as imagens como webp então a

gente vai vir aqui dentro do painel vai vir em plugins adicionar plugin vai pesquisar pelo plugin webp Express É Este plugin aqui você vai instalar depois em ativar Prontinho estando aqui em plugins plugins instalados Você vai vir em webp Express vai clicar em settings que é para ir pras configurações aí aqui é bem tranquilo a gente vai ativar essa opção aqui que é converter as imagens no upload E aí dessa forma Toda vez que você adicionar uma nova imagem já vai converter para webp vamos ativar aqui ó para ele fazer as configurações do código para

ele mudar de formato de imagem comum para webp E aí a gente vai salvar as config configurações ó save settings aqui em cima e agora a gente vai converter todas as imagens o webp é um formato de imagem mais leve que carrega mais fácil e mais rápido por isso que quando a gente configura o nosso site para ele entregar as imagens é webp o site melhor a nota e fica mais rápido e é legal até hoje a gente colocar um plugin para converter Porque apesar de WordPress suportar essa imagem e alguns navegadores suportarem vai ter

alguns navegadores e alguns e cursos que não vão suportar essas imagens e quando a pessoa acessar no no navegador que não suporta aí ele entrega a imagem original aí o site não fica quebrado em nenhum tipo de navegador entendeu Então olha só você vai vir aqui e vai clicar em book convert que é para fazer conversão em massa vai clicar em start conversion que é para iniciar a conversão ele vai ficar um tempo ó ele vai pescar todas as imagens que você tem no site até as imagens internas do WordPress miniatura e tudo e vai

convertê-las todas em webp aí leva alguns minutos mesmo quanto mais imagens você tiver no site mais ele demora aí depois aqui no final aparece que tá concluído olha ele fica aparecendo assim aí você pode fechar E aí agora muito importante preste atenção você tem que clicar em salvar configurações e forçar novo Htaccess Htaccess é um arquivo muito importante do WordPress você clica que ele vai reescrever o código lá nesse Htaccess Pronto agora a gente pode voltar aqui no nosso Lite Speed testar dá uma testad aqui no site também tá para ver se deu algum problema

ó se você clicar com o botão direito em alguma imagem e Abrir imagem uma nova janela você já vai ver que ela vai estar carregando com webp olha pessoal depois que a gente faz a alteração do tamanho da imagem aqui da logo às vezes a logo fica embaçada Mas isso é porque a gente configurou o espaçamento dela então você pode vir aqui no seu menu e também no roda P você tiver feito isso porque como a gente coloca a imagem grande aí pra gente ajustar do tamanho que a gente quer Às vezes a gente vem

aqui em largura né E aí mexe nela e aí por conta disso ela fica meio embaçada mas aí não precisa mais fazer isso você pode deixar ela 100% para ela pegar o tamanho original tá então se a sua tiver embaçada é só você vir e colocar tamanho 100% salvar limpar o cach aqui aí você clica aqui novamente analisar vamos ver você vai ver a diferença que vai dar só de colocar imagens para ficarem mais leves Olha já subiu para 80 aqui no mobile e no computador foi para 96 falei para vocês pessoal as imagens são

as coisas que mais deixam o site lento Então a gente tem que tomar muito cuidado tá claro né a rosinger também contribuiu bastante por isso que já tá nessa nota aqui quase máxima e às vezes demora um pouquinho para poder surgir esse Impacto aqui no Lite Speed tá então se você carregou aqui não ainda não sofreu nenhuma mudança espera um pouquinho até terminar de renderizar e depois você testa novamente ok beleza agora nós vamos para o quarto passo que é configurar o plugin De Cache e assim eu coloquei até de vermelho aqui e grande para

que você preste atenção nessa parte a gente vai ativar várias funções do l speit e cada função que a gente Ativar Você vai testar no seu site você vai vir aqui ativar a função do Lite Speed e vai recarregar o site e ver se não bugou vai olhar num guia anônima e ver se não bugou por pessoal nos outros vídeos que eu fiz muita gente conseguiu otimizar o site ficou ótimo incrível mas muita gente também reclamava lá nos comentários que o site estava bugado E aí falava ah Estragou meu site que que eu vou fazer

agora sendo que uma das primeiras coisas que eu falava no vídeo é faça um backup se o seu site deu algum problema que não dá para resolver sempre dá mas se não der para resolver você volta pra versão anterior e outra coisa só buga porque você não testa porque se você for lá ativar uma função e testar Você sabe que exatamente aquela função lá deu bug no site então é só deixar ela em específico desativada se você ativar todas de uma vez não tem como você saber qual função que deu algum problema no site você

tem que voltar desativando uma por uma das funções para testar muito mais vantagem você testar agora no início do que perder tempo antes de estressar tá Então siga as minhas orientações vamos lá vamos vir aqui em plins Adicionar novo vamos pesquisar o Lite speed Lite Speed Cache é um plugin De Cache performance que vai fazer algumas configurações essas aqui por exemplo a maioria dessas aqui que está acusando no Google então ele já vai fazer todas as suas configurações reduzir CSS e reduzir o tamanho do dono também porque ele comprime o código então ele mesmo já

faz isso daqui pra gente que é esse plugin aqui ó é o Lite Speed cche Você vai clicar em instalar e depois em ativar pronto assim que você instala ele já abre essa abinha aqui e também já abre essa abinha Você pode passar o mouse aqui e clicar em configurações pra gente ir aqui pros recursos dele uma coisa aqui antes da gente D sequência na configuração do Lite Speed pessoal agora que a gente já fez as configurações de otimização de imagem né E a gente vai começar a otimizar o Lite Speed Pode ser que a

partir daqui dê uns bugs e aí você precise retornar o backup pro site como estava antes PR você não perder todo esse trabalho que a gente já fez da otimização das imagens faz um novo backup baixa aquele outro que foi o backup inicial no seu computador então ele já tá aqui WP vived né Você vai clicar aqui ó ele já tá aqui você pode clicar em download e clica em download de novo que vai ser feito o download do arquivo pro seu computador então você deixa salvo esse antigo antes da gente mexer em qualquer coisa

e depois você faz um novo com essas configurações que a gente já fez que aí dessa forma você fica mais resguardado ainda se você precisar voltar você não precisa fazer o trabalho tudo de novo ó Então vem aqui em backup clica aqui em backup Now ele vai gerar vai carregar aqui a Barrinha para gerar um novo arquivo pronto aí quando finaliza ele já fica aqui tá vendo aí você pode fazer o download dele ou então na hora que você quiser se você precisar restaurar é só clicar aqui em restaurar mas eu indico que você Clique

e faça o backup também para você ter ele salvo no seu computador Ok beleza fizemos aqui o nosso backup agora a gente vai vir aqui em plugins plugins instalados vamos desativar o plugin Smash Porque a gente já usou a configuração dele que a gente quer então se você não tiver desinstalado ele ainda ó desinstala e clique em excluir para ele não dar conflito ali com o Lite Speed também Ok vamos vir aqui em Lite Speed Ó tem duas maneiras de você chegar até lá tem aqui que você consegue limpar o Cache sempre que você precisar

ó limpar o Cache passa o mouse clica em limpar tudo ou então passa o mouse clica em configurações e tem a abinha dele aqui também você passa o mouse e abre aqui o painelzinho é que tem mais funções tá então a gente vai vir aqui em Lite Speed cche as opções aqui acima você não precisa mexer não tá vamos começar aqui pelo cche geralmente ele já vem com as opções ativas se ele não tiver ativo essas de cima que você ativa clica em ativar Cache dispositivos móveis e clica aqui em salvar sempre que você ativar

algumas coisas você vem passa o mouse aqui em cima clica em em limpar tudo e vem aqui e testa no site para ver se não deu nenhum problema vai e testa na guia anônima também tá aqui n itl não precisa mexer em nada aqui em limpar também não precisa mexer em nada nem exclusões aqui também aqui em objeto a gente vai ativar Cache de objeto esses aqui já estão a gente vai clicar em salvar alterações aqui em navegador você pode ativar o Cache do navegador clica em salvar e aqui em avançado também não precisa ativar

nada tá então depois de tudo isso aqui ativo você vai passar o mouse limpar tudo vir aqui e testar se o site tiver tudo ok Você continua vamos pra parte agora de otimização de página olha aqui começa a dar problema se for para dar algum bug são essas configurações aqui que geralmente dão problema im ficar combinar tanto aqui no CSS quanto aqui na parte dejs tá então já fica esperto ativa uma por uma salva limpa testa testa todas as páginas Às vezes aqui tá ok mas aí você entra aqui na página de blog e deu

algum bugzinho tá como por exemplo ó tá vendo aqui a gente Ativar essas configurações deu um bugzinho aqui no meu rodapé olha só aqui na página inicial como ele é e aqui na página de blog Ó aqui tá um abaixo do outro quando acontece isso aqui ó se der algum bugzinho só no rodapé ou só no menu em vez de desativar as coisas você pode fazer o elementor meio que pegar no tranco Aqui você passa Mouse por exemplo aqui em cima do elementor vem no roda pé que geralmente tá com esse bug fora do editor

do elementor mas dentro tá configurado certinho então você pode fazer ó vem aqui nem alguma coisa numa imagem no texto altera alguma coisa só para poder aparecer atualizar ó que nem eu diminuí aumentei o tamanho aqui do texto clica em atualizar que aí se você recarregar voltar aqui pra página de blog ele vai ter se ajustado certinho então se tiver dado um problema no menu no rodapé ou em alguma partezinha do site faz esse teste que às vezes só fazendo isso ele já retorna sem você precisar desativar as coisas outra coisa também você percebeu que

dá esse bugzinho aqui ó do elementor esse bug aqui do elementor às vezes ele acontece mesmo que a gente não esteja otimizando Então o que a gente pode fazer para não aparecer essa configuração feia a gente pode colocar um atraso ó a gente vem aqui por exemplo aqui na página do do blog passei o mouse aqui em cima de modelo de blog cliquei em cima pode fazer isso na página inicial também se você tiver o blog lá e tiver acontecendo isso aí você clica aqui vem avançado efeit de movimento F in coloca lento e clica

em atualizar que aí olha só quando a gente carregar a página ele vai demorar para aparecer vai aparecer gradualmente e aí esse tempo que ele demora já é o tempo do bug então a gente não vê o bug fica bonitinho na página tá então faça isso ok vamos começar aqui então eu vou ativar esses daqui porque eu já sei já testei já fiz essa otimização outra vez e eu já sei sei que todos os que eu vou ativar aqui dá certo no site Ok no seu você vai ativar um por um vai testar porque se

você fizer que nem eu tô fazendo aqui você ativa tudo aí na hora que você vai testar deu bug você não sabe qual que deu aí você tem que vir e desativar um por um Então faça primeiro ok então aqui eu não vou deixar ativo só esse aqui de gerar o CSS e esse aqui de carregar CSS de forma assíncrona inclusive eles dois até tem um aviso né Falando que pode dar erro e pedindo para colocar chave de Dom então eles a gente vai deixar desativada aqui no meu eu vou clicar em ativar nos outros

e esse último aqui também a gente deixa padrão não coloca aqui em Swap não tá E aí eu vou clicar em salvar as alterações no seu você também não ativa esses tá ó gerar o c ss e carregar CSS de forma assíncrona Deixa desativados aí depois você vem limpa vem aqui também se quiser limpar de novo e recarrega a página para você ver se não deu bug em nada Pronto agora vamos fazer as configurações de JS aqui a gente vai Ativar todos e vamos deixar em atraso tá o carregamento do JS de forma atrasada você

pode testar aí no seu porque esse daqui é essa configuração do do atraso do JS Pode ser que fique melhor no seu no adiado Pode ser que fique melhor no atrasado pode ser Que bug aí tem que ficar desativado o que que acontece aqui no meu site aqui do template ele também tá ativo e aí aí você percebe que olha só tá vendo na hora que eu interajo com a tela que ele começa a aparecer os produtos eu fiz isso propositalmente para poder carregar mais rápido aí dessa forma o site carrega mais rápido mas aí

na hora que há interação com a tela que aparece aqui os os produtos então se você não quiser que apareça dessa forma você pode deixar desativado também só que vai contribuir para deixar um pouquinho mais lento eu vou clicar aqui em salvar alterações ó recarregar limpar e às vezes aqui no editor a gente não consegue ver mas se a gente acessar na guia anônima a gente consegue perceber ó tá vendo tá vendo que carregou a imagem o texto demorou para carregar pronto tudo certinho agora vamos aqui pras configurações de html aqui no HTML Eu também

testei eu vou deixar todos ativos só remover fontes do Google que eu vou deixar desativado mas os outros eu vou deixar ativado e a eu vou clicar aqui em salvar mais uma vez pessoal interando ó até o próprio Lite Speed tá falando teste minuciosamente e limpe qualquer opção depois que você for mexer limpa tudo e testa tá então vai ativando testa não adianta você comentar aqui Falando Ah quebrou meu site quebrou mesmo porque você não testou Então você tem que ativar limpar e testar se eu ativei esse daqui limpei lá e vi que deu bug

é só voltar e colocar de desativado se mesmo assim não funcionou volta o backup para aquele arquivo lá que a gente baixou antes de começar otimizar e pronto começa de novo ó site continua Ok beleza agora aqui nas configurações de mídia a gente vai ativar tudo menos essa aqui do lq ó essa daqui a gente vai deixar desativado porque ela é outra função que a gente não tem e vamos ativar o restante e vamos clicar em salvar novamente testa a no seu uma por uma aí limpa tudo e vem aqui e recarrega aqui no vpi

a gente vai deixar imagens viewer Point ativadas vamos clicar em salvar exclusão de mídia aqui não não precisa colocar nada localização aqui também não precisa esse daqui é mais para quem tem site de área de membros tá vendo que ele vai fazer configuração de atraso de Cache de Gravatar que é as imagenzinha aqui da da pessoa então não precisa ativar ele não se você não tiver um site que tem área de membros tá aqui nem ajustes também a gente não precisa mexer em nada e aqui também não então todas essas partes aqui já estão configuradas

limpar tudo aqui mais uma vez e aí agora vamos aqui pra parte de otimização de imagens Vamos ir aqui em configuração e otimização aqui a gente vai ativar todas as opções menos essa aqui de remover backup original Então vamos deixar tudo ativo e clicar em salvar alterações Lembrando que eu tô deixando tudo ativa aqui no meu testei no meu e deu certo no seu você vai testando aí tá aí você vem limpa e confere e lembra de conferir na guia anônima também às vezes quando você acabou de limpar o cach e fazer uma configuração Quando

você vai acessar aqui a primeira vez na guia anônima Ele demora um pouquinho para carregar mesmo mas aí se você for acessar mais uma vez a ele já carregou mais rápido tá vendo que nem agora carregou bem rapidinho e aí por último vamos vir aqui na parte de por último não né falta mais um passo vamos vir aqui em banco de dados gerenciar vamos limpar o nosso banco de dados vamos vir aqui por último em caixa de ferramentas vamos vir aqui em Herbet vamos Ativar todos e salvar e passar o mouse aqui em cima e

limpar Pronto agora vamos voltar aqui no page Speed pra gente testar novamente Como que está o nosso site agora não se esqueça de limpar o Cache para ele pegar as novas atualizações e às vezes mesmo a gente limpando demora um pouquinho para ele processar no banco de dados sabe por isso que eu limpo várias vezes às vezes é bom também você dar um tempinho sai vai tomar um café fazer alguma coisa e depois você volta e testa aqui realmente como tá porque às vezes a gente limpa testa aqui tá tudo bem aí na hora que

a gente acessa de novo o site tá tá quebrado tá com alguma coisa bugadinha então compensa você ir lá dá uma pausinha e depois testar na novamente tá principalmente naquelas configurações de mim ficar as coisas ó aqui no celular tá 73 e no computador tá 94 no computador já tá ótimo né e no celular daria pra gente dar uma melhorada você também pode testar algumas vezes porque ele vai oscilando tá então às vezes você testa tá dando um resultado testa dá outro outra coisa aqui que a gente pode fazer para poder melhorar no celular é

vir aqui no editor do elementor colocar em modo de de celular vir aqui por exemplo neste banner que os banners que são assim ó que as imagens ficam no fundo da tela às vezes é mais difícil dele pegar a imagem em webp então você pode vir aqui seleciona outra imagem só para salvar e depois pega e seleciona a original e clica em atualizar aqui também como a gente tinha mudado o tamanho dessa imagem pelo menos aqui no meu né Às vezes a gente coloca imagem grande na hora que a gente vai criar o site e

a gente precisa mexer aqui em largura para ficar do tamanho que a gente quer aí como a gente colocou aqui no tamanho certo a gente não precisa mais colocar uma largura aqui a gente pode deixar 100% porque já tá no tamanho que é para ficar né E aqui também ó nesse de Carrossel a gente pode vir pode colocar tamanho personalizado 400 por 500 e colocar em aplicar para ele não ficar com ausência de tamanho vamos limpar e analisar novamente Olha já deu uma melhorada mais aqui no mobile computador continua ótimo né excelente e aqui pessoal

entra o seguinte uma outra coisa que pesa demais no site também é ter requisições externas né Já falei para vocês que aqui o mapinha a gente tirou colocou só um print e a mesma forma é esses comentários que vem aqui do Google que ele vai lá e busca no Google Maps então demora um pouco para renderizar e faz com que o site fique pesado eu vou tirar ele daqui pra gente poder ver a diferença que faria se a gente não tivesse esses comentários que daí você pode avaliar porque por exemplo você pode vir aqui tirar

um print das avaliações e fazer um Carrossel de imagem mesmo pode até tirar um print desse negocinho do Google aqui e aí linkar né cada uma das imagens de comentário lá pros comentários do seu Google Maps vez de ar direto Isso pode diminui a velocidade do site isso pode fazer com que o site fique um pouco mais leve carregar ó aqui na São Vou atualizar e vou limpar tudo pronto não tá mais aqui os comentários e vou retestar Olha só dá muita diferença requisições externas levam muito tempo para carregar então você pode avaliar isso se

o seu cliente quiser muito que seja puxado automaticamente as as avaliações do Google aí você deixa e sacrifica um pouquinho no carregamento ou então você faz um um Carrossel com os prints que aí isso por si só já vai fazer o site melhorar bastante a nota Apesar de que mesmo que ele esteja com esses comentários do Google acessando o site você vai conseguir ver que a velocidade percebida que é essa velocidade aqui de quando a gente acessa não tá ruim não tá muito rápido mesmo com quando tava com os comentários aqui tá bom então não

fica bitolado em ter a nota 100 porque não precisa precisa est aceitável do Amarelo aqui para cima do verde tá então de 85 para cima aqui no celular já tá bom E aqui no desktop no verdinho tá ótimo ok então fica assim agora nós vamos para nosso passo cinco que é ativar o CDN da Hostinger CDN é uma Furação que faz com que o seu site fique salvo cópias do seu site que são enviadas para vários servidores E aí quando a pessoa está próxima de um desses servidores Em vez dele buscar no servidor principal ele

busca essa cópia do seu site nesse servidor que tá mais próximo então isso faz com que o site carregue mais rápido na rosinger naquele plano que eu falei para vocês ele já tem o CDN incluso não são todos os planos que tem tá é a partir do plano Business por isso que vale a pena você pegar um bom plano de hospedagem aí você vai acessar a sua hospedagem rosing vai vir aqui em sites vai pesquisar pelo site ó Dr Antônio vai clicar aqui em painel de controle vai pesquisar aqui na lupinha por CDN vai clicar

em CDN vai clicar aqui em habilitar Ah tá aqui no meu ele tá no plano Premium então ele também não tem o CDN mas eu tenho outro aqui que eu tava fazendo antes que está eu vou mostrar para vocês que é esse daqui ó Olha tá vendo aí vai aparecer aqui para você Você vai conseguir clicar em habilitar E aí você vai clicar nessa setinha para você ir lá pras configurações da CDN E aí aqui em otimização de imagens ele vai vir ativo esse negócio da imagem webp Mas você ó ele vai vir assim mas

você vai desativar e também vai desativar essa opção aqui ó que vem aparecendo porque senão ela deixa a imagem muito embaçada comprime demais a imagem deixa muito embaçada e esses daqui vão vir desativados e você vai clicar em cima deles para eles serem ativados o restante você pode deixar como está CDN demora um pouquinho para surgir efeito aqui no site tá mas você vai ver que o site vai carregar com uma nota melhor a partir do momento que você ativar o CDN também o passo seis que eu coloquei aqui é limpar testar novamente no page

Speed na guia anônima e também pessoal ó fazer o backup do site tá então não se esqueça de testar tudo nós finalizamos aqui este site com nota 96 no celular e no computador nota 98 Então pegamos quase nota máxima aqui no nosso site depois eu vou trazer um outro vídeo aqui ensinando a otimizar um site maior que é uma loja aí a gente vai usar o plugin WP Rocket tá se você teve alguma dúvida me conta aqui nos comentários, me conta aqui se deu certo para você também, se você curtiu deixa um like no vídeo,

se inscreve no cana, me segue nas redes, um abraço, até a próxima, tchau.