PÁGINA ELEMENTOR COM -2 SEG DE CARREGAMENTO

[dogaodesigner]

Fala ratazanass, Dogão aqui! 

Provavelmente vocês já me conhecem e sabe que eu sou o designer mais aclamado desse Fórum, sou aquele designer que você sempre sonhou, pontual e que entrega uma qualidade extrema nos serviços! 🐶🔥

NO POST DE HOJE VOU ENSINAR VOCÊS A OTIMIZAREM A PÁGINA ELEMENTOR DE VOCÊS, PARA CARREGAR COM MENOS DE 2SEG NO MOBILE!

"Ai Dogão porque você vai me ensinar isso? Você não vai perder clientes por conta disso?" NÃO! Eu não vou perder com isso, aliás vocês vão aprender a otimizar a página de vocês, e não deixar ela com um design mais bonito que vai aumentar suas conversões em até 10%.  (PARA ISSO AQUI, VOCÊ PRECISA DO DOGÃO AU AU AU)

Vamos lá minhas minhas ratazanas, vamos começar que o Dog ta no esgoto!

 

PASSO 01:

Ratazanas o primeiro passo aqui é vocês baixarem um Plugin chamado: (Smush)

PASSO 02:

Depois de baixado o Plugin vocês vão em: (Smush - Ferramentas - Ativa a Opção - Detectar e mostrar imagens no tamanho incorreto)

PASSO 03:

Após isso vocês voltam na sua Landing Page, e você vai notar que aparece um iconezinho em amarelo no canto superior direito.

Vocês vão clicar nesse ícone e vai ver as imagens que estão no tamanho errado!

Após isso, você pode clicar sobre as numerações indicadas e ver quais são as imagens que precisam de reajuste, e ao mesmo tempo você consegue ver qual o tamanho ideal para aquela imagem.

PASSO 04:

Ratazanas agora é hora de redimensionar essas imagens para o valor que eles sugerem!

Para isso você pode usar: Canva, Photoshop, Photopea (é um Photoshop online e gratuito)..

Após redimensionar as imagens para o tamanho correto, você deve subir essas imagens novamente ao WordPress

PASSO 05:

Agora vamos comprimir essas imagens, afim de deixar elas com um tamanho menor, e não sobrecarregar a nossa página!

Para isso vocês devem ir em: (Smush - Smush em Massa - Compactar em Massa Agora - Salvar Mudanças)

PASSO 06:

Agora vocês vão precisar baixar um Plugin chamado: (Webp Express)

PASSO 07:

Depois de baixado o Plugin vocês vão em (Configurações - Webp Express - Ativar a opção "Alter HTML" - Salvar Configurações)

PASSO 08:

Após realizar isso, na mesma aba você vai clicar em: "Bulk Convert - Start Conversion"

PASSO 09:

Ratazanas se na hora de realizar a conversão, acontecer de Falhar os arquivos, assim como no exemplo acima. Vocês terão de entrar em contato com a Hospedagem de vocês e pedir para eles transferir o site de vocês para um Servidor que suporte a extensão .Webp para imagens. Vale ressaltar que essa mudança pode levar alguns dias          (3 - 5 dias). Se o de vocês derem certo, é só clicarem em "Salvar Configurações"

PASSO 10:

Agora vem a parte de baixar o Plugin que deixei disponível para vocês (WP - ROCKET)

PASSO 11:

Dentro do Wordpress você vai em (Plugins - Adicionar novo - Enviar Plugin - Choose File) e upa o arquivo em .zip para dentro do WordPress

PASSO 12:

Com o Plugin baixado e ativado, vocês vão ir em: (Configurações - WP Rocket - Cache)

Agora você deve ativar a opção: "Ativar Cache para Dispositivos Móveis" - (Salvar Alterações)

 

PASSO 13:

Após realizar isso você deve ir em: (Wp Rocket - Limpar o Cache)

PASSO 14:

Próximo passo é você ir em "Otimizar Arquivos"

Aqui eu RECOMENDO que você teste arquivo por arquivo, seleciona um, vai em "Salvar Alterações", Wp Rocket - Limpar o Cache) e abra a sua Landing Page em aba anônima tanto no pc quanto no desktop e verifique se a página continua a mesma coisa, ou se ela quebrou!

Testa todas as opções, se nenhuma delas quebrar, pode deixar todas ativa, agora caso uma delas quebre a página, deixe desativado! 

