3 Dicas para melhorar o Desempenho do seu Site

e aí o olá pessoal sejam bem vindos a mais um tutorial aqui é o thales o suporte hoje eu vou ensinar como otimizar seu site fique um chica vieira bom é aqui no nosso você vai entrar em seu editor chega viu onde você conseguiu seu site tá guarda carregar bom eu já deixei um site pronto aqui porque a gente é trabalhar as dicas de utilização e a pobre aqui então eu tenho que um site é meio que padrãozinho né com pouca coisa né então site geralmente têm uma logo tem um menu tem textos tem imagens e alguns tem vídeos né e ele tem background nelson alguns itens básicos e que mais interferem no desempenho do seu site bom um o consultor de tapioca e foi desenvolvido pela ser super rápido é tão bom desempenho porém olha o seu site ter um ótimo desempenho também depende do conteúdo que você adiciona né não adianta a gente ter uma caminhonete e colocar uma carga super pesado nela que ela não vai ser rafaela não vai carregar como um caminhão é mais forte tá então mesma coisa ocorre com o site né mas você tem um site site rápido se encher de colocar muitas imagens muito vídeo ele faz se tornando bom então aqui eu vou fazer um teste aqui já para você ver como está o desempenho e o peso desse site tá então tem aqui ó al-rr então quando eu eu te carrega o que é super rápido para carregar né bom a mais rápido visualmente mas e o peso que tá utilizado então vou mostrar para vocês como funciona então tem essa ferramenta aqui vou deixar o link na descrição do vídeo e no artigo tá você vai adicionar url seu site né que tá o tomilho é provisório da builderall é pode ser o seu domínio então o que você disse lá a opção é south américa porque o público do site a mais eu ia pelo menos vai ser aqui do brasil né caso então vou testar aqui com um provedor do brasil a entender como está o desempenho e diz quem tá fechando aqui no país tá tem que levar um pouquinho para carregar e ele vai me dar um resultado ah tá então ele fez o old do site um ponto de terror de segundo é um tempo bom tá e isso que o site não tá utilizado tá então aqui a performance grid de 86 e o tamanho deu 2,5 pega parece pouco sim mas só que tem como utilizar né então vamos vamos verificar que alguns itens né mas abaixo na tela tem a opção de imagem está tendo que a imagem só de imagem tem 1. 77 m tão que é setenta por cento quase tô site do peso do site é imagens e aqui a gente tem 26 por cento de script que são duas coisas que a gente pode trabalhar muito bem tá bom então vamos conversar pela utilização das imagens né então aqui eu tenho meu site realmente você vai criar sua logo no editor de imagens eu photos' e eu vai comprar de um designer ou vai baixar de um site alguns um já te enviar ou você já vai criar utilizado outros não tá então eu vou te mostrar o exemplo de um alô google utilizado e de uma não utilizada então eu tô eu tenho algo que eu recebi aqui tá então tem aqui nas propriedades dela então ela tem 32 bytes então essa já veio utilizada né mas ela tem o 500 pixels de largura e 15 ficção de altura então isso aqui dá para acabar é geralmente as logo tem muito grande por exemplo que nem essa aqui ó ela tá sem utilização ó tá com o tamanho ela tá com um ponto 35 mega ó e aqui de tamanho ela tá com 3 mil porque foi feito no editor ah mas isso não é um cenário comum pode acreditar que sim tem muitos clientes muitos casos que a pessoa vai e site sob gogos pesadas de mais de mil de resolução tá ah mas eu quero uma resolução granja não faz sentido você tem uma resolução tão grande em uma imagem de logo porque quando no seu site você vai redimensionar a sua imagem tá então pouquinho editor o choco isso aqui mesmo tá é você vai redimensionar e aqui ó porque sem falar que ao longo desse tamanho aqui então vou posicionar ele aqui eu vou salvar e aí o prefeito uma aguardar um pouquinho se você deixa eu fechar esse vídeo porque para não confundir e você sabe o site novamente bom então tenho que ir a minha roupa então ela cabeça tamanho então vou ensinar uma uma ferramenta aqui do navegador que é o inspetor de elementos você vai digitar apertar no seu teclado com outro shift vai vir ele vai abrir essa ferramenta aqui nessa lateral para facilitar você pode está clicando nessa suas bolinha se colocando aqui embaixo você vai usar essa ferramente aqui ó bem esse cantinho esquerdo aqui você vai passar ela sobre a logo tá vendo aqui olha a resolução que era ficou ó ficou cento e vinte por cento e onze então eu não preciso de uma imagem de 500px ou 3 mil pixel para adicionar nessa logo então o que que eu vou fazer eu vou utilizá-lo para uma problematização que você vai fazer é usar essa ferramenta aqui ó aí love mês ou você pode usar um outro editor de imagem ou com que o já está acostumado usar mas eu tô indicando esse site aqui você vai vir her rivais imagem vai ficar em cela que imagem você vai subir é só logo então a minha logo então vou utilizar um pouco pior cenário aqui que a de 3 mil pixels e um pouco 35m eu vou clicar em abrir então ele subiu me imagem que o site então o que que eu quero deixa aqui marcado o aspecto hair rádio e vou então eu testei o meu site tá eu vi que a imagem é algo em torno de 120 pixel que que eu vou fazer então vou colocar aqui ó 150 pixels por exemplo aí ele vai dar o proporcional aqui vou quicar rezais imagem e aqui o botão que download tá certo então vou baixar aqui ó e eu já baixou aqui eu vou mostrar a pasta bom então tem aqui a imagem ó então ela tá com 150 por 138 é e aí tem aqui aperta aqui ó bom então ele substituiu a mulher ali imagem pesada aqui ó o show só clicar aqui atualizar e o pai que apaixonou outro local eu deixo só e certinho onde baixou esse imagem mostrando a pasta ou foi cala-te download então quero aqui ó então eu vou substituir ou você pode criar ignorar isso não vou substituir aqui ó então já tem nem água utilizada mais veja que aqui ela tem 23 canais né eu 24 carvalho seu tamanho disco ainda tem como utilizar mais uma vez essa imagem então vou voltar no mesmo site eu vim aqui comprar essa imagem tá então ele pode comprimir tanto jotapeg png gif tem esse site também funcionamento é o mesmo e tchau time. png então você selecionar a imagem ouvir aqui ó então 23 capitais vamos ver o quanto que ela vai conseguir otimizar aqui e aí e aí oi ó eu utilizei imagem de 23 para 4k bate então ela baixou aqui já foi direto nem perguntou onde baixar nossa na página vou recortar vou mandar lá para minha página que eu poder subir no site então vou colar aqui ó até substituir bom então essa minha louco que tinha um pouco 35 mega eu já passei ela porque a quatro kabaite opa e deixa eu ver como fazer a fazer o download da imagem correta aqui a mostrar a página em 4k bikes vou dar um culto o x ou colocar na minha página o substituir então aqui eu tenho a imagem de ela não tá o show atualizar aqui pode ser isso quatro cavalos vendo então é só atualizar aqui então vamos voltar lá no meu editor de site e vou substituir essa imagem aqui então vim aqui com o botão direito vem aqui trocar sua logo eu vou subir essa laje novamente ó então é essa daqui png e você vai funcionar o sol tá vendo que aparência não mudou quase nada praticamente nada é imperceptível google mano até então vou salvar meu site aqui essa é a primeira utilização bom então para você ver utilizando uma imagem bom eu já ganhei um ponto mais de 1 mega tá então vou salvar aqui vou dar uma atualizar ó vídeo e aí vou aqui novamente no site para fazer o teste site teste o olá que já teve deu um ganho no peso total tá e isso foi apenas em uma imagem tá aqui já caí ó eu quero sete porcento disse que ainda não publicou tudo mas já teve um ganho então você vai fazer isso em todas as suas imagens 11 imagens que é possível fazer uma utilização imagem de background tá então vamos lá então eu tenho aqui uma imagem de background que eu utilizei que essa daqui ó as propriedades então tenho dois megabytes né sem laje tá então vamos utilizar eu subir ela com o site né o site ele já tem um ó a uma ferramenta que comprime a porém se você já fazer o seu utilização já vai ajudar muito principalmente na resolução então vamos lá eu quero esses aqui meu site o editor eu quero trocar esse painel aqui então tá vendo aqui aqui essa imagem ela tem e ela tem mais de 5.

