O seu site mais leve

+5
Reset
Bet4
Junior
pedxz
WictorP
9 participantes

WictorP WictorP  • 08.01.17 10:17

O seu site mais leve Empty O seu site mais leve 08.01.17 10:17

Reputação da mensagem: 100% (2 votos)
Muitas vezes encontramos em um site, várias imagens desnecessárias, que ocasionam em mais downloads do navegador para a exibição da página. É importante que você ao estilizar a sua página, utilize imagens somente quando necessário, o CSS permite várias estilizações já padrões e que são mais leves do que imagens, além de muitas vezes serem melhor utilizados.

Um exemplo que vou dar, é o gradiente. Se você não sabe, com o CSS você pode fazer vários tipos de gradiente, e a sua página fica muito mais leve.
Um site gerador de gradiente CSS: http://www.colorzilla.com/gradient-editor/

Outro exemplo é as bordas personalizadas. Vejo muito isso em sites habbos, eles fazem aquele title box com várias camadas de borda, e por isso acabam tendo que utilizar imagens, e muitas vezes, vários códigos para fazer a title box criar forma. Para você que não sabe, existe:
OUTLINE (clique para saber mais)
BORDER (clique para saber mais)
BOX-SHADOW (clique para saber mais)

Leia atentamente como funciona cada uma dessas sintaxes, e comecem a utilizar em seus sites. Um site mais leve é melhor para o seu visitante, pois, nem no 3G irá demorar muito pra carregar.

Uma outra dica importante, mas fora do conteúdo principal do tópico, é o BOX-SIZING, colocando o código box-sizing:border-box; em seu site, nenhuma sintaxe de espaçamento irá alterar o tamanho do seu elemento, tornando mais fácil trabalhar com padding e porcentagens.

Espero ter ajudado.

pedxz pedxz  • 08.01.17 10:22

Super administradorMembro da Equipa

O seu site mais leve Empty Re: O seu site mais leve 08.01.17 10:22

hmm muito interessante, na semana passada pesquisei isso kk não encontrei nada na minha pesquisa.

Anonymous Convidado  • 08.01.17 13:34

O seu site mais leve Empty Re: O seu site mais leve 08.01.17 13:34

Conheci alguns desses sites de gerador de gradient em CSS
Vai me ajudar, já que as vezes tento aprender CSS :) 
Ganhou uma curtida!

Junior Junior  • 08.01.17 13:36

DesenvolvedorMembro técnico

O seu site mais leve Empty Re: O seu site mais leve 08.01.17 13:36

Já conhecia o site de gradients,os métodos de outline,box-shadow,etc.
Obrigado pela dica do box-sizing

Bet4 Bet4  • 08.01.17 13:38

O seu site mais leve Empty Re: O seu site mais leve 08.01.17 13:38

Tópico interessante, como você disse mesmo, as imagens muitas vezes sobrecarregam a página causando a lentidão para carregar, e o que mais vemos é usuários sobrecarregando suas páginas com imagens desnecessárias, parabéns pelo tópico!

Reset Reset  • 08.01.17 14:02

O seu site mais leve Empty Re: O seu site mais leve 08.01.17 14:02

Junior escreveu:Já conhecia o site de gradients,os métodos de outline,box-shadow,etc.
Obrigado pela dica do box-sizing

Também já conhecia...
Obrigado pelas dicas.

n4zun n4zun  • 08.01.17 14:14

O seu site mais leve Empty Re: O seu site mais leve 08.01.17 14:14

Muito bom, obrigado por compartilhar =)

Visi0n Visi0n  • 08.01.17 15:08

O seu site mais leve Empty Re: O seu site mais leve 08.01.17 15:08

Bet4 escreveu:Tópico interessante, como você disse mesmo, as imagens muitas vezes sobrecarregam a página causando a lentidão para carregar, e o que mais vemos é usuários sobrecarregando suas páginas com imagens desnecessárias, parabéns pelo tópico!

Verdade, quando eu fiz o meu primeiro site "codificado" era 100% imagem, pois era o jeito mais simples que eu havia achado pra fazer KKK

Com certeza, este site divulgado irá ajudar muito as pessoas que querem aprender e que preferem serem mais práticos.

Gasparzinho Gasparzinho  • 08.01.17 15:24

O seu site mais leve Empty Re: O seu site mais leve 08.01.17 15:24

O site de gradiente eu já conhecia, as dicas são ótimas! tnks

Luan Martins Luan Martins  • 09.01.17 13:37

O seu site mais leve Empty Re: O seu site mais leve 09.01.17 13:37

Informação muito valiosa para quem não tem muita afinidade com css, e como disse tem gerador para varias coisas, gradients, box shadow, entre outros, colocar imagem realmente atrapalha no desempenho do site.

muito bom
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.