Como deixar meu site mais rápido?

Ter um site reconhecido na internet requer preparo, planejamento e eficácia na hora de compor material e apresentar as publicidades de forma que seu cliente ou leitor, tenha o máximo conforto para encontrar o que procura em seu domínio.

Por | @marciobohrer Programação
<p>Voc&ecirc; j&aacute; deve ter acessado algum site onde tudo parece estar carregando de maneira mais demorada que o esperado. Este mal funcionamento pode arruinar as chances de determinado leitor voltar a procurar seu site.</p> <p>H&aacute; muitos motivos que podem estar deixando sua p&aacute;gina na web lenta, e esta lentid&atilde;o pode ocasionar que seu cliente, leitor ou at&eacute; amigo, abandone a pesquisa por conta de imagens que demorem &agrave; carregar, texto lento e desfigurado, enfim, uma trag&eacute;dia.</p> <p>Al&eacute;m do conte&uacute;do expressado de forma clara, o r&aacute;pido carregamento de seu website deve ser priorit&aacute;rio para o bom funcionamento do mesmo e para que ele lhe d&ecirc; o retorno desejado.</p> <p>Ent&atilde;o que tal algumas dicas para otimizar seu site, torna-lo mais r&aacute;pido? Em resumo, voc&ecirc; precisa reduzir o n&uacute;mero de requisi&ccedil;&otilde;es HTTP, este &eacute; um dos motivo para seu site estar carregando com demasiada lentid&atilde;o.</p> <p><span class="img_editor"><img src="/imagens/post/10716/td_capa.jpg" alt="" /></span></p> <p><strong>Tamanho das imagens</strong></p> <p>A medida mais dr&aacute;stica a ser tomara, seria: N&atilde;o use imagens em seu site. J&aacute; pensou?</p> <p>As imagens podem deixar seu site interativo e qualificado, pois n&atilde;o limita seu leitor apenas ao texto. Mas cuidado, tente comprimir as imagens do site de forma que elas fiquem com qualidade aceit&aacute;vel em tamanho utiliz&aacute;vel.</p> <p>Tente criar padr&otilde;es para as imagens de seu site: Thumbnails, imagens no corpo da mensagem, imagem de capa, imagem de tag, etc. Esta medida n&atilde;o impede que voc&ecirc; crie galerias de imagens, cotando que ela <span style="text-decoration: line-through;">n&atilde;o tenha 5mil imagens</span> seja moderada e padronizada.</p> <p>Outra ferramenta que pode ser sua aliada na hora de salvar as imagens em seu site, &eacute; o photoshop atrav&eacute;s da op&ccedil;&atilde;o &ldquo;save for web&rdquo;. (Shift+Crtl+Alt+S). Como pr&oacute;prio nome j&aacute; diz, ela salva as imagens em qualidade boa (definida por voc&ecirc;) e tamanho desej&aacute;vel.</p> <p><strong>CSS Sprite</strong></p> <p>Fazer um &ldquo;Sprite&rdquo; em seu site, &eacute; uma boa alternativa para acelerar o processamento de busca de imagens no seu servidor e subitamente diminuir o n&uacute;mero de requisi&ccedil;&otilde;es ao servidor, por exemplo: As imagens utilizadas como Logo do site, bot&otilde;es de compartilhar em redes sociais, coment&aacute;rios, etc. Se toda vez que que acessada uma p&aacute;gina em seu site, o sistema precisar buscar cada imagem separadamente no servidor, este tempo pode modificar a rapidez e efic&aacute;cia de seu site.</p> <p>O Sprite &eacute; usado para nestes casos, unir grupos destas pequenas imagens em uma imagem s&oacute;. Fazendo assim, voc&ecirc; determina no c&oacute;digo qual s&atilde;o as dimens&otilde;es da imagem que voc&ecirc; quer buscar. Acompanhe o exemplo a abaixo:</p> <p><span class="img_editor"><img src="/imagens/post/10716/socialmediacsspriteiconset.jpg" alt="" /></span></p> <p>Ex:</p> <p><strong>HTML</strong><code><a class="facebook2" href="http://www.facebook.com"></a></code></p> <p><strong>CSS</strong></p> <p><code>.facebook2 {width: 35px; height: 35px; float:left; <br />background: url(url_da_imagem.png) -84px -111px}</code></p> <p>Escolhemos o bot&atilde;o para o Facebook2 como exemplo de um sprite no CSS. Como voc&ecirc; p&ocirc;de ver, devemos informar as dimens&otilde;es para qual o trecho da imagem estamos requerendo. Neste caso, solicitamos um quadrado de 35 por 35 pixels, come&ccedil;ando do ponto -84 da esquerda para a direita, e -111px de cima para baixo.</p> <p>Em se tratando de melhorar o tempo de carregamento do seu site, esta pr&aacute;tica pode ser determinante para o bom sucesso da nossa otimiza&ccedil;&atilde;o. Use-a.</p> <p><strong>Hotlinks nas imagens</strong></p> <p>Outro problema que pode deixar seu site mais lento s&atilde;o os hotlinks. Mas afinal, o que &eacute; hotlink?</p> <p>O site X publicou uma foto recentemente com a nomina&ccedil;&atilde;o <strong>Foto.jpeg. </strong>Ent&atilde;o o site M inseriu em um post seu, a imagem publicada no site X, ele copiou a imagem e mesmo sem querer, linkou seu site ao site X atrav&eacute;s da imagem que acabara de copiar.</p> <p>Sendo assim, quando um leitor acessa a p&aacute;gina do site M, ele busca aquela <strong>Foto.jpeg</strong> do site X para o leitor. Estes acontecimentos freiam a rapidez do site X, que supostamente n&atilde;o tem nada a ver com o site M. Entendeu?</p> <p><strong>CSS em dia</strong></p> <p>O CSS &eacute; utilizado em muitos e muitos sites na web de hoje. Se voc&ecirc; utiliza, fa&ccedil;a uma varredura de vez em quando para que seu site esteja estilizado em sem espa&ccedil;os in&uacute;teis. Esta &eacute; outra op&ccedil;&atilde;o que pode tornar seu site mais r&aacute;pido, afinal, c&oacute;digos desnecess&aacute;rios geram um trabalho tamb&eacute;m desnecess&aacute;rio ao seu servidor.</p> <p><span class="img_editor"><img src="/imagens/post/10716/css-tips.jpg" alt="" /></span></p> <p><strong>Estilos na cabe&ccedil;a, JS no rodap&eacute;</strong></p> <p>Colocando as folhas de estilo na parte superior do c&oacute;digo, entre as tags <strong>&lt;head&gt; ... &lt;/head&gt;</strong>, a p&aacute;gina pode renderizar progressivamente causando uma ideia de que o site est&aacute; carregando mais r&aacute;pido.</p> <p>Por sua vez, o JavaScript sendo colocado no rodap&eacute; da p&aacute;gina, faz com que o esta renderiza&ccedil;&atilde;o de p&aacute;gina n&atilde;o seja bloqueada pela chamada dos scripts.</p> <p><strong>Utilize CDNs</strong></p> <p>Usar CDN (Content Delivery Network) ajuda na entrega mais r&aacute;pida do site, com o CDN voc&ecirc; pode ao inv&eacute;s de carregar 4 requisi&ccedil;&otilde;es por vez (padr&atilde;o dos navegadores), carregar 8 ou 12 requisi&ccedil;&otilde;es, de que forma? Usando um subdom&iacute;nio. Voc&ecirc; utiliza este subdom&iacute;nio para chamar imagens, assim o navegador vai carregar as 4 requisi&ccedil;&otilde;es do dom&iacute;nio principal, mais as 4 requisi&ccedil;&otilde;es do subdom&iacute;nio, assim ser&atilde;o 8 requisi&ccedil;&otilde;es carregadas ao mesmo tempo, sua escala de carregamento praticamente dobra.</p> <p>Entretanto, este recurso pode exigir um maior uso da banda de download do usu&aacute;rio, se ele possuir uma internet ruim, o carregamento da p&aacute;gina pode piorar. Por isto, dose entre 4, 8 ou 12 requisi&ccedil;&otilde;es por vez, aumentando um ou dois subdom&iacute;nios. A sua cascata de download &eacute; vari&aacute;vel. O que realmente importa &eacute; que com 8 requisi&ccedil;&otilde;es por vez, voc&ecirc; ter&aacute; um bom desempenho de carregamento do site.</p> <p>Estas s&atilde;o apenas algumas pr&aacute;ticas que podem acelerar o carregamento de seu site, use-os de forma que seu leitor ou cliente tenha o m&aacute;ximo conforto ao visitar seu dom&iacute;nio sem deixar o layout do site sem vida e mon&oacute;tono. O sucesso de seu site depende do equil&iacute;brio que voc&ecirc; usa na hora de gerir o design e o conte&uacute;do. Boa sorte.</p>

Mais sobre: Site, domínio, hospedagem
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários