COMO OTIMIZAR SITE WORDPRESS PARA CARREGAR MAIS RÁPIDO [Transformando imagens em Webp]

nesse vídeo eu vou te mostrar como otimizar o carregamento do seu site transformando as imagens em um tipo de arquivo que é muito mais leve e melhor lido pelos navegadores webp por uma série de fatores técnicos esse formatinho vai fazer com que as suas imagens pesam ó muito menos dentro do seu navegador e por isso ele leve menos tempo para processar as imagens dentro das páginas e assim o seu site vai ficar bem mais rápido nesse processo Inclusive eu vou mostrar na prática como que isso influencia lá na notinha do Google então se você quer

melhorar o seu teste de velocidade esse é um ponto importantíssimo para você fazer dentro do site E é claro se você ainda não me conhece muito prazer meu nome é Bia e eu sou uma das web designers aqui da escola de sites eu fico muito feliz de poder tá trazendo esse conteúdo aqui para vocês e troca a única coisa que eu peço por favorzinho com todo carinho é que você já deixa o seu like aí embaixo nesse vídeo se inscreva aqui no canal também para poder estar sempre recebendo conteúdo sobre esse Universo de criação sites

e aproveita também para já deixar um comentáriozinho sobre o que que você acha desse tipo de conteúdo aqui embaixo Beleza então mas agora chega de papinho e bora lá transformar as nossas imagens em webb bom gente para gravar esse tutorial aqui para vocês eu vou usar como base essa página de vendas que eu fiz aqui num tutorial junto com vocês então já tem toda esse tutorial Prontinho aqui caso vocês queiram ter uma página de vendas chuchuzinha como essa Olha só deixa só dar uma escroladinha aqui ó musiquinhas de elevador né enquanto eu explodo [Música] então

se você quer ter uma página de vendas dessa deixe sozinha aí no seu portfólio já segue aí provavelmente esse tutorial vai estar nos cards em algum local nesse vídeo Então já procura aí e maratona esse tutorial que com certeza vai valer a pena para caramba e a gente vai transformar todas as imagens utilizadas nessa página em webp e olha só se eu entrar aqui no testezinho do Google mesmo caso você não saiba acessar o teste de velocidade no Google é só você acessar esse essa URL aqui ó pagespeed ponto web tá E aí você vai

vir aqui vai pegar o seu domínio direitinho e vai trazer aqui para o Google analisar E aí esperar ele dá uma carregadinha e te dar as notas finais e Prontinho carregou aqui para mim no caso aqui para celular ele tá dando uma nota de 71 O que é uma nota boa até para celular tá celular ele sempre é um pouco menor do que para computador e aqui para computador ele tá dando um desempenho de 93 Lembrando que eu fiz toda essa página e Eu segui alguns padrões de otimização enquanto eu estava desenvolvendo como por exemplo

não utilizar muitos containers né tentar reduzir um pouco ali os elementos da minha página não usei imagens maiores do que o necessário também todas as imagens elas foram pensadas direitinho para o tamanho que eu iria utilizar ali dentro da página Então já tá tudo meio que certo nesse sentido porém eu não fiz nenhum processo de otimização Extra por exemplo não coloquei nenhum plugin De Cash que eu fiz ainda esse processo né de transformar as minhas imagens em um arquivo e é melhor lido pelos navegadores então assim ainda tem várias coisas para se fazer de otimização

dentro dessa página aqui para deixar ela realmente assim ó mais nota a ainda porém olha como você pode ver né quando uma página Ela é bem planejadinha já tem Elias imagens certinhas e tal seguindo essas coisas que eu falei você já consegue alcançar uma nota bem positiva que 93 querendo ou não né já tá ali bem na faixinha do verdinho aqui ó dos 90% então querendo ou não já é uma nota bem positiva porém se a gente descer aqui ó você pode ver aqui uma das primeiras notificações que o Google oferece para gente é Para