EXEMPLO: A opção "Atrasa a execução do JavaScript" normalmente da problema para quem usa delay no botão de compra, ao abrir a Landing Page, aparecerá de forma bem rápida o botão de vendas e depois sumirá, porém são esses errinhos que fode com a sua conversão!

PASSO 15:

Essa é uma das partes mais importantes: 

Você deve ir dentro da sua página e ver qual a fonte que está sendo utilizada na sua página, mesmo que você esteja utilizando mais de uma fonte na página.

Suponha que você esteja usando as seguintes fontes: Montserrat e Roboto.

Você deverá ir em: https://fonts.google.com/ pesquisar pelo nome da fonte que está sendo utilizado no seu site, e baixar a família da fonte!

PASSO 16:

Com as suas fontes baixadas, você deverá descompactar elas!

Dentro do WordPress você deverá ir em: (Elementor - Custom Fonts)

PASSO 17:

Clique em: "Add New" e coloque no nome da família da font (o nome precisa ser igual, ao que você baixou)

Exemplo, eu baixei a font Montserrat, você colocar ali dentro do nome: Montserrat (respeitando o Maiúsculo e Minúsculo)

Em seguida clique em "Add Font Variation"

PASSO 19:

PRESTEM ATENÇÃO!

o passo 19 eu vou deixar lá em baixo em formato de vídeo, para vocês não se perderem!

 

PASSO 20:

Após realizar o tutorial do passo 19, você deve clicar em "Publicar"

Ir em (WP Rocket - Limpar o Cache)

Dentro da aba de fonts ainda, você clicar em "Limpar o Cache"

PASSO 21:

Após realizar isso com todas as fontes presentes dentro da sua Página, você deve ir dentro da sua página e mudar todas as fontes para a fonte que você subiu, ela aparecerá no topo das fontes, realizando a troca você deixe ir em: (Wp Rocket - Limpar o Cache)

PASSO 21:

Feito isso, você deverá baixar o seguinte Plugin: (Disable Fonts Google)

PASSO 22:

Após baixar, limpe o cache novamente com o WP Rocket da forma que passei umas 10x acima auauau

Visualize a sua página em aba anônima no Desktop e Mobile, e feito dog, se nada ocorrer, bem provável que o carregamento da sua página fique abaixo dos 2seg.

BÔNUS DO DOGÃO:

Utilize o tema "Astra" nas suas Landing Pages, o resultado aqui com ele é supreendente!

Quer realizar algum job comigo? Acesse o meu porfólio e entre em contato: https://facilitandosuavida.fun/dogao-designer/

Espero que tenham gostado, se puder deixe seu Feedback, porque deu trampo criar esse tutorial auauau.

VÍDEO PASSO 19:

 

 

Wp - Rocket.zip

 

Editado Maio 25, 2022 por dogaodesigner

[Copymate]

Parabéns mano, ótimo post !!

 

[dogaodesigner]

55 minutos atrás, cytern disse:

Parabéns mano, ótimo post !!

 

Tamo Junto dog!

[San]

Massaaaaaaa top vlw DOGÃO

[dogaodesigner]

9 horas atrás, San disse:

Massaaaaaaa top vlw DOGÃO

Tamo Junto dog.

[Dorimê]

que êssssss.............. DE GRAÇA ASSIM????????

obrigado catchorrooo

arregaçou

[dogaodesigner]

1 hora atrás, Capitão fodacy disse:

que êssssss.............. DE GRAÇA ASSIM????????

obrigado catchorrooo

arregaçou

Tamo Junto dogzão

[Fujiro Nakombi]

Em 25/05/2022 em 13:58, dogaodesigner disse:

Fala ratazanass, Dogão aqui! 

Provavelmente vocês já me conhecem e sabe que eu sou o designer mais aclamado desse Fórum, sou aquele designer que você sempre sonhou, pontual e que entrega uma qualidade extrema nos serviços! 🐶🔥

NO POST DE HOJE VOU ENSINAR VOCÊS A OTIMIZAREM A PÁGINA ELEMENTOR DE VOCÊS, PARA CARREGAR COM MENOS DE 2SEG NO MOBILE!

"Ai Dogão porque você vai me ensinar isso? Você não vai perder clientes por conta disso?" NÃO! Eu não vou perder com isso, aliás vocês vão aprender a otimizar a página de vocês, e não deixar ela com um design mais bonito que vai aumentar suas conversões em até 10%.  (PARA ISSO AQUI, VOCÊ PRECISA DO DOGÃO AU AU AU)

Vamos lá minhas minhas ratazanas, vamos começar que o Dog ta no esgoto!

 

PASSO 01:

