juniorthiesen · May 8, 2023 10:51
diff --git a/gistfile1.txt b/gistfile1.txt
 Tutorial de Como Parar de Rasgar Dinheiro Anunciando Com Sites/Landing Pages em Wordpress
 Todos nós sabemos que ter um site para anunciar é muito importante. Mas se você anuncia usando site as chances são de que você está rasgando dinheiro e nem sabe. 😨
 Por que digo isso? Basicamente porque a maioria dos anunciantes anunciam com páginas lentas. Uma pesquisa feita indica que se o seu site tem um LCP (Largest Contentful Paint) de 3s, você vai perder até 50% do tráfego. Pra ser mais claro, se atualmente você estiver investindo R$2.000 em anúncio com uma página com esse LCP, isso significa que R$1.000 estão indo diretamente para o lixo. 💸💸 (Você pode usar o GT Metrix para avaliar o seu site)
 E olha que volta e meia vejo sites que batem 5s, 6s ou até 10s de LCP.
 Entendeu agora a importância de ter um site rápido?
 Por isso, depois de otimizar vários sites, eu separei um passo a passo detalhado para você parar de rasgar dinheiro e ter um site extremamente rápido. 🚀💪🏽
 Vamos lá então!
 PRIMEIRO PASSO: USAR UMA CDN NO SEU SITE 🖥
 A CDN nada mais é do que um grupo de servidores distribuídos ao redor do planeta que armazenam conteúdo em cache próximo aos usuários finais.
 Vou te dar um exemplo real… Imagine que você mora no RJ e acessou um site que está hospedado em servidores da Califórnia, EUA. Esse site não usa CDN. Basicamente, o seu navegador terá que “buscar as informações” do site do RJ até a Califórnia para te mostrar esse site.
 Isso é ruim porque daqui até lá ele precisará percorrer uma longa distância, concorda?
 Mas agora imagine que esse site usasse uma CDN que tenha um dos servidores em São Paulo. Isso significa que quando alguém acessasse o site do Brasil, esse servidor armazenaria as informações (cache) do site. Daí, se você fosse acessar esse site o seu navegador não teria que buscar as informações longe (Califórnia), mas sim aqui pertinho de você (São Paulo).
 “Tá, mas qual CDN eu posso usar? Preciso pagar?”
 Não, você não precisa pagar nada por isso. Existe um plano na Cloudflare que já está de bom tamanho para a maioria dos anunciantes. E esse plano é gratuito. É só se cadastrar, conectar o seu site aos servidores de lá e partir para o abraço.
 OBS: Veja se o plano da sua hospedagem já te oferece algum CDN.
 SEGUNDO PASSO: OTIMIZAR TODAS AS IMAGENS 📸
 Esse é um passo muito importante, porque geralmente o maior problema dos sites estão aqui. Poucos são aqueles que otimizam as imagens que vão para o site. Acredito que você provavelmente já foi em um site e a imagem vai carregando por partes. Por que isso acontece? Porque provavelmente o desenvolvedor apenas jogou uma imagem de 1500 px por 1500 px no site onde ela precisaria de uma resolução de 300 px por 300 px. Mas afinal, o que seria otimizar a imagem?
 A resposta é: dimensionar a imagem da forma correta e transformá-la em arquivo webp comprimido.
 Como dimensionar da forma correta? Bem, aqui você vai precisar de uma extensão no Chrome. O nome da extensão é Designer Tools. Com ela você vai poder ver o tamanho real que a sua imagem apresenta no seu site. Sabendo disso você vai redimensionar a imagem para que você não exceda a resolução sem necessidade.
 Por exemplo, se você colocou uma imagem de 1080 x 1080 no seu site e viu que o tamanho da imagem no seu site é de apenas 400 x 400, você vai reduzir o tamanho dela para que ela se encaixe naquele tamanho sem exceder a resolução necessária. Ou seja, você vai redimensionar a imagem para 400 x 400. Você pode usar o canva ou algum redimensionador online para isso.
 Além disso, você vai converter todas as imagens para webp. Seguem os links para converter tanto imagens png, como jpg:
 conversor-de-jpg-para-webp/
 conversor-de-png-para-webp/
 OBS: Caso a sua imagem seja transparente (png), não tem problema, pois o arquivo webp consegue puxar a transparência da imagem original.
 Depois de fazer isso você vai comprimir o arquivo webp para ele diminuir ainda mais o tamanho. Use esse site para fazer isso:
 compress-webp
 Após isso, é só subir os novos arquivos webp no seu site.
 TERCEIRO PASSO: OTIMIZAR O CSS E JAVASCRIPT DO SEU SITE 🧑‍💻
 Essa etapa também é muito importante, porque infelizmente o Wordpress e os plugins que instalamos nele (principalmente o Elementor) disparam muitos códigos desnecessários na abertura do nosso site. E isso é um problema, já que essas informações precisam ser “lidas” pelo navegador do visitante.
 “Mas Lucas como vou fazer isso, já que o meu site está em Wordpress?”
 Para fazer isso, você terá que instalar um plugin chamado Asset Clean Up (IMAGEM 1). Com esse plugin você pode bloquear o disparo de códigos inúteis para o seu site.
 Aqui é um trabalho de formiguinha. Você vai desativar código por código (um por vez) e salvar as configurações e depois entrar no seu site. Se o seu site está funcionando sem problemas, deixa o código desativado e parte para testar outro. Caso ele tenha dado pau, liga o código novamente e bola pra frente. É como se fosse um interruptor. Se der problema desligado a gente liga de novo!
 QUARTO PASSO: INSTALAR PLUGIN PARA CACHE, OTIMIZAÇÃO DO BANCO DE DADOS, IMAGENS, MINIFICAÇÃO DE JS, CSS, ETC
 Aqui está o pulo do gato. Mesmo depois de todas essas otimizações nós iremos instalar um plugin chamado WP-Optimize e configurá-lo. Esse é um plugin que ajuda a melhorar muito a velocidade do site. Note que na IMAGEM 2 você vê uma landing page onde foram aplicados os 3 passos anteriores. Ela já está excelente, certo? Mas veja que o LCP está batendo 1,5s. Apenas por instalar e configurar de forma correta esse plugin o LCP mudou drasticamente para 517ms (0,51s) como você pode ver na IMAGEM 3. Além disso, repare que a performance e estrutura do site pulou para 100%. Ou seja, tudo que eu fosse fazer dali pra frente quase não teria impacto na velocidade do site já que ele foi completamente otimizado.
 Então vamos partir para a parte prática… Vá nos plugins pesquise por “WP-Optimize”. Instale e ative o plugin da IMAGEM 4. Após ativar, acesse as configurações desse plugin. Clique em “database” ou “banco de dados” conforme as setas vermelhas da IMAGEM 5. A partir daqui começaremos a otimizar o seu banco de dados do Wordpress. Para isso, você precisará clicar na caixinha que marca todas as opções conforme a seta amarela. Antes de apertar no botão da seta rosa para executar a ação, recomendo que você instale um plugin chamado “UpdraftPlus” e configure-o. Esse plugin serve para criar arquivos de backup do seu site. Ou seja, se acontecer algo com o seu site você poderá recuperar facilmente com os arquivos baixados do backup.
 Após isso, você irá ticar o quadradinho indicado com a seta verde. Isso garantirá que antes do WP Optimize fazer a limpeza do seu banco de dados, o UpdraftPlus criará os arquivos de backup do seu site. Daí, clique no botão da seta rosa.
 Agora você irá clicar em “settings” conforme a seta azul indica. Você deixará configurado igual a IMAGEM 6 e depois clique em “Save settings”. Depois clique em “Imagens” conforme a IMAGEM 7 e deixe configurado do mesmo jeito. Na parte de baixo você irá selecionar todas as imagens (se não tiver nenhuma imagem disponível pode pular essa etapa) pelo “Select all” em amarelo e depois clique em “Compress the selected images” conforme a IMAGEM 8. Após isso, clique em “Cache” circulado em verde. Configure conforme a IMAGEM 9 e depois “Save changes”. Depois clique em “Preload” e configure conforme a IMAGEM 10 e depois “Save changes”. Como último passo, vá em “Minify” e em “Minify status” e configure conforme a IMAGEM 11.
 🚀 SUA PÁGINA VOANDO 🚀
 Esse foi um tutorial completo de como melhorar a velocidade da sua página de uma vez por todas.
 Tenho certeza que se você aplicar os passos que te dei nesse post, com certeza a sua página vai estar voando, assim como as que otimizo por aqui!!
 Agora eu TE DESAFIO a ir no gtmetrix e testar a velocidade da sua página atualmente e postar o print do resultado. Depois de seguir o passo a passo volta aqui e posta o print do resultado. Vamos ver quem consegue bater uma nota A no GT Metrix.
	Tutorial de Como Parar de Rasgar Dinheiro Anunciando Com Sites/Landing Pages em Wordpress
	Todos nós sabemos que ter um site para anunciar é muito importante. Mas se você anuncia usando site as chances são de que você está rasgando dinheiro e nem sabe. 😨
	Por que digo isso? Basicamente porque a maioria dos anunciantes anunciam com páginas lentas. Uma pesquisa feita indica que se o seu site tem um LCP (Largest Contentful Paint) de 3s, você vai perder até 50% do tráfego. Pra ser mais claro, se atualmente você estiver investindo R$2.000 em anúncio com uma página com esse LCP, isso significa que R$1.000 estão indo diretamente para o lixo. 💸💸 (Você pode usar o GT Metrix para avaliar o seu site)
	E olha que volta e meia vejo sites que batem 5s, 6s ou até 10s de LCP.
	Entendeu agora a importância de ter um site rápido?
	Por isso, depois de otimizar vários sites, eu separei um passo a passo detalhado para você parar de rasgar dinheiro e ter um site extremamente rápido. 🚀💪🏽
	Vamos lá então!
	PRIMEIRO PASSO: USAR UMA CDN NO SEU SITE 🖥
	A CDN nada mais é do que um grupo de servidores distribuídos ao redor do planeta que armazenam conteúdo em cache próximo aos usuários finais.
	Vou te dar um exemplo real… Imagine que você mora no RJ e acessou um site que está hospedado em servidores da Califórnia, EUA. Esse site não usa CDN. Basicamente, o seu navegador terá que “buscar as informações” do site do RJ até a Califórnia para te mostrar esse site.
	Isso é ruim porque daqui até lá ele precisará percorrer uma longa distância, concorda?
	Mas agora imagine que esse site usasse uma CDN que tenha um dos servidores em São Paulo. Isso significa que quando alguém acessasse o site do Brasil, esse servidor armazenaria as informações (cache) do site. Daí, se você fosse acessar esse site o seu navegador não teria que buscar as informações longe (Califórnia), mas sim aqui pertinho de você (São Paulo).
	“Tá, mas qual CDN eu posso usar? Preciso pagar?”
	Não, você não precisa pagar nada por isso. Existe um plano na Cloudflare que já está de bom tamanho para a maioria dos anunciantes. E esse plano é gratuito. É só se cadastrar, conectar o seu site aos servidores de lá e partir para o abraço.
	OBS: Veja se o plano da sua hospedagem já te oferece algum CDN.
	SEGUNDO PASSO: OTIMIZAR TODAS AS IMAGENS 📸
	Esse é um passo muito importante, porque geralmente o maior problema dos sites estão aqui. Poucos são aqueles que otimizam as imagens que vão para o site. Acredito que você provavelmente já foi em um site e a imagem vai carregando por partes. Por que isso acontece? Porque provavelmente o desenvolvedor apenas jogou uma imagem de 1500 px por 1500 px no site onde ela precisaria de uma resolução de 300 px por 300 px. Mas afinal, o que seria otimizar a imagem?
	A resposta é: dimensionar a imagem da forma correta e transformá-la em arquivo webp comprimido.
	Como dimensionar da forma correta? Bem, aqui você vai precisar de uma extensão no Chrome. O nome da extensão é Designer Tools. Com ela você vai poder ver o tamanho real que a sua imagem apresenta no seu site. Sabendo disso você vai redimensionar a imagem para que você não exceda a resolução sem necessidade.
	Por exemplo, se você colocou uma imagem de 1080 x 1080 no seu site e viu que o tamanho da imagem no seu site é de apenas 400 x 400, você vai reduzir o tamanho dela para que ela se encaixe naquele tamanho sem exceder a resolução necessária. Ou seja, você vai redimensionar a imagem para 400 x 400. Você pode usar o canva ou algum redimensionador online para isso.
	Além disso, você vai converter todas as imagens para webp. Seguem os links para converter tanto imagens png, como jpg:
	conversor-de-jpg-para-webp/
	conversor-de-png-para-webp/
	OBS: Caso a sua imagem seja transparente (png), não tem problema, pois o arquivo webp consegue puxar a transparência da imagem original.
	Depois de fazer isso você vai comprimir o arquivo webp para ele diminuir ainda mais o tamanho. Use esse site para fazer isso:
	compress-webp
	Após isso, é só subir os novos arquivos webp no seu site.
	TERCEIRO PASSO: OTIMIZAR O CSS E JAVASCRIPT DO SEU SITE 🧑‍💻
	Essa etapa também é muito importante, porque infelizmente o Wordpress e os plugins que instalamos nele (principalmente o Elementor) disparam muitos códigos desnecessários na abertura do nosso site. E isso é um problema, já que essas informações precisam ser “lidas” pelo navegador do visitante.
	“Mas Lucas como vou fazer isso, já que o meu site está em Wordpress?”
	Para fazer isso, você terá que instalar um plugin chamado Asset Clean Up (IMAGEM 1). Com esse plugin você pode bloquear o disparo de códigos inúteis para o seu site.
	Aqui é um trabalho de formiguinha. Você vai desativar código por código (um por vez) e salvar as configurações e depois entrar no seu site. Se o seu site está funcionando sem problemas, deixa o código desativado e parte para testar outro. Caso ele tenha dado pau, liga o código novamente e bola pra frente. É como se fosse um interruptor. Se der problema desligado a gente liga de novo!
	QUARTO PASSO: INSTALAR PLUGIN PARA CACHE, OTIMIZAÇÃO DO BANCO DE DADOS, IMAGENS, MINIFICAÇÃO DE JS, CSS, ETC
	Aqui está o pulo do gato. Mesmo depois de todas essas otimizações nós iremos instalar um plugin chamado WP-Optimize e configurá-lo. Esse é um plugin que ajuda a melhorar muito a velocidade do site. Note que na IMAGEM 2 você vê uma landing page onde foram aplicados os 3 passos anteriores. Ela já está excelente, certo? Mas veja que o LCP está batendo 1,5s. Apenas por instalar e configurar de forma correta esse plugin o LCP mudou drasticamente para 517ms (0,51s) como você pode ver na IMAGEM 3. Além disso, repare que a performance e estrutura do site pulou para 100%. Ou seja, tudo que eu fosse fazer dali pra frente quase não teria impacto na velocidade do site já que ele foi completamente otimizado.
	Então vamos partir para a parte prática… Vá nos plugins pesquise por “WP-Optimize”. Instale e ative o plugin da IMAGEM 4. Após ativar, acesse as configurações desse plugin. Clique em “database” ou “banco de dados” conforme as setas vermelhas da IMAGEM 5. A partir daqui começaremos a otimizar o seu banco de dados do Wordpress. Para isso, você precisará clicar na caixinha que marca todas as opções conforme a seta amarela. Antes de apertar no botão da seta rosa para executar a ação, recomendo que você instale um plugin chamado “UpdraftPlus” e configure-o. Esse plugin serve para criar arquivos de backup do seu site. Ou seja, se acontecer algo com o seu site você poderá recuperar facilmente com os arquivos baixados do backup.
	Após isso, você irá ticar o quadradinho indicado com a seta verde. Isso garantirá que antes do WP Optimize fazer a limpeza do seu banco de dados, o UpdraftPlus criará os arquivos de backup do seu site. Daí, clique no botão da seta rosa.
	Agora você irá clicar em “settings” conforme a seta azul indica. Você deixará configurado igual a IMAGEM 6 e depois clique em “Save settings”. Depois clique em “Imagens” conforme a IMAGEM 7 e deixe configurado do mesmo jeito. Na parte de baixo você irá selecionar todas as imagens (se não tiver nenhuma imagem disponível pode pular essa etapa) pelo “Select all” em amarelo e depois clique em “Compress the selected images” conforme a IMAGEM 8. Após isso, clique em “Cache” circulado em verde. Configure conforme a IMAGEM 9 e depois “Save changes”. Depois clique em “Preload” e configure conforme a IMAGEM 10 e depois “Save changes”. Como último passo, vá em “Minify” e em “Minify status” e configure conforme a IMAGEM 11.
	🚀 SUA PÁGINA VOANDO 🚀
	Esse foi um tutorial completo de como melhorar a velocidade da sua página de uma vez por todas.
	Tenho certeza que se você aplicar os passos que te dei nesse post, com certeza a sua página vai estar voando, assim como as que otimizo por aqui!!
	Agora eu TE DESAFIO a ir no gtmetrix e testar a velocidade da sua página atualmente e postar o print do resultado. Depois de seguir o passo a passo volta aqui e posta o print do resultado. Vamos ver quem consegue bater uma nota A no GT Metrix.