justamente disponibilizar imagens em formato de última geração e olha só gente aqui ó ele fala formato de imagem como webp ou esse a bife aqui costumam ter uma compreensão melhor do que png e jpg então né é justamente isso que a gente vai fazer a gente vai transformar as nossas imagens em png para esse formato web é o formato melhor utilizado pelo Google justamente é o formato inclusive feito pelo Google tá gente para quem não sabe então assim querendo ou não ele vai querer que as pessoas façam isso mesmo mas não é simplesmente por ser

da mesmo do mesmo branding ali né justamente também por ser um arquivo que vai ser melhor lido melhor compreendido mais rápido e mais leve pelos navegadores Ok então bora lá fazer esse processo e ver se muda alguma coisinha por aqui ah e só detalhe lembrando tá Gente esse negócio aqui do page Speed ele tipo vai dar uma variadinha tá Dependendo da hora do dia que você tiver vendo por exemplo eu fiz aqui um teste antes mais cedinho tava dando 96% aqui ontem à noite eu fiz um testezinho rápido aqui também tava dando 92 então assim

dependendo da hora do dia do Morro do Google também Enfim uma série de fatores isso pode influenciar um pouquinho no entanto sempre vai ser mais ou menos da mesma faixa então pode ser que depois né o volte aqui e não faça muita diferença também por causa dessa variação mas de qualquer maneira o principal vai ser a gente verificar se notificação aqui ela sumiu né porque por ser uma orientação que tá clara aqui pra gente o que a gente quer é que isso suma justamente para o que o titio o Google fique mais feliz com a

gente mas bora lá então para o nosso painel Prontinho gente estamos aqui no nosso painel do WordPress né como eu falei eu vou usar como base aquela página de vendas que eu mostrei E aí o primeiro passo que a gente vai fazer é vir aqui e instalar um pluginzinho que vai fazer todo esse processo para a gente ali ó na manha de transformar os arquivos que a gente já tem um webb Então vou vir aqui plugins e só para você ter uma ideia de como realmente não foi feita ainda nenhum processo de otimização basicamente o

único bloquinho que eu tô tendo até agora é o elemento então não coloquei nada de Cash nem nada assim ainda mas enfim a gente vai vir aqui em Adicionar novo e eu vou procurar o Web E aí a gente vai pegar esse plugin aqui ó webp Express tá ele tem mais de 200 mil instalações ativas é um pouquinho bem né utilizado aí no mercado então é esse aqui que a gente vai utilizar vou clicar aqui para instalar e assim gente nunca se baseia muito pela imagem Apesar de que eu acho que essa imagem nunca trocou

desse plugin mas caso troque ver direitinho aqui o nome é o autor aqui do Plugin também o criador tá E aí se for ali o mesmo nome o mesmo criador é o mesmo plugin Beleza vou ativar aqui também todo o processo de plugin aqui dentro do WordPress é assim a gente instala e depois ativa e agora que a gente já instalou e ativou agora a gente tem acesso às configurações desse plugin eu posso ou clicar aqui em settings ou então vir aqui em configurações e clicar aqui nessa opção do webpa Express eu vou nessa segunda

opção aqui e aí assim que a gente entra a gente já tem acesso ao painelzinho de configuração desse web Express a gente vai mexer bem pouca coisa aqui as configurações padrões dele já são ótimas já eu já fiz vários testes é modificando por exemplo alguns parâmetros e tudo mais e no fim das contas eu não senti muita diferença ou então até piorou um pouco então a maioria das coisas eu vou deixar como padrão aqui mesmo no entanto caso você tenha mais interesse em ler mais a fundo tudo isso aí ou que tem um fundo transparente

por exemplo ou até animações e tudo mais é um formato assim bem amplo do tipo dos tipos de arquivo que ele consegue suportar então vou deixar esse padrãozinho aqui mesmo vou deixar a pasta de destino separada para poder ficar mais organizadinho lá nos arquivos do site tudo mais aqui eu vou deixar tudo padrãozinho nessa parte aqui do ht-x também a gente não vai mexer aqui é onde normalmente algumas pessoas gostam de mexer justamente porque aqui é onde você vai colocar os padrões de compressão por exemplo né Aqui você pode colocar uma compressão ou então uma