Ratazanas o primeiro passo aqui é vocês baixarem um Plugin chamado: (Smush)

PASSO 02:

Depois de baixado o Plugin vocês vão em: (Smush - Ferramentas - Ativa a Opção - Detectar e mostrar imagens no tamanho incorreto)

PASSO 03:

Após isso vocês voltam na sua Landing Page, e você vai notar que aparece um iconezinho em amarelo no canto superior direito.

Vocês vão clicar nesse ícone e vai ver as imagens que estão no tamanho errado!

Após isso, você pode clicar sobre as numerações indicadas e ver quais são as imagens que precisam de reajuste, e ao mesmo tempo você consegue ver qual o tamanho ideal para aquela imagem.

PASSO 04:

Ratazanas agora é hora de redimensionar essas imagens para o valor que eles sugerem!

Para isso você pode usar: Canva, Photoshop, Photopea (é um Photoshop online e gratuito)..

Após redimensionar as imagens para o tamanho correto, você deve subir essas imagens novamente ao WordPress

PASSO 05:

Agora vamos comprimir essas imagens, afim de deixar elas com um tamanho menor, e não sobrecarregar a nossa página!

Para isso vocês devem ir em: (Smush - Smush em Massa - Compactar em Massa Agora - Salvar Mudanças)

PASSO 06:

Agora vocês vão precisar baixar um Plugin chamado: (Webp Express)

PASSO 07:

Depois de baixado o Plugin vocês vão em (Configurações - Webp Express - Ativar a opção "Alter HTML" - Salvar Configurações)

PASSO 08:

Após realizar isso, na mesma aba você vai clicar em: "Bulk Convert - Start Conversion"

PASSO 09:

Ratazanas se na hora de realizar a conversão, acontecer de Falhar os arquivos, assim como no exemplo acima. Vocês terão de entrar em contato com a Hospedagem de vocês e pedir para eles transferir o site de vocês para um Servidor que suporte a extensão .Webp para imagens. Vale ressaltar que essa mudança pode levar alguns dias          (3 - 5 dias). Se o de vocês derem certo, é só clicarem em "Salvar Configurações"

PASSO 10:

Agora vem a parte de baixar o Plugin que deixei disponível para vocês (WP - ROCKET)

PASSO 11:

Dentro do Wordpress você vai em (Plugins - Adicionar novo - Enviar Plugin - Choose File) e upa o arquivo em .zip para dentro do WordPress

PASSO 12:

Com o Plugin baixado e ativado, vocês vão ir em: (Configurações - WP Rocket - Cache)

Agora você deve ativar a opção: "Ativar Cache para Dispositivos Móveis" - (Salvar Alterações)

 

PASSO 13:

Após realizar isso você deve ir em: (Wp Rocket - Limpar o Cache)

PASSO 14:

Próximo passo é você ir em "Otimizar Arquivos"

Aqui eu RECOMENDO que você teste arquivo por arquivo, seleciona um, vai em "Salvar Alterações", Wp Rocket - Limpar o Cache) e abra a sua Landing Page em aba anônima tanto no pc quanto no desktop e verifique se a página continua a mesma coisa, ou se ela quebrou!

Testa todas as opções, se nenhuma delas quebrar, pode deixar todas ativa, agora caso uma delas quebre a página, deixe desativado! 

EXEMPLO: A opção "Atrasa a execução do JavaScript" normalmente da problema para quem usa delay no botão de compra, ao abrir a Landing Page, aparecerá de forma bem rápida o botão de vendas e depois sumirá, porém são esses errinhos que fode com a sua conversão!

PASSO 15:

Essa é uma das partes mais importantes: 

Você deve ir dentro da sua página e ver qual a fonte que está sendo utilizada na sua página, mesmo que você esteja utilizando mais de uma fonte na página.

Suponha que você esteja usando as seguintes fontes: Montserrat e Roboto.

Você deverá ir em: https://fonts.google.com/ pesquisar pelo nome da fonte que está sendo utilizado no seu site, e baixar a família da fonte!

PASSO 16:

Com as suas fontes baixadas, você deverá descompactar elas!

Dentro do WordPress você deverá ir em: (Elementor - Custom Fonts)

PASSO 17:

Clique em: "Add New" e coloque no nome da família da font (o nome precisa ser igual, ao que você baixou)

Exemplo, eu baixei a font Montserrat, você colocar ali dentro do nome: Montserrat (respeitando o Maiúsculo e Minúsculo)

Em seguida clique em "Add Font Variation"

PASSO 19:

