O PASSO A PASSO PARA OTIMIZAR SEU SITE WORDPRESS DO ZERO EM 2023

o passo a passo para você otimizar o seu site WordPress em 2023 se você tem um site simples uma página de captura uma loja uma página de vendas o que for você precisa ter um site rápido você precisa ter um site que abrem menos de 2 segundos bom e é isso que eu vou te ensinar hoje nesse vídeo você vai terminar de assistir esse vídeo você já vai ver o resultado dentro das suas páginas ainda hoje E aí galera tudo bom meu nome é Thales Avelar sou criadora aqui do canal do WP descomplicado desenvolvedor de sites há mais de dez anos especialista em WordPress entre muitas outras coisas Engenheiro músico noivo é o Rodrigo Hilbert aí do WordPress só faltou né ser bonito bom e antes da gente começar a otimizar o seu site eu preciso te explicar por que que você tem que fazer isso segundo uma pesquisa do Google do ano passado sites que demoram mais de 2 segundos para eles poderem carregar completamente eles perdem até 5% de conversão imagina o seguinte você vai vai num restaurante senta na mesa e fica esperando o garçom te trazer o cardápio do Restaurante que que você vai fazer se ninguém te trazer nada ou você vai levantar a mão porque você já tá no restaurante ou simplesmente você vai pensar cara não pô seu atendimento tá assim imagina comida não vou ficar aqui levanta e vai embora e é exatamente isso que acontece com o seu site você tá lá rodando seus anúncios as suas campanhas e a pessoa Poxa você só anúncio interessante cliquei lá sua página não carregou e aí que que acontece Você tem muitos cliques no anúncio porém poucas visualizações na sua página Ou seja pessoas que de fato visualizaram a sua página ou seja em outras palavras você tá queimando jogando dinheiro no ralo Mas é isso que a gente vai resolver hoje eu vou te ensinar né através da otimização que é possível sim aumentar essa taxa né ou seja quanto mais rápido o seu se for né menos tempo ele demorar para abrir mais pessoas vão visualizar a página de destino Ou seja você vai aumentar a taxa das pessoas que clicam no seu anúncio né ou que clicam no link e de fato vem a sua página isso nós chamamos de Connect ou taxa de conexão então hoje aí você vai conseguir aumentar esse conect rate para um 70 a 80% que já é muito maior do que a maioria dos players aí no mercado sem mais enrolação já vamos aprender agora antes disso só peço deixe seu like curte esse vídeo compartilha com aquele seu amigo com aquela pessoa que está precisando e se inscreve no canal ativa o Sininho Porque toda terça e quinta tem um vídeo novo exclusivo aqui no canal de coisas que você pagaria cursos para as pessoas te ensinarem a minha ideia aqui no canal é trazer coisas né que eu desenvolvi longo dos meus anos e que as pessoas cobram 300 400 por assunto para poder te ensinar vai ter coisa que a pessoa vai pagar r$ 2000 uma mentoria e eu vou te ensinar de graça meu intuito é ajudar você e poder transmitir o máximo de conhecimento possível então agora a gente vai aprender a otimizar o site aqui na tela do computador e fica até o final que se você tem o Pixel né do Facebook instalado no seu site até mesmo alguma coisa do Google e você utiliza isso no seu site eu vou te ensinar a disparar isso de uma forma mais rápida então fica comigo aqui até o final para você aprender a fazer isso da forma correta bom sem enrolação Estamos aqui na tela vamos lá vamos começar é só seguir o meu passo a passo que não tem erro beleza bom aqui a página que a gente vai utilizar essa daqui ó Amanda Ferreira master. com/caminho Recomeço Isso aqui é uma cliente que eu tenho tá E ela Essa parte a gente captura foi feita por uma outra pessoa e ela precisa apenas fazer essa otimização tá isso aqui é uma página simples de elemento só que ela tem bastante imagens tá isso aqui é uma imagem Isso aqui é uma imagem fundo tem uma imagem aqui é texto mas aqui também se torna uma imagem O que que você vai fazer a primeira coisa a gente tem que diagnosticar o seu site aqui embaixo na descrição pessoal todos os plugins links códigos que eu for utilizar vão estar no arquivo aqui do Google Drve disponível gratuitamente para você mesmo que os plugins são pagos eu tô te dando uma cópia e GPL para você poder estar utilizando tá bom bom primeiro site que a gente vai a gente vai trabalhar com dois sites aqui primeiro é o GT Matrix que vai medir o tempo de carreira muito do seu site O que que você vai fazer você vem aqui no GT Matrix vai estar aqui embaixo o link você coloca URL aqui copia e cola o RL da sua página Eu recomendo você fazer uma conta gratuita não tem problema nenhum e aqui em opções de análise Eu sempre gosto de colocar São Paulo Brasil por quê Porque os meus clientes estão aqui em São Paulo se você tem clientes fora do Brasil deixa aí sempre no servidor mais perto da onde você onde seus clientes vão acessar em paralelo você vem aqui no Google page Speed também vai estar o link aqui embaixo cola o link aqui e clique em analisar e bom você deve ter mais ou menos uma situação hoje no seu site assim uma nota 30 uma nota 50 mobiles aqui em computador eu tenho uma nota 93 tá bom para caramba sim a nota tá excelente só que pessoal 98% dos usuários que clicam em anúncio que realizam compras São através do celulares são dados do Facebook tá então a gente tem que focar aqui no celular aqui no gtmix olha Olha que interessante cara eu tô com nota a pô 88 estrutura 99 de performance só que pessoal esqueçam as notas primeira coisa esqueçam as notas Vamos focar aqui em coisas importantes nós vamos analisar uma coisa no peixe Speed e três coisas no gtmétricos Tá vamos começar aqui pelo gtmétrico Você nota tá boa nota tá tranquila que que a gente vai analisar a primeira coisa nessa linha do tempo aqui a gente vai vir aqui em ttfb que que é isso é o tempo que o servidor tá atrasando o teu site Como que você resolve isso a gente vai aprender a resolver isso hoje no lado do WordPress mas isso aqui ele te mostra que você precisa ter um servidor melhor tá então se você tem hostgator rochingger local web cara esse servidores são todos horríveis tá não seus servidores vão Ah tá eles estão falando mal da empresa não geralmente pessoal eles falam assim ah contrata um plano M contrata um P né não compensa porque o que você tem de recursos é muito pouco então isso vai acabar atrasando o teu site Então qual que é o ideal pessoal primeira coisa já é uma dica já anota aí ter um servidor no Brasil qual que é o problema de ter um servidor no Brasil geralmente são mais caros tá mas tem uma indicação tá aqui embaixo o link também mas eu vou abrir para vocês aqui que é a hospedagem que eu coloco todos os meus projetos desde pequeno até o maior que eu tiver cara Custa apenas 29,90 por mês é uma hospedagem voltada para WordPress otimizada Tem suporte no WhatsApp e o melhor de tudo é que eu não tô ganhando um centavo para fazer mechas deles mas eu tô divulgando porque eu sei que o produto é bom eu confio nessa hospedagem né a gente acabou se tornando aí uma parceiro de longa data então assim a hospedagem dos caras é diferenciada eu tenho certeza disso tá esse site aqui ele tá nessa hospedagem só que ele tá aqui atrasando isso aqui porque eu ainda não fiz as otimizações tá se você tiver na hostgator com certeza isso aqui vai estar muito grande primeira coisa que você vai olhar ttfb a segunda coisa é esse full the time que é o tempo total de carregamento da sua página aqui precisa estar em menos de 2 segundos se você já tem um servidor bom igual aqui ao meu caso ele já vai estar ali próximo dos dois segundos agora esse site ele tava na hostgator cara ele tava tendo tipo tava demorando seis segundos para poder abrir Então tenha um servidor bom não precisa ser necessariamente era root Mas eu tô te dando uma indicação do que é o melhor para você tá bom Aqui pessoal fundo de time 2. 8 segundos precisamos reduzir isso aqui para menos 2 segundos Esse é o segundo ponto o terceiro ponto você vai aqui tem aqui algumas coisas que tem lá no page Speed também que a gente vai depois ver com mais calma mas importante isso aqui ó peixe de trios the Tales que são os detalhes da página e aqui que que você tem que ver ó tamanho total da página 772k o que que eu tô percebendo aqui nesse gráfico eu tenho 430 KB script e 229 kbytes de imagem e um pouquinho aqui de fonte se você usa Google Fontes é que nesse site eu não uso mas se você usa Provavelmente você vai ter um peso enorme com fonte a gente vai aprender a fazer aqui também tá então eu já sei que eu tenho que reduzir aqui o tamanho do meu java script das minhas imagens se o seu fonte tiver uns 400 500 kbytes Que são fontes do Google a gente vai aprender a reduzir isso aí também então primeiro a cascata do seu site que é isso aqui o segundo o Fuller load time e o terceiro o tempo total de conexão já no page Speed O que que a gente vai olhar pessoal essa aqui ó timer 6.