otimização um pouco maior para um determinado arquivo menor para ver se aquilo influencia mais ou menos nas qualidades daquele arquivo como eu falei eu já fiz aqui uns testes e esse padrão aqui desse plugin já é excelente Então eu vou deixar dessa forma aqui mesmo no entanto caso você queira dar uma lidinha em mais detalhes nessa parte aqui e ver se tem alguma coisinha que faz mais sentido para você eu sugiro que você dê uma lida até para você conseguir entender melhor o que você tá fazendo aqui embaixo é onde já vai começar a modificar

algumas coisinhas ó primeiro tá vendo que esses métodos de conversão tem vários que ficam com essa bolinha de que tipo não tá ativo e outros com esse checkzinho de que tá ativo Então pois é primeiro de tudo a gente vai empurrar esses que estão ativos aqui para cima para poder dar prioridade para eles porque o que que isso vai fazer ele primeiro ele vai ler o que tá aqui em primeiro da lista né Ele vai tentar esse método de conversão se ele não funcionar ele vai para o outro e assim por diante então assim é

bom que você já deixa os ativos ali em cima mesmo né bonitinho e os que não estão ativos embaixo justamente porque a gente já sabe que Muito provavelmente aquilo não vai funcionar e gente um detalhe importante é que o método de conversão mais importante aqui de estar ativo essa extensão GD aqui você não precisa entender o porquê é Tecnicamente disso está acontecendo tá só que ela precisa estar ativa realmente E aí dependendo da hospedagem que você tiver utilizando Talvez esse item aqui não esteja ativo se ele não tiver ativo Muito provavelmente não vai esse processo

tá então assim aqui no caso eu estou utilizando a rosting nesse vídeo que eu falei eu mostro todo o processo de contratação bem bonitinho dessa dessa hospedagem que eu estou utilizando aqui que inclusive é a que a gente mais indica para os alunos Ela é super segura rápida desempenho vocês viram a nota lá né então assim é uma hospedagem excelente no entanto né caso a sua hospedagem não suporte esse método de conversão aí eu sugiro que você dê uma olhadinha ali no suporte com eles vê se eles conseguem ativar isso para vocês e aí se

conseguir ativar Beleza a gente parte aqui desse mesmo Ponto então ok outro processo aqui vai ser da gente marcar isso de converter no upload o que que isso aqui vai fazer aqui a gente vai converter todas as imagens que já tem no site em webb no entanto você marcando isso aqui a cada nova imagem que for né subindo ali no site esse processo ele já vai acontecer do automaticamente pelo plugin senão toda vez né você vai ter que vir aqui e fazer essa conversão ali massa para poder puxar todos os Se você deixar isso aqui

marcado sempre que você subir uma nova imagem isso já vai acontecer isso é ótimo inclusive para quando por exemplo você tá fazendo um site para um cliente porque assim a gente entrega o site todo bonitinho e tudo mais né Mas querendo ou não os clientes depois eles vão querer mexer eles vão às vezes trocar uma imagem vão subir novas coisas e tudo mais e é a gente tem esse cuidado todo né de fazer uma otimização nas imagens de deixar elas nos tamanhos certinhos e tudo mais porém os nossos clientes por não ter todo esse conhecimento

dificilmente eles vão ter Exatamente esse mesmo cuidado que a gente está tendo Então já deixar esse processo automático pelo menos independente da imagem por exemplo ser muito maior do que o necessário pelo menos ela já vai dar uma reduzida aí nesse processo transformando em webp de forma automática Ok então Ajuda também no carregamento futuro do site Beleza gente aqui A gente vai mexer nisso aqui a gente vai marcar essa opção aqui de alterar no HTML e aí eu vou marcar aqui para substituir o URL da imagem e o que que eu tô fazendo aqui eu

tô falando para o plugin o seguinte Olha só o MP Express faz essa lógica condicional para mim tá eu sei que tem navegador que não sabe o que que é webp não sabe como aplicar isso os navegadores mais antigos É principalmente então para eles justamente porque eu não quero que o site fique todo quebrado para eles né já que as minhas imagens vão estar webp é eu falo ó navegadores antigos segue aqui as imagens em JPEG e png e mostra desse jeito aqui para você no entanto se você tiver utilizando um navegador que sabe que

