[Dica] Acelere o seu site

DJPRMF · #1 [Dica] Acelere o seu site - Dom 13 Mar 2011 - 16:20

DJPRMF

Administrador

¯\_(ツ)_/¯
Mensagens : 77064
Reputação : 3269
Localização : Coimbra

Um Website rápido a carrear é agradável, não só para os utilizadores como para os robots dos motores de busca. Por isso, a optimização dos recursos para uma maior rapidez é importante e mesmo fundamental!

O Tugatech elaborou 20 dicas para optimizar e aumentar a velocidade do do seu website.

1 - Comprima as imagens

Se utiliza o Photoshop, utilize a opção "Save for Web..." que optimiza automaticamente as imagens para serem acedidas pela web.

2 - Não reduza as imagens por HTML

Não utilize código html para reduzir o tamanho das imagens. Apesar de estas ficarem mais pequenas, está apenas a reduzir a imagem e não o tamanho. Para os utilizadores ainda será carregada a imagem completa. Neste caso, reduza utilizando um editor de imagens.

3 - Especifique o tamanho da imagem no código HTML

Especifique sempre o tamanho real da imagem nas tags HTML. Assim o seu browser saberá mais rapidamente qual o tamanho e onde deve colocar a imagem.

4 - Evite imagens grandes.

Necessita de introduzir uma imagem muito grande? Corte-a! Edite a imagem grande e divida-a em partes mais pequenas. Assim irá poupar tempo e evita que os utilizadores carreguem uma quantidade enorme de dados.

5 - Corte as imagens grandes, mas em "bom senso"

Uma imagem grande pode ser cortada em 3/4 partes mais pequenas, mas não em 50 partes. Isto só irá causar mais lentidão no carregamento...

6 - Utilize o CSS

Muitos efeitos podem ser obtidos por CSS invés de utilizar imagens. Por exemplo, se não utiliza uma imagem de fundo, para que ter uma imagem de uma cor sólida? Utilize o CSS e defina a cor. O tamanho é muito mais pequeno e diminui drasticamente o carregamento.

7 - Não use tabelas em demasia

Tabelas são feitas para apresentar dados tabelados, para layout arquitectura da pagina você deve usar CSS que tem esse propósito. Isso também deixará seu código mais limpo e melhor para ser lido e entendido. Os crawlers conseguem ler sites com tabelas, mas você irá dar uma mãozinha usando tableless.

8 - Use CSS externo

O CSS deve ser externo e não escrito no próprio documento HTML. Use um ficheiro de css invés de introduzir o código, pois assim fica na cache do browser do utilizador, acelerando o carregamento.

9 - E use javascript externo

Assim como o CSS, os códigos javascript podem ser utilizados em ficheiros externos, alem de permitir que assim fiquem guardados na cache.

10 - Remova espaços em branco no HTML

Os espaços em branco também são considerados um carácter e, por isso mesmo, consomem alguma largura de banda... Elimine os espaços em branco quando possível...

11 - Carregue imagens por CSS invés de utilizar HTML

Pode parecer estranho, mas as imagens irão carregar mais rapidamente se utilizar o CSS do que um código HTML.

12 - Especifique o DocType

Os sites que tiverem a tag do DocType definida irão carregar mais rapidamente na maioria dos browsers.

13 - Reduza as ligações HTTP do seu site

Cada vez que faz um pedido HTTP é necessário passar por um processo um pouco longo e demorado. Reduza ao máximo possível os pedidos de HTTP.

14 - Não use HTTPS, excepto quando necessário

Não deve utilizar o protocolo seguro HTTPS sem razão. este torna a ligação quase 3 vezes mais lenta.

15 - Use e abuse do GZip