3 segundos então no GTM se ele tá me dando uma coisa no computador tá tá batendo aqui mais ou menos mas no celular ele tá demorando 6. 3 segundos para você poder interagir com a pessoa e aqui ele já te deu algumas coisas ó reduza o JavaScript não utilizado que é o que é aquilo que tem no site Mas a gente não tá utilizando né que é justamente esse tamanho aqui de Java script Às vezes você pode estar carregando muito já escrito mas não tá utilizando eliminar recurso que impedem a realização a gente já vai resolver isso e imagens ó disponibilizem imagens de formato de geração é que é o que a gente vai falar de imagens depois eles vão entender já não vão entregar o ouro de uma vez Então você entendeu que aqui é basicamente imagens a base que a gente vai aprender a fazer agora e um servidor bom tá então entendeu o que tá acontecendo no seu site Beleza agora vamos seguir o passo a passo e vamos para a prática bom vim aqui tô aqui no WP de mim e aí aqui embaixo nesse link do Google vão ter além de alguns links vão ter alguns plugins que a gente vai utilizar aqui nós vamos utilizar três plugins Deixa eu só olhar aqui na minha colinha para ver se são três mesmo isso são três plugins na parte da base do site Então vamos agora trabalhar na base do site vou dividir essa otimizações em três partes base fontes e imagens vamos falar da base agora nós vamos vir aqui em plugins vamos vir Adicionar novo vamos clicar aqui em enviar plugin e você vai selecionar lá no Google Drve O plugin aqui ó do WP Rocket primeiro nós vamos instalar esse plugin aqui do WP Rocket tá bom vai fazer a instalação dele normal subiu aqui depois você aqui tá falando já está instalado mas eu vou substituir ele porque ele é um plugin mais atual tá vou ativar aqui O plugin e agora a gente vai fazer algumas configurações dentro do WP Rocket nós vamos vir em configurações WP Rocket vamos vir aqui em cash vamos habilitar a opção de Cash para dispositivos móveis aqui se você tem um site com área de usuário pode marcar essa opção também e aqui vida útil do Cash se você tem um site com uma Landing page simples não é algo que tem muitas atualizações mantém 180 dias se você tem um blog por exemplo troca por exemplo para um dia tá aqui em otimizar arquivos que que nós vamos marcar nós vamos marcar minificar o arquivo os arquivos CSS apenas se o senhor tiver marcado desmarca a opção de otimizar entrega Deixa apenas os arquivos ss e aqui em JavaScript você vai minificar os arquivos script e vai adiar o carregamento de Jairo skate é aqui pessoal você vai marcar também a opção atrás a execução do Java script Tá bom pode marcar Essa opção não tem problema e clica aqui em salvar alterações tá bom aqui em mídia você vai habilitar para vai habilitar para eframes e vídeos e vai substituir o Iphone pela visualização do YouTube vai marcar a opção de adicionar dimensões de imagem faltando e agora ponto muito importante quando a gente entra na página Qual que é a primeira sessão que carrega é essa daqui a gente chama de acima da dobra que que a dobra aquilo que a gente tem que rolar com mouse que seria essa daqui então tudo que for acima da dobra aquilo que você entra no site tá lá nesse campozinho aqui do wpe Rocket você vai colocar todas as imagens que aparecem assim que a pessoa entrar no seu site então aqui ó eu tenho essa imagem aqui eu tenho essa imagem aqui isso aqui é texto e eu tenho a imagem do fundo então no total eu tenho três imagens eu tenho que pegar o link dessas imagens e colocar lá naquele campo do wper Rocket então aqui eu vou clicar com o botão direito nessas imagens aqui e vou vir aqui em mídia e vou pegar essa imagemzinha de fundo aqui tá a imagem de fundo que eu tô usando é essa daqui ó eu vou copiar aqui e vou colocar os links um por um linha Então você cola da enter e põe o próximo beleza colocou isso aqui beleza vamos salvar as alterações para a gente não se perder tá depois nós vamos vir aqui em pré-carregar vamos clicar aqui em ativar o para carregamento tá para a gente deixar bacana se você tem muitos links no seu site você marca essa opção de pré-carreamento de links senão desmarca essa opção e aqui ó precatura das requisições DNS vai ter uma listinha aqui pessoal que essa listinha que vai estar lá no google drive que vocês vão copiar ela aqui dentro então ela vai estar vazia você vem e cola regras avançadas você não mexe banco de dados pode marcar todas as opções né comentários posto na lixeira todas exceto agendar a limpeza automática caso você queira uma limpeza automática não vejo necessidade e clica aqui em salvar na alterações assim ele vai limpar e vai otimizar o seu banco de dados tá e por fim para a gente poder acabar nós vamos vir aqui em hertbit Vamos marcar controlar heartbeat comportamento do painel vamos desativar comportamento no editor de post reduzir atividade comportamento na interface desativar Então a primeira parte da configuração da base está feita que é o wperroct agora a gente vai para o próximo plugin que é o perse Matters ele também tá lá no Drve Tá bom vamos clicar aqui em plugin Adicionar novo e nós vamos subir esse Plugin do perfe Matters tá porque pessoal que a gente tá trabalhando com dois plugins De Cash porque tem configurações no wpe Rocket que é melhor que o prof Matters E vice-versa então a gente vai aproveitar o melhor dos dois plugins depois de instalado é só clicar aqui em ativar plugin bom tô com ele instalado aqui nós vamos ver em configurações perfeitas e você vai marcar exatamente o que eu tô marcando vai ignorar essa primeira parte aqui você vai vir aqui e aqui em CSS vai estar desmarcado você vem aqui marca remove onzetsssss e aqui vai vir como em Line você vem e coloca como file tá bom para loud você vai fazer o quê Lembra daquela parte de acima da dobra quantas imagens eu tenho aqui acima da dobra uma duas três que é de fundo Então você volta aqui no perfil e vem aqui e coloca três Tá bom se você tiver quatro quatro se você tiver duas duas e assim por diante tá carregando a metade a gente não vai mexer porque a gente já configurando w pro Rocket e aqui em Fontes pessoal ponto importante se você não utiliza fonte do Google assim como eu vem aqui e marca essa opção se você utiliza fontes do Google Então você vai marcar o seguinte apenas display Swap tá bom não vai dar problema não deixa só display Swap que a gente precisava fazer aqui no perfil é apenas isso antes a gente seguir para o próximo passo a gente vai vir aqui em WP Rocket vai clicar em limpar carregar o Cash e agora nós vamos falar o último plugin Tá instalando um monte de plug no meu site Fica tranquilo que esses plugins não tem peso algum Tá bom vamos ver aqui em plugins Adicionar novo e nós vamos pesquisar essa aqui ele é gratuito ele tem na loja nós vamos pesquisar por assim que só assim que vai estar aqui embaixo também na descrição do vídeo e é esse primeiro aqui ó A5 assim que jave script clica aqui em ativar que ele já tava você vai ter que instalar e depois ativar ele já tá instalado aqui no site depois nós vamos vir aqui em configurações nós vamos clicar aqui ó em enable assim java script depois nós vamos clicar aqui em app de After Só isso tá que que isso aqui ele vai carregar ele vai atrasar e vai carregar o javascripts necessários para dentro do teu site Então pessoal a parte de base tá feita wpp Beleza agora vamos falar um pouquinho de fontes Tá eu vou editar aqui com elemento nessa página que que eu queria falar pessoal tudo que você coloca no Google do teu dentro do teu site Seja Google tag Manager ou até mesmo Google Fontes principalmente Google fotos vai demorar vai atrasar o tempo de carregamento então o que que eu gosto de fazer eu vou te ensinar como subir as fontes corretamente Tales não quero subir as fontes quero continuar utilizando fontes do Google tá bom não tem problema a gente já vai ver como fazer mas como que é o ideal a gente diminuir essas conexões do Google para isso eu preciso pegar as fontes que eu tô utilizando no Google e trazer para dentro do meu site para que o meu site não tem que ficar indo lá no Google que que a gente vai fazer aqui no elemento a fonte que eu tô utilizando aqui é uma que eu subi Ó você vai vir aqui em estilo a tipografia nesse caso eu tô utilizando a Montserrat Olha que interessante eu achei que eu não tava mas eu tô utilizando a moto serrar tá direto do Google o que que você vai fazer pode ser para qualquer fonte nesse caso aqui é muito você vai vir aqui no Google vai colocar Monte Serra pode ser a Google fonte nós vamos clicar aqui em cima e nós vamos clicar em download Family para a gente poder baixar as fontes tá então a gente baixou as fontes em arquivo Ela tá aqui ó esterg vou jogar aqui para mim beleza aqui estão todas as fontes E aí pessoal você vai ver quais são as fontes que você utiliza nesse caso aqui eu tô utilizando a 700 que é que a bold e eu tô usando aqui embaixo a 400 que é normal que é a régua então eu tô utilizando a bold e a régua que que a gente vai fazer nesse caso aqui eu vou pegar apenas a régua e a bold a Thales Eu quero usar uma outra não tem problema deixa elas aí ó nós vamos utilizar a bold e a régua nós vamos nesse caso aqui ele está em TTR a gente tem que converter isso para um outro tipo de arquivo de fonte que a gente chama de off Então a gente vai vir aqui na internet Vamos colocar TTF to love aí você pode colocar o off ou of2 eu gosto de usar o of2 tá vou deixar o link aqui embaixo também do conversor vamos ao do n converte e vamos escolher os arquivos aqui nesse caso a gente vai escolher a Montserrat bold e a régua vamos clicar em converte e ele vai converter essas Fontes aqui para um novo formato de fonte Bem mais leve você vai ver que as fontes aqui elas têm 200 kbytes as duas tá eu vou fazer o download dessas duas aqui só para a gente poder depois e vou baixar essa aqui da beleza diminuir um pouquinho mas perfeito por isso que eu não gosto de usar fontes do Google tá mas beleza e o que que você vai fazer agora você vai vir aqui dentro você vai vir elemento custam Fontes só funciona se você tiver um elementor pro ou pro elements nós vamos clicar em Adnet e aqui o nome da fonte não vou colocar Monte ser nós vamos clicar agora em athonts verreation e aqui o Eight é o 400 que a normal vou vir aqui em Wolf 2 e vou clicar em upload e vou selecionar o arquivo da fonte regular certo Por que que eu tô colocando a 400 Então vou usar regular já foi aqui depois eu vou clicar de novo e aqui wait eu vou colocar 700 que aquela que eu tô usando que é a que é a Bolt aqui em Wolf 2 nós vamos subir ela também a Bolt feito isso é só subir e clicar em publicar agora que que a gente fez com isso aqui pessoal a gente tirou do Google a responsabilidade das fontes as fontes estão aqui o que que você tem que fazer eu vou atualizar aqui o meu elemento E aí você vai selecionar a Montserrat em vez do Google a sua local simples assim então vou vir aqui ó estilo seleciona aqui Custom Fontes tá vendo ó Monte Serrat é isso que você precisa fazer tá essa é a opção correta pega suas fontes e sobe Tales qual fonte você recomenda utilizar Eu gosto muito de utilizar uma fonte chamada de Roy é uma fonte muito bonita ela tem aqui no site do novo mercado no mercado é essa fonte aqui ó a de Roy eu gosto muito dela e ela é super leve para você ter uma ideia enquanto essas fontes do Google pesa 200 kbytes e ela é muito mais bonita Então eu gosto de usar ela vou deixar o link dela para vocês baixarem aqui também tá mas se você quiser continuar utilizando a fonte do Google você faz isso que eu tô fazendo ou melhor ainda se você não quer ter trabalho né porque brasileiro odeia ter trabalho você vai fazer o seguinte você vai vir aqui em plugins Adicionar novo então Vimos a forma correta agora vamos ver a forma preguiçosa você vai pesquisar um plugin chamada omgf tá ó mgf vai marcar essa primeira opção aqui desse Rosinha Ó você vai instalar depois você vai ativar lembrando pessoal isso aqui é só para quem tem fontes do Google que a maioria do caso a maioria dos casos tá vamos clicar aqui em ativar o que que a gente vai fazer agora a gente viu que aqui nessa primeira dobra eu tô utilizando apenas a bold né que é a e a regular que é 400 tá nós vamos vir aqui em configurações opte mais Google Fontes nós vamos simplesmente descer aqui e clicar em save opte mais agora ele vai fazer uma busca de todas as fontes que é utilizada dentro do teu site e aqui ó ele já me deu uma cacetada de lista tá uma cacetada de de fontes na verdade desculpa tá se aqui não apareceu alguma pessoal que você não tá utilizando dá um save opte mais novamente que ele faz a busca e aqui que você vai fazer você vai marcar aqui ó todas que você utiliza aqui em cima bom então tudo que você usar acima da dobra nessa low dele aqui você marca ó 4700 e tudo que você não usa Você marca em download então agora sempre deixar um lua de álcool e deixar apenas em a que você usa acima da dobra naquela primeira visualização tá clicou aqui em save opt Mas não precisa fazer mais nada ele vai puxar as fontes do Google para dentro do teu site Então pessoal Qual que é o correto de fontes não tem fonte Google você pode usar qualquer outra fonte Eu recomendo de right mas caso você queira você sobe elas no elemento Ou se você quiser fazer dessa forma ele puxa a dentro do teu site para você não ter problema tá bom bom agora por fim vamos falar do matador de velocidade que é o que imagens Tá bom eu vou abrir aqui para mostrar para vocês eu quero um novo arquivo deixar ele bem grande aqui e aqui de imagens a gente precisa fazer o seguinte peso da imagem no máximo 50 kbs por imagem então sua imagem pesa mais de 50 km tá dimensão altura e largura no máximo 600 pixels de largura e a altura Depende do que for e se for banner desktop 1920 pixels por que que eu tô falando isso pessoal porque quando você sobe por exemplo eu quero que a minha imagem aparece no meu site só que para celular né então no mobile o tamanho máximo de aparição é de 390 pixels Então o que acontece se eu subo uma imagem maior né a imagem minha tem 600 pixels vamos subir lá botei no elemento Quando tiver no celular ela vai mostrar no máximo em 390 pixels então o seu site ele tem que fazer um processamento para dimensionar essas imagens vamos lá ó vou vir aqui no meu elemento como é que a gente faz isso qual que eu passo a passo das imagens redimensionar otimizar e subir só isso redimensionar otimizar e subir você vai pegar as imagens estão no teu site hoje deixa eu ver o que eu tenho aqui essa imagem aqui ó essa imagem ela tá com 450 pixels por 726 pixels tá ela tá com 10 kbytes porque ela já tá ela já tá otimizada tá E aqui ó importante para computador 1920 pixels eu vou pegar essa aqui que essa aqui era imagem inicial 173 kbytes 450 por 726 pixels eu vou baixar essa imagem só para você ver o tratamento que eu vou fazer com ela tá eu vou salvar imagem aqui que que a gente vai fazer aqui embaixo vai ter um link de um site que eu utilizo para redimensionar as imagens que é o ressize png do I love e-mail clicou no link apareceu aqui Você vai clicar e você vai puxar a imagem que a gente acabou de baixar olha aqui um vídeo como essa imagem tá só para mobile a gente vai colocar 390 pixels se for no desktop você vai colocar o tamanho da imagem que ficou dentro do teu site Beleza como que eu sei o tamanho da imagem Thalles Super Simples você vai visualizar a página dentro do teu site vamos pegar essa aqui ó que é uma imagem clica com o botão direito inspecionar passa o mouse em cima ó olha ali ó já apareceu Ó 512 por 110 então você vem aqui e põe um exemplo 512 mas nesse caso aqui essa é outra imagem eu vou colocar aqui ó 390 deixa marcada essa opção aqui de aspect clica em receise ele já vai redimensionar a imagem para você simples assim Thales eu tenho que fazer isso com todas as imagens sim você tem que fazer isso com todas as imagens do seu site eu vou baixar ela aqui vou substituir primeiro passo redimensionamento segundo passo otimização aqui chamado time png vai estar lá no link do Google Drve também aqui você vai marcar a imagem a layer 10 que é essa daqui Olha que interessante ele comprimiu a minha imagem de 160 KB para 31. 8 kbytes E você vai fazer o download dessa imagem tá pronto e o terceiro ponto que eu tenho que fazer subindo o elemento então aqui na imagem eu vou escolher a imagem que a gente acabou de otimizar só vou renomear ela aqui para não dar problema e vou subir então redimensiona otimiza e sobe Não tem segredo pessoal não tem segredo o importante é que vocês deixem as imagens escreve isso deixa a imagem no tamanho que ela vai ficar dentro do teu site como é que eu descubro o tamanho vem aqui Clica com o botão direito passa em cima do mouse e descobre o tamanho se você quiser vir para celular é só clicar aqui nesse ícone do celular Clica com o botão direito inspecionar essa imagem ela tem 300 366 pixels Então você tem que deixar essa imagem com 366 pixels de largura então redimensiona otimiza e sobe é só isso te imagens E aí pessoal o que que acontece esse ícone aqui ó esse item desculpa disponibilize imagens em formatos de última geração que que acontece a gente tem muito o costume de subir imagens em png e jpg e o correto é subir em webp você pode converter manualmente ou você pode fazer o que eu vou te ensinar agora você vai vir aqui no seu WordPress nós vamos instalar o último plugin nós vamos vir aqui plugin selecionar novo nós vamos vir aqui em short pixel É esse aqui nós vamos clicar em instalar agora e depois você vai clicar em ativar acabou aqui ó clicar em ativar beleza aqui você vai colocar o seu e-mail então você vai marcar aqui que você já leu os termos condições vai colocar o seu e-mail vai clicar aqui em solicite uma chave tá bom é isso aqui tipo de compressão nós temos com perdas brilhantes sem perdas eu gosto de colocar com perdas que ele vai perder um pouquinho da qualidade mas vai ajudar muito no tamanho do arquivo Ou se você quiser deixar brilhante ele tenta reduzir um mínimo a qualidade da imagem mas vai pesar um pouco mais no arquivo eu gosto de deixar com perdas tá Terminei eu compro eu desmarco deixa marcado se você tiver uma loja Smart crop habilita aqui você não mexe mais nada nós vamos vir aqui em avançado Next Generation images e aqui nós vamos marcar delivery Next Generation que é o que ele vai criar as versões webp das imagens e Vai disponibilizar elas dentro do site nós vamos marcar aqui usando a sintaxe vamos vai dar esse aviso pode clicar em ok aqui eu vou desmarcar o pdf ou retina porque eu não utilizo e otimizar mídia enviar eu vou desmarcar também tá bom que a gente precisa fazer isso aqui vamos clicar aqui salvar e para o processo em imagem Qual que é o problema do short Pixel pessoal ele consegue só otimizar sem imagens por mês se você tiver na dúvida Faz igual eu eu comprei um pacote ó que a Biblioteca de mídia 60 imagens tá eu comprei um pacote de 10 mil imagens ó eu tenho sem créditos eu preciso de 80 Mas você pode clicar aqui ó e aí você faz a compra dos créditos eu paguei $10 na 504 e você pode utilizar 10 mil imagens tá fica a seu critério não é obrigatório mas por exemplo se você tem um site com muitas imagens ou e-commerce ou alguma coisa recomendo comprar mas só de subir lá e já passando png já tá excelente que que você vai fazer agora aqui eu tenho 40 imagens aqui eu preciso de 80 créditos porque ele tá criando as versões do MP e vamos clicar em start billk optimeization E agora o que que a gente tem que fazer a gente tem que esperar ele terminar de otimizar as imagens você vai ver que é automático ele vai otimizar as imagens de dentro do teu site ó aqui ele já tá otimizando as imagens colocando um pouquinho de perda conforme a gente configurou e ele vai substituir a webp dentro do teu site então assim que acabar esse processo eu já volto aqui vai ter um corte eu já volto aqui assim que tiver 10 100%.