tipo de formato é esse mostra essa aqui mais reduzida para o site carregar mais rápido nesse tipo de navegador Ok ele vai fazer essa lógica condicional nos navegadores que não puxam webp ele vai mostrar o formato antigo mesmo jpg png para o site não ficar quebrado e nos navegadores que comportam esse formato ele vai mostrar justamente nessa nova versão que a gente tá colocando nas nossas imagens Ok e aqui eu tô colocando para substituir a URL justamente para que a gente visualizar a imagem e mostrar ali no cantinho mesmo que essa imagem é uma imagem

webb vou mostrar isso na prática para vocês então basicamente é isso vocês viram que é um processo bem simples mesmo aqui na verdade quando eu faço isso é tipo questão de um minutinho aqui é porque eu tô explicando para vocês né Mas fechou esses detalhes aqui eu vou clicar para salvar essas configurações e também vou salvar e forçar essas regras no meu ponto HT access nas regras do hts do meu site né Isso aí é uma forma dele forçar realmente todas essas configurações lá no arquivo interno do nosso site e beleza agora que a gente

já fez isso aqui ó eu vou entrar isso aqui eu vou entrar nessa página aqui numa guia anônima Então já tô aqui numa guia anônima Vou atualizar e aqui antes essa imagem né Teoricamente aquela é uma imagem de fundo transparente ela tava em png e aqui agora se eu colocar ela para cá você pode ver que no final foi aqui transformado em um arquivo webp né E aqui também tava mostrando essa notificação e agora o nosso principal função vai ver é a nossa principal função vai ser de ver realmente se essa notificação aqui vai sumir

Ok então eu vou clicar aqui para analisar de novo e aí beleza voltando aqui no Google você pode ver que por exemplo para celular já deu uma melhorada né pode ser também que no computador não tenha modificado muita coisa por causa daquelas variações que eu falei no entanto você pode ver que para celular já deu uma melhoradinha aqui e ao mesmo tempo se a gente for aqui para computador Olha isso foi para 99 é aquele negócio né eu falei ah pode ser que não tenha variação mas foi uma boa variação no fim das contas ai

gente quando a gente vê esses 99 assim chega dá vontade de cantar aquelas musiquinha ui Champion né muito bom mas enfim né aqui embaixo Ó você pode ver que a gente não tem mais aquela notificação do Google né de falar que você precisa trocar os arquivos por um arquivo de melhor renderização já não tem mais isso aqui então a gente já tá mais ali principalmente na listinha dos queridinhos do titio Google bom gente e se você curtiu esse conteúdo não deixa de dar aquele likezinho Para apoiar o canal comentar aqui embaixo também o que você

achou sugestões para novos vídeos também né que a gente adora ver esse tipo de comentário de vocês eu tô sempre lendo já virou um novo Hobby meu porém antes de terminar esse tutorial e queria só dar um toquezinho para a galera que tá realmente mais interessado em evoluir E quer se tornar um profissional completo nesse universo de web design se você quer dar um próximo passo e verdadeiramente aprender a criar sites impressionantes de uma maneira pelo menos 10 vezes mais rápido do que a forma tradicional então eu te convido a Clicar no primeiro linkzinho que

tá aqui na descrição desse vídeo clicando nesse link você vai conseguir conhecer melhor o nosso treinamento Zé pro e nada mais é do que o nosso treinamento Completão que com certeza poderá finalmente te levar ao patamar de se tornar um desenvolvedor de sites profissional Inclusive só a título de curiosidade é o mesmo utilizado pela própria equipe interna da escola de sites Sim tudo que a gente sabe aplica a gente sabe devido a esse treinamento que a gente mesmo aplica nas nossas vidas e passa também para os nossos alunos então não perde tempo hein gente aproveita

essa oportunidade e já clica aí no primeiro link da descrição eu vou adorar ver vocês lá no treinamento eu tenho certeza que isso pode ajudar muito muito você na trajetória aí da sua carreira por hoje eu vou ficando por aqui então e até a próxima tchau