PRESTEM ATENÇÃO!

o passo 19 eu vou deixar lá em baixo em formato de vídeo, para vocês não se perderem!

 

PASSO 20:

Após realizar o tutorial do passo 19, você deve clicar em "Publicar"

Ir em (WP Rocket - Limpar o Cache)

Dentro da aba de fonts ainda, você clicar em "Limpar o Cache"

PASSO 21:

Após realizar isso com todas as fontes presentes dentro da sua Página, você deve ir dentro da sua página e mudar todas as fontes para a fonte que você subiu, ela aparecerá no topo das fontes, realizando a troca você deixe ir em: (Wp Rocket - Limpar o Cache)

PASSO 21:

Feito isso, você deverá baixar o seguinte Plugin: (Disable Fonts Google)

PASSO 22:

Após baixar, limpe o cache novamente com o WP Rocket da forma que passei umas 10x acima auauau

Visualize a sua página em aba anônima no Desktop e Mobile, e feito dog, se nada ocorrer, bem provável que o carregamento da sua página fique abaixo dos 2seg.

BÔNUS DO DOGÃO:

Utilize o tema "Astra" nas suas Landing Pages, o resultado aqui com ele é supreendente!

Quer realizar algum job comigo? Acesse o meu porfólio e entre em contato: https://facilitandosuavida.fun/dogao-designer/

Espero que tenham gostado, se puder deixe seu Feedback, porque deu trampo criar esse tutorial auauau.

VÍDEO PASSO 19:

 

 

 

Wp - Rocket.zip 2 MB · 29 downloads

 

Fiz todo processo aqui, e ficou 2.4s. 

Estava em 3.3 o carregamento da página.

Vamos ver se melhora, pois estava perdendo 30% do tráfego quase...

Depois volto e conto como foi.
 

Obrigado Dogão...

[King of Ilision]

O meu ta dando isso quando jogo as fontes

[dogaodesigner]

23 horas atrás, MD Dallas W Rio disse:

O meu ta dando isso quando jogo as fontes

Irmão tu ta subindo como arquivo .zip
é preciso descompactar o arquivo e subir no formato que estão pedindo ali:
WOFF
WOFF 2
SVG
TTF
EOT
Use esse site aqui para realizar a conversão das Fontes: https://transfonter.org/

[Vinícius Greco]

Sensacional o post dogão, parabéns!!

[clcenriacoLuo]

Posso fazer isso mesmo com o meu site conectado a própia shopify ?

 

[paypubli]

Ótimas dicas viu, parabéns! 

Se me permite contribuir com uma dica extra pra galera, lembre-se que é muito importante vocês terem um SERVIDOR BÃO, apenas instalar plugins de otimização não vai acontecer milagres.

Ah, mais um ponto...

Evitem exagerar nos widgets do Elementor, use o mínimo possível para reduzir o DOM de sua página, beleuza?

Editado Setembro 22, 2023 por paypubli
só pra atualizar e publicar, pois quando comentei estava no prazo de 7 dias

[Amanda 21]

Caraca, Dogão! Mandou bem no tutorial, hein? Achei massa a forma que tu descomplicou a otimização pra Elementor. A galera que tá começando agora em web design vai curtir demais essas dicas. Vou já testar aqui e ver se consigo baixar esse tempo de carregamento da minha página tbm. Show de bola compartilhar conhecimento assim, isso que faz a diferença na comunidade. Vou dar uma olhada no teu portfólio, quem sabe a gente não faz um trampo junto no futuro. Vlw pelo conteúdo top!

[asotgo8wpswue5]

Dogão, esse tuto tá quase um curso completo, hein? Ri alto aqui com "Dog ta no esgoto" kkkkk. Só uma dúvida: esse WP Rocket vem com licença pra atualizar ou é nóis por conta própria?

[abr.aobuso42si]

O Webp Express funciona de boa em qualquer hospedagem ou precisa de algo específico no servidor?

[Ultra PLRs]

Arregaçou no tuto, Dogão! Já vou aplicar essas aí no meu projeto, tô precisando otimizar umas páginas que tão lentas pra caramba. Curti o detalhe de explicar passo a passo, ficou bem didático. Bora ver se chego nesse -2seg também, porque tráfego eu já tô perdendo. Só bora.

[Mastysz]

Como faço pra saber se meu servidor suporta a extensão .Webp?

[Mister Magoo]

Já atendi um cliente que o problema dele era simplesmente a hospedagem Hostgator compartilhada. Migrou para uma VPS e o site parecia um jato.