Já deixamos a dica no Tugatech de como activar o GZip pelo CPanel (http://tugatech.com.pt/t3632-dica-cpanel-comprimir-conteudo-em-gzip) e deve mesmo utilizar, pois reduz significativamente o tamanho das suas paginas web (cerca de 33% )

16 - Separa os servidores do conteúdo e do banco de dados

Se o seu site tem muito tráfego, divida as ligações entre dois servidores. Um para armazenar os ficheiros do site e outro para os bancos de dados.

17 - Utilize AJAX

Utilizar o AJAX invés de recarregar a pagina é muito mais rápido. Alem de reduzir os pedido HTTP, irá criar um efito de "rapidez" no acesso.

18 - Reduza o numero de cookies.

Os cookies podem sobrecarregar as paginas. Modere o seu uso...

19 - Utilize um CDN

Um CDN distribui os seus ficheiros por diversos servidores, para garantir uma maior velocidade. No entanto estes serviços são um pouco caros e, se for um site com bastante tráfego, pode ultrapassar mais de 50 euros/mês.

20 - Utilize o Cloudflare

Se não tiver dinheiro para comprar um CDN, utilize o CDN gratuito do CloudFlare ( http://tugatech.com.pt/t2716-cloudflare-o-cdn-gratuito?highlight=cloudflare ). Utilizamos no TugaTech e recomendamos!

Já colocou o seu site mais rápido? Deixe também as suas dicas. Wink

Ate breve!

celsinho05

celsinho05

Técnico

Mensagens : 405
Reputação : 32
Localização : Porto

Ora bem estive a ler aqui as dicas, são todas muito boas só fiquei a anhar numa pois não sei como se faz...

Tenho os conhecimentos básicos da programação web, mas não sei como é que se carregam imagens por CSS invés de utilizar HTML Mad

DJPRMF

DJPRMF

Administrador

¯\_(ツ)_/¯
Mensagens : 77064
Reputação : 3269
Localização : Coimbra

celsinho05 escreveu:Ora bem estive a ler aqui as dicas, são todas muito boas só fiquei a anhar numa pois não sei como se faz...

Tenho os conhecimentos básicos da programação web, mas não sei como é que se carregam imagens por CSS invés de utilizar HTML

Os CSS Sprites?
http://www.w3schools.com/css/css_image_sprites.asp

Smile

nfcg

nfcg

Iniciante

Mensagens : 14
Reputação : 0

Bom dia

Bom post, dicas úteis....

Deixo mais uma que encontrei hoje,
Especificar o charset no .htaccess, ou php.ini.
Eu, e como e comum fazer, especifico o charset, com a tag meta, no head do documento, o que não e correcto, visto que se o charset já estiver definido pelo apache ao apresentar a pagina, torna o processo mais rápido.

Basta adicionar a linha "AddDefaultCharset UTF-8" ao ficheiro .htaccess, e retirar a tag meta do charset do documento claro.

http://www.w3.org/International/questions/qa-htaccess-charset.en

Cumprimentos

Nuno

DJPRMF

DJPRMF

Administrador

¯\_(ツ)_/¯
Mensagens : 77064
Reputação : 3269
Localização : Coimbra

Boas,

A dica referida também pode ser aplicada.
No entanto o tempo que reduz no carregamento do site é mínimo. Cerca de 1-2ms (depende do servidor), o que não é nada de "grande". Smile

nfcg

nfcg

Iniciante

Mensagens : 14
Reputação : 0

Grão a grão amigo Smile

O mod_pagespeed e também uma boa alternativa, para aplicar muitas das dicas no primeiro tópico, aumenta um pouco o load, do servidor, mas a melhoria e significativa, e não necessita nenhuma edição de código o que facilita e muito quem utiliza scripts complexos, e de terceiros...

Cumprimentos

Nuno

DJPRMF

DJPRMF

Administrador

¯\_(ツ)_/¯
Mensagens : 77064
Reputação : 3269
Localização : Coimbra

Sem duvida... Very Happy

Outro que tenho vindo a testar em alguns servidores é o mod_spdy - https://developers.google.com/speed/spdy/mod_spdy/

Apesar do protocolo ser consideravelmente mais rápido, ainda se encontra um pouco em fase de testes, pelo que não é completamente "estável".
mas já instalei num servidor de testes à algum tempo e, até agora, 5 estrelas. Smile

nfcg

nfcg

Iniciante

Mensagens : 14
Reputação : 0

Não conhecia, utiliza o protocolo https.....
Quando tiver um bocado faço-lhe um test drive...

Obrigado pela dica

Cumprimentos

Nuno

DJPRMF

DJPRMF

Administrador

¯\_(ツ)_/¯
Mensagens : 77064
Reputação : 3269
Localização : Coimbra

Sim, esqueci-me de referir que necessita do HTTPS... Smile

Mas a performance é notável. Nos meus testes, um site que carregava em 5 segundos passou para 2-3 s, o que é uma melhoria considerável...

Daniel Mendes · **#10** Re: [Dica] Acelere o seu site - Sáb 28 Mar 2015 - 2:39

Daniel Mendes

Super-membro

Tugatech :D
Mensagens : 670
Reputação : 34
Localização : Margem-sul

Excelentes dicas, porém, já faço uso delas.

Apenas tenho de configurar o meu CloudFlare através do cPanel

Pindi

Pindi

Iniciante

Mensagens : 4
Reputação : 0

Boas dicas, só não percebi a dica 17.

DJPRMF

DJPRMF

Administrador

¯\_(ツ)_/¯
Mensagens : 77064
Reputação : 3269
Localização : Coimbra

Pindi escreveu:Boas dicas, só não percebi a dica 17.

Algumas destas "dicas" estão um pouco desatualizadas (a mensagem é de 2012). No entanto: http://www.w3schools.com/ajax/

Pindi

Pindi

Iniciante

Mensagens : 4
Reputação : 0

Obrigado, um pequeno off topic: Quantas mensagens precisamos para enviar MP's?

Nas regras diz 1 mas penso que esteja mudado no painel de administração.

Cumps

DJPRMF

DJPRMF

Administrador

¯\_(ツ)_/¯
Mensagens : 77064
Reputação : 3269
Localização : Coimbra

Pindi escreveu:
Obrigado, um pequeno off topic: Quantas mensagens precisamos para enviar MP's?
Nas regras diz 1 mas penso que esteja mudado no painel de administração.

Cumps

Boas,

São necessárias 10 mensagens antes de se poder enviar uma MP.

No entanto evite reabrir topicos desnecessariamente apenas para aumentar o número de mensagens. Wink

Se precisar de contactar um utilizador, pode também utilizar a opção de enviar um email (se disponivel).

Cumps

Pindi

Pindi

Iniciante

Mensagens : 4
Reputação : 0

A última mensagem deste tópico foi a 28 de março por essa razão escrevi nele..

DJPRMF

DJPRMF

Administrador

¯\_(ツ)_/¯
Mensagens : 77064
Reputação : 3269
Localização : Coimbra

Pindi escreveu:
A última mensagem deste tópico foi a 28 de março por essa razão escrevi nele..

Sim, era só um alerta... Smile

#1 [Dica] Acelere o seu site - Dom 13 Mar 2011 - 16:20

DJPRMF

#2 Re: [Dica] Acelere o seu site - Ter 18 Out 2011 - 23:38

celsinho05

#3 Re: [Dica] Acelere o seu site - Ter 18 Out 2011 - 23:49

DJPRMF

#4 Re: [Dica] Acelere o seu site - Seg 13 Ago 2012 - 13:52

nfcg

#5 Re: [Dica] Acelere o seu site - Seg 13 Ago 2012 - 14:58

DJPRMF

#6 Re: [Dica] Acelere o seu site - Seg 13 Ago 2012 - 15:31

nfcg

#7 Re: [Dica] Acelere o seu site - Seg 13 Ago 2012 - 15:51

DJPRMF

#8 Re: [Dica] Acelere o seu site - Seg 13 Ago 2012 - 16:03

nfcg

#9 Re: [Dica] Acelere o seu site - Seg 13 Ago 2012 - 16:09

DJPRMF

#10 Re: [Dica] Acelere o seu site - Sáb 28 Mar 2015 - 2:39

Daniel Mendes

#11 Re: [Dica] Acelere o seu site - Qua 8 Abr 2015 - 10:55

Pindi

#12 Re: [Dica] Acelere o seu site - Qua 8 Abr 2015 - 10:59

DJPRMF

#13 Re: [Dica] Acelere o seu site - Qua 8 Abr 2015 - 11:02

Pindi

#14 Re: [Dica] Acelere o seu site - Qua 8 Abr 2015 - 11:06

DJPRMF

#15 Re: [Dica] Acelere o seu site - Qua 8 Abr 2015 - 11:08

Pindi

#16 Re: [Dica] Acelere o seu site - Qua 8 Abr 2015 - 11:09

DJPRMF