000 pixels então vamos reduzir a um pouquinho que que você vai fazer para reduzir vai ser o mesmo processo cada ultimate que eu e você vai ter que planejar um pouco mais vai vir aqui no seu painel com o botão direito vai verificar qual que é o tamanho dele aqui ó 1800 mas faz de conta que eu peguei um pouquinho menor porque ela ele com 1. 600 um show em check on em 1460 o risco então vou até copiar esse valor aqui então esse vai ser meu painel aqui então o que que eu vou fazer eu vou lá no site vou na opção de redimensionar a imagem você selecionar vou subir essa imagem aqui novamente tá mesma forma vou colocar aqui o tamanho que eu quero deixar o padrão oi mãe um toque a a largura né então no caso ficou com aqui na úrsula tá porque esse é o é o tamanho da altura do painel então coloque o leite vou redimensionar e aí e aí e eu vou baixar essa imagem deixou os aqui na página recortar voltar aqui para o meu vou substituir bom então tem aqui a imagem então ela foi de 2 megas para 300 cavalos tá aí você pode fazer aquela outra utilização que eu ensinei aqui né do completo imagem né mas cadeado talvez eu já vou fazer aqui já vou subir a trocar de diretamente então vamos lá tamanho da imagem painel o colegial trocar o background vou subir essa imagem e aí e aí e aí tô vendo eu troquei imagem e nem parece que foi feito alteração porém ela já está muito menor então vou salvar esse site eu não vou fazer um teste agora eu vou fazer mais uma otimização e algumas informações contém dois tipos de arquivos padrão usado que é o png e o jp tá uma imagem quando ela não tem no fundo transparente ela não tenha necessidade de ser png então você pode deixar ela por exemplo essa daqui é uma imagem tá vendo eu não tenho fundo transparente que nem aqui ó nem logo a louca precisa ser transparente colocar ela aqui não o papa e ela ficou atrás do gol assim a raça de corretamente ó é só deixar carregar o editor in tá bom tá vendo se eu colocar aqui ó por cima aí ela viu acordou funda porque ela transparente então geralmente vai colocar uma foto de uma pessoa tem que ser transparente no fundo eu indico não usar muita imagem png no site porque o png para o navegador ele é muito pesado para ser processado tá é ah mas eu tenho que usar então você usa mas sempre tomando o cuidado para não colocar tudo em png a coloca só o que for essencial então vou utilizar essa imagem aqui então se foi lá foi no site no banco de imagem baixou essa imagem que por exemplo deixa eu ver qual que é o tamanho dela ela tem um mega 1.