bom Acabou agora o processo é só clicar aqui infinitybook process deu 100% 80 imagens otimizadas então a gente está pronto para testar o que que a gente precisa fazer agora vem aqui em WP Rocket limpar e pré-carregar o cacheaters Clear e Used CSS pra gente dar uma boa dá uma limpada e agora que ninguém te ensina Você vai abrir essa página aqui no modo anônimo tanto no seu computador quanto no seu celular pelo menos umas três vezes tá para você conseguir né para o seu servidor entender cara tem gente acessando eu preciso compilar essas otimizações para a gente não perder nada tá então aqui abrir uma vou novamente vou abrir mais uma tá e novamente vou abrir mais um tá bom e agora a gente vai fazer isso no celular também eu tô gravando aqui do celular então não consigo fazer isso mas você vem aqui vou apertar f12 vou fazer um teste aqui e vou abrir ela pelo menos aí três vezes Tá e aí será que funcionou vamos testar novamente vamos vir aqui vamos dar um reteste e aqui em page Speed eu vou analisar novamente então basicamente pessoal só lembrando aqui repassando que a gente fez a gente fez toda a base do site depois a gente tratou de fontes depois a gente tratou demais que que é mais importante tudo que você puder não utilizar do Google dentro do seu site vai fazer ele ficar muito mais rápido utilize uma fonte personalizada tipo de Roy ou baixa e sobe igual eu fiz o segundo ponto imagens deixa a imagem redimensionada no tamanho que ela aparece no site Quais são os três processos de imagem primeiro você redimensiona depois você otimiza e depois você sobe e aí será que vai funcionar vamos lá vamos testar já rodei aqui para testar vamos ver se vai estar funcionando hein Vamos lá gente aí de 2. 8 segundos para 218 Mili segundos tá ah tá eles Poxa não tenho certeza se é esse de fato que está funcionando cara pega sua página Sem problema nenhum abre aqui novamente no tá no celular também e não pede Speed Nota 100 mas é isso que importa não o que importa para a gente de fato isso aqui ó time indirecture 1. 1 segundos tá E aqui no computador também 0.

3 segundos Então pessoal o que importa é de fato e isso tá funcionando a gente caiu aí para cara quase nada de Java script ó caiu de 400 e pouco para 2.